mouseover event

[smitchell]

I'm not having any luck adding a mouseover event to L.hotline:

            this.hotlineLayer = L.hotline(data, options).addTo(this.map);
            this.hotlineLayer.on('mouseover', function (event) {
                var layer = event.target;
                console.log(layer.style.color); // just testing the mouseover call
            });

You can see in my demo, http://exploringspatial.com/#demo/10, that I am able to move a bullseye icon along the L.hotline when the user hovers over the Highcharts elevation chart. Now I need to do the reverse, highlighting points on the elevation chart when the user hovers the L.hotline.

How do I implement mouseover and mouseout with L.hotline?

Also, while we sort this out, I was going to added Leaflet Labels when hovering over the elevation chart. When I tried the preliminary branch of Leaflet Labels, https://github.com/Leaflet/Leaflet.label/issues/121, it said that L.hotline was not defined. Once I removed Leaflet Labels hotline started working again.

[klaftertief]

Do you see the console.log() output at all? I believe Leaflet had a regression in one of the betas with Events on Canvas layers.

The code above should work and

hotlineLayer.on('mouseover', function(e) {
    console.log(e.latlng);
});

gives you the LatLng. But this LatLng is not one of the source values and does not contain the z value. It's the LatLng of the point where the mouse entered the path, and this is interpolated. So you'd have to take this point and find the closest point in your list source points to get the data you need. I believe this should not be part of this plugin but should be implemented in the user code.

I was able to bind a Leaflet.label label to a hotline layer. I built the leaflet-master branch of the plugin and added the generated script just with a script tag. Did you also build this branch of the label plugin? Maybe it's an issue with requiring the plugin as AMD modules, like you do on you site? Maybe you just have to change the dependencies there?

Hope this helps and thanks for your interest.

[smitchell]

Thank you for the quick response. Leaflet Hotline is a really nice Leaflet plugin. I've pushed your recommendation out to http://exploringspatial.com/#demo/10, but there is nothing in the log. It feels like a z-index issue. Over the next couple of days I'll get something put together on JsFiddle and we can see if that versions works okay. My demo page is very busy, so I can certainly imagine another div interfering somehow.

[smitchell]

I've built a demo on JSFiddle for you: https://jsfiddle.net/stevecmitchell/m18z71gc/. The mouseover events are not getting logged. Is that a bug, or is that something that I have done wrong?

I build a second demo using the same version of Leaflet 1.0 Beta 2 and the same data, but uses a normal polyline instead. It works normally: https://jsfiddle.net/stevecmitchell/mLvjx8g5/.

[klaftertief]

I swapped out the Beta 2 with the Beta 1 and the mouseover events worked then.

For a proper comparison you have to use a canvas renderer for the normal polyline. Leaflet.Hotline does this internally. You can switch to canvas renderers globally or just set it in the options of the polyline instance

[smitchell]

Thanks for all your help. I switched my polyline on JSFiddle to use L.canvas and Leaflet 1.0 Beta 2 and it still works (http://jsfiddle.net/stevecmitchell/mLvjx8g5/). Next, I switched the Hotline code to use Leaflet 1.0 Beta 1, and mouseover works now (http://jsfiddle.net/stevecmitchell/m18z71gc/). I rolled my demo site back to Leaflet 1.0 Beta 1, but that did not fix the mouseover on my Hotline demo there (http://exploringspatial.com/#demo/10). I'm going to table that issue for now since it works fine on JSFiddle. I've got to move on to Demo 11 now, a map editor, since the project that needs that is on deck. I'll revisit Leaflet Hotline soon. Several people that I've shown it to are very excited about what we can do with it. When I get free cycles I'll figure out why mouseover is not working on Demo 10.