18

I want to add multiple markers to my map to pinpoint the following coordinate.

  1. 11.8166° N, 122.0942° E
  2. 11.9804° N, 121.9189° E
  3. 10.7202° N, 122.5621° E
  4. 11.3889° N, 122.6277° E
  5. 10.5929° N, 122.6325° E
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Carl Angelo Nievarez
  • 573
  • 1
  • 11
  • 33
  • 2
    This might help: http://stackoverflow.com/questions/17371039/how-to-add-markers-bulk-in-leaflet – Rajesh Mar 23 '17 at 05:55

1 Answers1

53

you can do something like this:

Hope it helps :)

var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

var map = L.map('map').setView([11.206051, 122.447886], 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 < locations.length; i++) {
  marker = new L.marker([locations[i][1], locations[i][2]])
    .bindPopup(locations[i][0])
    .addTo(map);
}
#map {
  width: 600px;
  height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<div id='map'></div>
Svinjica
  • 2,389
  • 2
  • 37
  • 66
  • 3
    I have 30k marker locations and when am plotting it like you have specified the page gets unresponsive do you have any solution – sainanky Oct 24 '17 at 13:27
  • 3
    @AnkitKumar you need to ask a question then we will see what can we do about it :) – Svinjica Oct 24 '17 at 15:04
  • Thanks PennyLiu and Svinjica, saved my day! – boldnik Feb 12 '21 at 16:35
  • 2
    I think using the `new` keyword is redundant since L.marker is a [factory method](https://en.wikipedia.org/wiki/Factory_method_pattern), see the documentation: https://leafletjs.com/reference.html#marker-l-marker – Akronix Feb 17 '23 at 12:47
  • @Akronix , TypeScript also complains about using `new` here: "'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009)". :) – ScriptyChris Apr 29 '23 at 12:30