duplicate layer/ show permanantly on click

Question

I'm starting to learn how to use leaflet. I'm trying to create a map with markers. If you hover them they should display a route. if the mouse leaves the marker the route should be deleted. (This part works) When you click on the marker the route should stay on the map even when the mouse leaves the marker. Therefore I would need to duplicate the route layer so that it doesn't get deleted when the mouse leaves the marker. Or there is a better method that I don't know.

function Route() {
  DirectionsLayerLong = omnivore.gpx('GPX/ Route_long.gpx');
  DirectionsLayerLong.on('ready', function() {
    this.setStyle(style_long);
  });
  DirectionsLayerShort = omnivore.gpx('GPX/Route_short.gpx');
  DirectionsLayerShort.on('ready', function() {
    this.setStyle(style_short);
  });
  return DirectionsLayer = L.featureGroup([DirectionsLayerLong, DirectionsLayerShort]);
};
var Marker = L.marker([50, -100], {
  icon: iconfu
}).addTo(map);
Marker.on('mouseover', function(e) {
  Route();
  DirectionsLayer.addTo(map);
});
Marker.on('mouseout', function(e) {
  DirectionsLayer.remove()
});
Marker.on('click', function(e) {
  DirectionsPermaLayer.remove();
  Route();
  DirectionsPermaLayer = DirectionsLayer;
  DirectionsPermaLayer.addTo(map);
});

I could simply use omnivore with another variable but I'd like to reuse the function.

score 3 · Accepted Answer · edited May 23 '17 at 11:46

The simplest solution is just to remove the mouseout event listener when you click on the marker:

Marker.on('click', function(e) {
  Marker.off('mouseout');
});

Cloning your route layer would be a little more complicated (not to mention unnecessary, if removing the event listener solves your problem), but it's worth exploring how one might do that. First of all, a concise explanation of why you can't just create a copy using DirectionsPermaLayer = DirectionsLayer can be found on w3schools:

Objects are mutable: They are addressed by reference, not by value.

If y is an object, the following statement will not create a copy of y:
var x = y;  // This will not create a copy of y.
The object x is not a copy of y. It is y. Both x and y points to the same object.

Any changes to y will also change x, because x and y are the same object.

There are many ways to go about cloning an object in Javascript, but I suspect that most of these will not work for cloning leaflet layers, as all Leaflet's internal ids will be copied along with the object, causing unpredictable behavior. The best strategy would probably be to convert DirectionsLayerShort and DirectionsLayerLong to GeoJSON using the .toGeoJSON method, then read them back in using L.geoJson:

var Short2 = L.geoJson(DirectionsLayerShort.toGeoJSON()).setStyle(style_short);
var Long2 = L.geoJson(DirectionsLayerLong.toGeoJSON()).setStyle(style_long);
var Directions2 = L.featureGroup([Long2, Short2]).addTo(map);

This could require a little refactoring of your code, but it should do the job.

thanks for your answer. I just learned how to deactivate a event listener. But this would cause problems. What i didn't mention is that i have multiple markers an the hover functionality should be available even after I clicked the first marker. Every time you click one marker it highlights this rout permanently until you click the next marker. During this time you can still hover over the other markers and see these routes. — Hedaja, Mar 29 '16 at 15:18
I rewrote me code a little and use your idea for duplicating now. Thanks again. — Hedaja, Mar 30 '16 at 18:35

duplicate layer/ show permanantly on click

1 Answers1