| license: mit |
An example of a leaflet.js map with multiple markers added.
This is provided in conjunction with the explanation of the code given in the book "Leaflet Tips and Tricks".
forked from d3noob's block: Add multiple markers in leaflet.js
forked from renauld94's block: Add multiple markers in leaflet.js
| <!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 pharma = [ | |
| ["2018",-40.99497,174.50808], | |
| ["covered",-41.30269,173.63696], | |
| ["covered",-41.49413,173.5421], | |
| ["covered",-40.98585,174.50659], | |
| ["Never covered",-40.93163,173.81726], | |
| ["Never covered",-41.5183,174.78081], | |
| ["Never covered",-41.42079,173.5783], | |
| ["2018",-42.08414,173.96632], | |
| ["2018",-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: '© ' + mapLink + ' Contributors', | |
| maxZoom: 18, | |
| }).addTo(map); | |
| for (var i = 0; i < pharma.length; i++) { | |
| marker = new L.marker([pharma[i][1],pharma[i][2]]) | |
| .bindPopup(pharma[i][0]) | |
| .addTo(map); | |
| } | |
| </script> | |
| </body> | |
| </html> |