Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mouseover event #4

Open
smitchell opened this issue Dec 20, 2015 · 5 comments
Open

mouseover event #4

smitchell opened this issue Dec 20, 2015 · 5 comments

Comments

@smitchell
Copy link

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, Leaflet/Leaflet.label#121, it said that L.hotline was not defined. Once I removed Leaflet Labels hotline started working again.

@klaftertief
Copy link
Contributor

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
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants