javascript - Leaflet: add same layer to two different maps - Stack Overflow

admin管理员组

文章数量:1389750

I am displaying two different leaflet maps in the same page. After a certain event. I want a Polyline to appear on both of them. I would like to avoid, if possible, to create a copy and keep two different variables.

I am trying yo use the following:

var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
my_polyline.addTo(map2);

However, if I run the above code, the Polyline will be displayed only on the map2.

Afterwords, I will need to change again its coordinates to some new_line_coordinates, and I will run the following:

my_polyline.setLatLngs(new_line_coordinates);
my_polyline.redraw();

The polyline should now appear updated to the new coordinates. However, again, it appears only on map2.

What am I doing wrong? Is it possible to achieve what I am trying to do?

I am displaying two different leaflet maps in the same page. After a certain event. I want a Polyline to appear on both of them. I would like to avoid, if possible, to create a copy and keep two different variables.

I am trying yo use the following:

var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
my_polyline.addTo(map2);

However, if I run the above code, the Polyline will be displayed only on the map2.

Afterwords, I will need to change again its coordinates to some new_line_coordinates, and I will run the following:

my_polyline.setLatLngs(new_line_coordinates);
my_polyline.redraw();

The polyline should now appear updated to the new coordinates. However, again, it appears only on map2.

What am I doing wrong? Is it possible to achieve what I am trying to do?

• javascript
• google-maps
• maps
• leaflet
• mapbox

Share Improve this question Follow asked Aug 14, 2013 at 14:53 MarcoMarco 3,41155 gold badges2929 silver badges2929 bronze badges 3

• 2 Not possible to add the same object to two different maps. There is only one map property. – geocodezip Commented Aug 14, 2013 at 14:59
• 1 I think you should a create a "model", then two polygons being drawn and redrawn based on the data in this model. – L. Sanna Commented Aug 14, 2013 at 15:22
• @LSA What do you mean by model? Could you make a short example? – Marco Commented Aug 15, 2013 at 7:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

As geocodezip mentioned in a ment, adding a polyline to a map sets the polyline object's this._map instance variable. Therefore, there is no way to have the object rendered on both maps with the way in which it is currently implemented.

You can view the relevant source code here.

You can't add the same layer to multiple Leaflet maps. But I had a similar problem using a more plex GeoJSON layergroup and ultimately solved it by getting the GeoJSON object from the layer using toGeoJSON() and using it to create a new layer for the second map. For a simple polyline, you could use getLatLngs(). So:

var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var new_polyline = L.polyline(line_coordinates);
new_polyline.addTo(map2);

should work, as would:

var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var my_polyline_latlngs = my_polyline.getLatLngs();
var new_polyline = L.polyline(my_polyline_latlngs);
new_polyline.addTo(map2);

本文标签： javascriptLeaflet add same layer to two different mapsStack Overflow