Position custom canvas layer on Leaflet map

Vote count:

0

I'm implementing a custom Leaflet layer that's just a large canvas overlay sitting on the map. Leaflet already pans the layer correctly, but the combination of pan/zoom causes the layer to de-sync from the map.

I need the layer to mirror panning and zooming as canvas geometric transforms (scale, translate) instead of storing/reprojecting/redrawing points. I don't want to introduce another level of complexity into the flow, so I want to use native Leaflet functions and math instead of relying on d3.behavior.zoom or d3.events (plus, trying to figure out how to translate d3 events/projections/transforms to Leaflet zooms/pans and vice-versa is a headache in itself).

My code is just the custom layer example code in the Leaflet docs, except with a canvas instead of a div, so I'm not using anything special (nor would I want to).

Related:

This works well for a static canvas, but fails when applied as a layer on top of a moving map: Zoom in on a point (using scale and translate)

Excellent, concise solution, but relies on d3 zooms/events: http://ift.tt/1DeZBO6

Anything found in a Google search for "canvas overlay leaflet": all of it requires the user to store and reproject points (semantic zooming).

asked 1 min ago

mike

8

Position custom canvas layer on Leaflet map