<h2>Où sommes-nous ?</h2>
<div id = "map" style = "width: 100%; height: 500px"></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.svg',
      iconSize: [28, 40],
      iconAnchor: [14, 40],
      popupAnchor: [0, -40]
    });

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


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

    var markerNaega = L.marker([43.610632310943636, 3.873482372219893], {icon: iconMarker}).bindPopup('Naega')
    .openPopup();

    var markerGroup = L.featureGroup([markerSiege, markerNaega]).addTo(map);

    map.fitBounds(markerGroup.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>