How do I resize SVG images on a map as the zoom level changes?

1
votes

I'm using leaflet to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map.

I've looked online for examples, and the resources I've come across uses the geo functions from the d3.geo library. Whereas in my use case I'm using d3, leaflet, and an SVG layer over the map.

Is there a formula that I can apply to resize the objects correctly? I know that I will have to apply a translate function which will be based on the width height and current zoom level, but I was wondering if there is a standard way to do this?

EDIT: Here is one resource I found, but it uses the d3 geofunctions, and from what I can gather, it seems to redraw the polygons every time the map view is reset (which might be inefficient(?)

http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html

1
javascriptcssd3.jsleaflet
That example looks pretty good. Since scaling the SVG will trigger a repaint anyway, I don't think you can avoid redrawing the polygons every time the map is reset - aebabis

1 Answers

1
votes

Just apply CSS to change the size of the SVG or just modify the SVG using JS or what ever you use for SVGs every time the scroll event is triggered.

Google maps has an event in it's api which is triggered when the zoom level changes. https://developers.google.com/maps/documentation/javascript/events#EventProperties