<body>
  <main>
    <h1>L'interMEDIAire</h1>
    <h2>Leaflet</h2>
    <div id="map" class="map">
      <div class="map__map map_meta">
        <span class="map_meta_items" data-lat="">50.838378</span>
        <span class="map_meta_items" data-lg="">4.3953359</span>
        <span class="map_meta_items" data-client="">La Maison Cauchie</span>
        <span class="map_meta_items" data-titre="">La Maison Cauchie – MAJ</span>
        <span class="map_meta_items" data-link="">https://lintermediaire.be/maj-maison-cauchie/</span>
      </div>
    </div>
  </main>
</body>
/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$noiropaque:  rgba(29,31,32,.9);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$gris:        rgba(55,55,55,1);
$gris2:       rgba(255,255,255,.8);
$gris3:       rgba(204,204,204,1);
$padding:     20px 10px;

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/*LEAF LET*/
.map {
  height: 420px;
}

body {
  margin: 0px auto;
  width: 640px;
  background: $noir;
  color: $blanc;
  font-size: 1em;
  padding: $padding;
}

main {
  padding: $padding;
  background: $noirfonce;
}

a {
  color: $rose;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

a:hover,a:active {
  color: $blanc;
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 1.4em;
  color: $bleu;
}

h2 {
  margin-top: 15px;
  width: 100%;
  color: $rose;
}

h3 {
  display: inline-block;
  color: $rose;
  text-transform: uppercase;
  font-size: 2em;
}

h1,h2,h3 {
  font-family: 'Inconsolata', monospace;
}

p {
  opacity: .85;
  color: $noir;
  line-height: 1.6em;
}

img {
  margin-top: 20px;
  width: 100%;
  height: auto;
}

/*www.lintermediaire.be*/
View Compiled
$(document).ready(function() {
if($('.map').length>0) {
  /*MAP*/
  var map = L.map('map').setView([50.838378,4.3953359], 10);

L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Clients de lintermediaire.be',
    maxZoom: 16
  }).addTo(map);

  var LeafIcon = L.Icon.extend({
    options: {
      iconSize:     [48, 48],
      shadowSize:   [0, 0],
      iconAnchor:   [24, 24],
      shadowAnchor: [4, 62],
      popupAnchor:  [0,-48],
      iconUrl: 'https://lintermediaire.be/wp-content/uploads/2019/02/map-marker.png'
    }
  });

  var greenIcon = new LeafIcon(),
  redIcon = new LeafIcon(),
  orangeIcon = new LeafIcon();

  L.icon = function (options) {
    return new L.Icon(options);
  };

  $('.map_meta').each(function(index,element) {
    var lat = $(this).children('.map_meta_items[data-lat]').text();
    var lg = $(this).children('.map_meta_items[data-lg]').text();
    var client = $(this).children('.map_meta_items[data-client]').text();
    var titre = $(this).children('.map_meta_items[data-titre]').text();
    var link = $(this).children('.map_meta_items[data-link]').text();

    addresses = [{
      'location': [lat,lg],
      'client': client,
      'titre': titre,
      'link': link,
    }];

    for (pint of addresses) {
      var contentString = '<div class="map_content">'
      +'<h3 class="map_title">'
      +pint.client
      +'</h3>'
      +'<br><br><strong class="map_category">Projet :</strong> '+'<p class="map_text">'+pint.titre+'</p>'
      +'</p><p class="flex-center">'
      +'<a class="btn" href="'
      +pint.link
      +'">Plus d\'infos</a></p>'
      + '</div>';

      L.marker(pint.location, {icon: new LeafIcon()}).addTo(map).bindPopup(contentString);
    }

  });
}
});

External CSS

  1. https://unpkg.com/leaflet@1.6.0/dist/leaflet.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://unpkg.com/leaflet@1.6.0/dist/leaflet.js