Saturday, 22 February 2014

Adding multiple markers to a leaflet.js map

The following post is a portion of the Leaflet Tips and Tricks book which is free to download. To use this post in context, consider it with the others in this blog or just download the the book as a pdf / epub or mobi .
----------------------------------------------------------

Adding multiple markers to our map

At some stage we will most likely want to add multiple markers to our map to pinpoint several things. While we could do this one by one following the previous example, we could also do it programmatically with an array of data.
The following is the full code to show multiple markers on a map;
<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
</head>
<body>

    <div id="map" style="width: 600px; height: 400px"></div>

    <script
        src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>

    <script>

 var planes = [
  ["7C6B07",-40.99497,174.50808],
  ["7C6B38",-41.30269,173.63696],
  ["7C6CA1",-41.49413,173.5421],
  ["7C6CA2",-40.98585,174.50659],
  ["C81D9D",-40.93163,173.81726],
  ["C82009",-41.5183,174.78081],
  ["C82081",-41.42079,173.5783],
  ["C820AB",-42.08414,173.96632],
  ["C820B6",-41.51285,173.53274]
  ];

        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);

  for (var i = 0; i < planes.length; i++) {
   marker = new L.marker([planes[i][1],planes[i][2]])
    .bindPopup(planes[i][0])
    .addTo(map);
  }
               
    </script>
</body>
</html>
The full code of a live example of a map incorporating multiple markers is available online at bl.ocks.org orGitHub. A copy can also be downloaded (in a zip file) when you download the book from Leanpub. It’s called multiple-markers.html.
There are two differences between this code and the code to add a single marker. Firstly we have declared an array (planes) which has a range of values with each row including an identifier (the first column) and latitude and longitude values.
 var planes = [
  ["7C6B07",-40.99497,174.50808],
  ["7C6B38",-41.30269,173.63696],
  ["7C6CA1",-41.49413,173.5421],
  ["7C6CA2",-40.98585,174.50659],
  ["C81D9D",-40.93163,173.81726],
  ["C82009",-41.5183,174.78081],
  ["C82081",-41.42079,173.5783],
  ["C820AB",-42.08414,173.96632],
  ["C820B6",-41.51285,173.53274]
  ];
Secondly we include a for loop that contains our marker adding line.
  for (var i = 0; i < planes.length; i++) {
   marker = new L.marker([planes[i][1],planes[i][2]])
    .bindPopup(planes[i][0])
    .addTo(map);
  }
In the for loop we go from 0 to the end of the planes array (planes.length). For each row in our array, we add a marker where the latitude corresponds to planes[i][1] (in the planes array at row i and column 1 (remembering that the first column is 0)) and the longitude is planes[i][2]. We also add a popup to our marker with the identifier (planes[i][0]) before adding each marker to the map (.addTo(map)).
And here’s our map complete with markers…
Multiple markers on a map

The description above (and heaps of other stuff) is in the Leaflet Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).

at

No comments:

Post a Comment