CODEWITHSUNDEEP
javascriptleaflet
Dimitris
Dimitris

Reputation: 2036

Get coordinates for multiple points automatically in Leafletjs

I have created a fictional map using MapTiler and Leafletjs which contains hundreds of points that I want to reference from my code. I created a reference marker in Leafletjs which I can drag to a specific location on my map and get the pixel coordinates.

I now need to do the same for all these hundreds of points in order to generate a key/value pair of [location_name as key, coordinates as value]. If I do that manually it will probably take me weeks.

Is there an automated approach that I could follow in Leaflet that will allow me to retrieve the coordinates easier? The map was originally a vector image which I converted to png and then using MapTiler to all the different sizes Leafletjs needs.

The code below shows how the reference marker works:

var map = L.map('map').setView([60, 0], 0);

    L.tileLayer('{z}/{x}/{y}.png', {
      maxZoom: 5,
      minZoom: 1,
      continuousWorld: false,
      noWrap: true,
      crs: L.CRS.Simple
    }).addTo(map);

    var marker = L.marker([70, 0], {
      draggable: true,  
    }).addTo(map);
    marker.bindPopup('<b>Test</b>').openPopup();

    marker.on('dragend', function(e) {
      alert(marker.getLatLng().toString()); 
    });

Upvotes: 2

Views: 512

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

A better workflow would be something like:

  • Add a click event handler in the map, so that new markers can be created
  • Add those newly created markers to a globally accesible array
  • Make all markers draggable
  • Add a button outside of the map, which can console.log() all the markers at once (then copy-paste)

Without knowing the original format of the data, it's difficult to see if the data could be converted automatically, but making a quick tool to ease the pain of locating a few hundred points is doable.

Upvotes: 1

Related Questions