SiteWebAstrolabe/src/_includes/partials/components/map.njk

<div class="[ wrapper ]">
  <h2 class="mt-5 mb-2">Où sommes-nous ?</h2>
</div>
<div id = "map" style = "width: 100%; height: 500px; margin-bottom: 8rem;"></div>
<script type="text/javascript" src="/vendor/js/leaflet.js"></script>
<script>
  // Creating map options
  var mapOptions = {
    center: [48.10494125597395, -1.6795760019626425],
    zoom: 15
  }
  
  // Creating a map object
  var map = new L.map('map', mapOptions);

  var iconMarker = L.icon({
    iconUrl: '/images/marker-stroke.svg',
    iconSize: [28, 40],
    iconAnchor: [14, 40],
    popupAnchor: [0, -40]
  });

  var iconMarkerAlt = L.icon({
    iconUrl: '/images/marker-logo-alt.svg',
    iconSize: [40, 40],
    iconAnchor: [20, 40],
    popupAnchor: [0, -40]
  });

  var members = {{ collections.membersLocations | dump | safe }};

  var markerGroup = members.map( member => {
    return new L.marker(member.location, {icon: iconMarker}).bindPopup('<a href="'+member.url+'">'+member.name+'</a>');
  });

  var markerSiege = L.marker([48.10494125597395, -1.6795760019626425], {icon: iconMarkerAlt}).bindPopup('Siège Astrolabe CAE')
  .openPopup();

  markerGroup.push(markerSiege)

  var featureGroup = L.featureGroup(markerGroup).addTo(map);

  map.fitBounds(featureGroup.getBounds());

  // Creating a Layer object
  var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
  
  // Adding layer to the map
  map.addLayer(layer);
</script>