R: [Leaflet] Re: Canvas Interaction

[Diego Guidi]

afaik to a canvas element can be attached mouse events like onmouseover and stuff, so looks a not so hard thing to do, right?

Inviata dal mio Windows Phone

---

Da: Jack Michel
Inviato: 09/07/2012 00:39
A: leafl...@googlegroups.com
Oggetto: [Leaflet] Re: Canvas Interaction

Bryan, did you figure something out how to make canvas elements "clickable" and show their "feature properties" in a popup?

Thanks,
Jack

Am Sonntag, 12. Februar 2012 18:38:03 UTC+1 schrieb Bryan McBride:

I'm working with this TileJSON canvas extension https://gist.github.com/1716010
and am wondering if there is any way to add interactions to canvas
elements. I know L.TileLayer.Canvas is listed as a raster type, but if
they are created from GeoJSON is it possible to capture the feature
properties and add popup or hover functionality? Here is an example
that shows TileJSON and switches to vectors when zoomed in past level
10:  http://t.co/hXaxzDMy. This works great, but I'm curious about
canvas popups. Thanks for any advice or suggestions!

[Jack Michel]

Well, there is already a good example in leaflet git repo which doing exactly that requested feature: https://github.com/CloudMade/Leaflet/blob/master/debug/vector/feature-group-bounds.html
To render that as canvas, add...

    <script>
        L_PREFER_CANVAS = true;
    </script>

The onclick event works excellent, the only thing which is to do now, is to change mouse pointer (to "hand") when hovering. I tried to attach a leaflet mouse-event to the geojson layer like described at [1], but the mouse pointer still stays as pointer.
My second approach was to add the jquery command...

$(this).css('cursor','hand');

..to the onEachFeature section at the geojson-layer definition. This also doesn't work.
Has someone an idea to change the mousepointer to "hand"? Thanks.

[1] http://leaflet.cloudmade.com/reference.html#events

[Vladimir Agafonkin]

The problem with canvas is that it can't detect mouse events on individual features (like SVG), only on the whole canvas area. The way Leaflet handles clicks is by running geometric algorithms of a clicked point against all of the features — e.g. ray casting detection for polygons and distance from point to segments for polylines. Mouseovers/outs are more complicated because you need to do such checks on EVERY mousemove event, not just once as for click, so it's computationally expensive to track. That's why I postponed implementation of this. But I may try implementing it in near future and see how it performs.

вторник, 10 июля 2012 г., 18:12:53 UTC+3 пользователь Jack Michel написал:

[Ben Boughton]

Was progress ever made on this? I'd love the be able to interact with features on canvas tiles on such an example: http://bl.ocks.org/Sumbera/c67e5551b21c68dc8299

[gis....@gmail.com]

Have you checked out Leaflet.MapboxVectorTile - http://spatialserver.github.io/Leaflet.MapboxVectorTile/examples/basic.html

Also, you could use leaflet-pip to handle click events for polygons to use along with the canvas layer. See my parcel viewer app as an example - https://github.com/ovrdc/parcel-viewer

[Ben Boughton]

Great suggestions thanks. Your parcel viewer app is top notch.

Sent from Outlook Mobile

Da: Jack Michel

Inviato: 09/07/2012 00:39
A: leafl...@googlegroups.com
Oggetto: [Leaflet] Re: Canvas Interaction

Bryan, did you figure something out how to make canvas elements "clickable" and show their "feature properties" in a popup?

Thanks,
Jack

Am Sonntag, 12. Februar 2012 18:38:03 UTC+1 schrieb Bryan McBride:

I'm working with this TileJSON canvas extension https://gist.github.com/1716010
and am wondering if there is any way to add interactions to canvas
elements. I know L.TileLayer.Canvas is listed as a raster type, but if
they are created from GeoJSON is it possible to capture the feature
properties and add popup or hover functionality? Here is an example
that shows TileJSON and switches to vectors when zoomed in past level
10:   http://t.co/hXaxzDMy. This works great, but I'm curious about
canvas popups. Thanks for any advice or suggestions!

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/nLQo59XYveE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.