CODEWITHSUNDEEP
javascriptmapsleaflet
DSofa
DSofa

Reputation: 564

Using Leaflet, how to get polyline popup coordinates and add it to the popup content

I'm using Leaflet library for maps and I run into a small problem:

I have simple non-geographical map and with a simple line connecting two coordinates. When someone clicks anywhere on the line, a Popup opens up. I am trying to display the coordinates of the clicked spot in the popup itself.

I tried doing something like this, but I'm always getting undefined error.

L.polyline([xy([296.4, -235.1]), xy([1426.3, 100.3])], {color: 'red'}).bindPopup('Coordinates: ' + L.getPopup.getLatLng).addTo(myLayerGroup);

I understand that I'm supposed to call the getLatLng() method on the popup itself, but how do I do that exactly? How to reference the popup itself since I never defined it as a separate variable? I'm having hundreds of lines on my map so declaring each line and popup as a separate variable is not really the optimal solution.

Upvotes: 2

Views: 11247

Answers (2)

DSofa
DSofa

Reputation: 564

So I needed a way to get coordinates of the popup which appears above polylines and display it in the popup itself. Here is my solution, for someone finding this problem in future.

Heres the premise. I wanted to display city markers and polyline routes on the map at the same time. Easiest way would be to add them both to the same feature group called cities and just simply display it on map. This of course works, but catching popups on cities group to change them would result in changing popups from both markers and polylines. I didn't want to do that. I only wanted to change popups from polylines.

The solution was to separate city markers and polyline routes into two groups, cities and cityRoutes. Add cityRoutes to cities to display them both on map at the same time, but in addition add cityRoutes to polylines as well. This time I could catch the popup open event from the group polylines and change the popup content of polyline, but keep the city markers popups unchanged.

var polylines = new L.FeatureGroup(); // Declare a group in which to store all polylines.
var cities = new L.FeatureGroup(); // Declare a group in which to store all cities.
var cityRoutes = new L.FeatureGroup(); // Declare a group in which to store all city routes.
cityRoutes.addTo(cities);
cityRoutes.addTo(polylines);

// Add a couple of markers
L.marker([-229.0, -267.8]).bindPopup('City 1').addTo(cities);
L.marker([229.0, -67.8]).bindPopup('City 2').addTo(cities);

// Add a route
L.polyline([-229.0, -267.8], [229.0, -67.8]).bindPopup('Route 1').addTo(cityRoutes);

// Catch event when popup opens above polyline and add its coordinates to its content
polylines.on('popupopen', function (e) {
    var popup = e.popup;
    popup.setContent('Coordinates: ' +  popup.getLatLng().lng + ' / ' + popup.getLatLng().lat);
});

Now of course, I could have just caught popup events on cityRoutes and it would be a shorter solution in this simple example, but in my case, I had multiple route groups like islandRoutes, cityRoutes, shipRoutes etc. This means I would have had to catch the popup event above each route separately. That adds much of redundant code. Easier solution was to just add all the routes to the third feature group called polylines and catch the events on that group.

Upvotes: 6

iH8
iH8

Reputation: 28668

If you take a look at the popup methods for L.Layer you'll see that it has a getPopup method:

Returns the popup bound to this layer.

http://leafletjs.com/reference-1.1.0.html#layer-getpopup

Mind you can only use the getLatLng method when the popup is opened so you'll need to set the content on the popupopen event of L.Map:

var polyline = new L.Polyline([[0, -25],[0, 25]]).bindPopup('...').addTo(map);

map.on('popupopen', function () {
    var popup = polyline.getPopup();
    // do stuff
});

Because of that you might as well use the popup reference that's included in the popupopen event object:

map.on('popupopen', function (e) {
    var popup = e.popup;
    // do stuff
});

Upvotes: 3

Related Questions