Leaflet marker array

Define an array with coordinates and popup content text, and then loop through to add them to the map as markers

<html>
<head>
   <title>Leaflet marker array example</title>
   
   <link rel="stylesheet" href="leaflet/leaflet.css" />
   
   
   <script src="leaflet/leaflet.js"></script>
   
   <script language="javascript">
      function init() {
         var map = new L.Map('map');                       
                
      	 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

var london = new L.LatLng(51.5056,-0.1213); 
         map.setView(london, 13);
         
         // Define an array. This could be done in a seperate js file.
         // This tidy formatted section could even be generated by a server-side script
         // or fetched seperately as a jsonp request.
         var markers = [
            [ -0.1244324, 51.5006728, "Big Ben" ],
            [ -0.119623, 51.503308, "London Eye" ],
            [ -0.1279688, 51.5077286, "Nelson's Column<br><a href=\"https://en.wikipedia.org/wiki/Nelson's_Column\">wp</a>" ] 
         ];
         
         //Loop through the markers array
         for (var i=0; i<markers.length; i++) {
           
            var lon = markers[i][0];
            var lat = markers[i][1];
            var popupText = markers[i][2];
            
             var markerLocation = new L.LatLng(lat, lon);
             var marker = new L.Marker(markerLocation);
             map.addLayer(marker);
         
             marker.bindPopup(popupText);
         
         }

}
   </script>
   
</head>
<body onLoad="javascript:init();">
   <div id="map" style="height: 200px"></div>
   
</body>                                                                                                                          
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

Leaflet marker array