Affichage de multiples Markers en OSM

19 Juil Affichage de multiples Markers en OSM

Posted at 00:11h in Divers, PHP by
1 Like

Voici un exemple d’une page html qui contient un multiple Markers pour une Map Open Street Map

<!DOCTYPE html>
<html>
<head>
   <title>Simple Leaflet Map</title>
   <meta charset="utf-8" />
   <link  rel="stylesheet"  href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
</head>
<body>
   <div id="map" style="width: 600px; height: 400px"></div>
   <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
   <script>
    var planes = [
        ["7C6B07",-40.99497,174.50808],
        ["7C6B38",-41.30269,173.63696]
        ];
       var map = L.map('map').setView([-41.3058, 174.82082], 8);
       mapLink =
           '<a href="http://openstreetmap.org">OpenStreetMap</a>';
       L.tileLayer(
           'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           attribution: '&copy; ' + mapLink + ' Contributors',
           maxZoom: 18,
           }).addTo(map);

       var firefoxIcon = L.icon({
           iconUrl: 'http://joshuafrazier.info/images/firefox.svg',
           iconSize: [38, 95],
       });
        for (var i = 0; i < planes.length; i++) {
            marker = new L.marker([planes[i][1],planes[i][2]], {icon: firefoxIcon})
                .bindPopup(planes[i][0])
                .addTo(map);
        }       
   </script>
</body>
</html>
  • Vous pouvez enregistrer ce fichier en index.html
  • Vous avez la possibilité de changer l’icône aussi du Marker, on changent le lien dans la partie iconUrl.
  • Les emplacements est dans la partie planes.
Tags:
, , , , ,