justinmanley/Leaflet.Illustrate

Preserve shape while zooming

ihevcuk opened this issue · 6 comments

While zooming, shape will always stay with same dimensions. You can try it on demo:

  • draw line
  • zoom out to the biggest value

Line won't became smaller and you can see in from largest zoom. Do you have an idea how to fix it?

That is the purpose of the lines provided by Leaflet.Illustrate, called pointers (see L.Illustrate.Pointer). Pointers retain fixed dimensions regardless of the zoom level.

If you want a line that will be fixed with respect to the map, rather than the window, you should use a polyline.

Thanks for quick reply.

What about Textbox? Is there a way to change that?

Can you clarify your question? What are you asking about textboxes?

Textboxes behaves the same as lines... If you draw textbox and then zoom out, textbox will be fixed with respect to the window. I need a textbox that is fixed with respect to the map.

Is there a way to do that or I need to hide textbox if zoom is changed?

Ah, I see.

No, that's not possible at the moment. I had imagined writing a bit of extra code linking each textbox to a specific zoom level, and then limiting textboxes to be visible only within n zoom levels of the original zoom level, for some reasonable n.

Text that changes size based on the zoom level is going to behave much more like a map label. One might modify L.Illustrate.Textbox to accommodate this kind of behavior by tweaking the contents of the CSS transform property to include a scaling factor based on the zoom level (see the call to setTransform in L.RotatableMarker.js and its definition in setTransform.js).

Take a look at the source code for Path.SVG.js in the Leaflet core library to see how scaling during zooming is implemented for paths - the implementation will likely be similar for textboxes.

Alternatively, the text might display more neatly if you scale the font size and the dimensions of the textbox, rather than brute-force dilating and shrinking the textbox via CSS transform: scale. This method would require more careful calibration.

Note that the text functionality described is part of issue #6 outlining proposed improvements for v0.0.3, if I read correctly. :-)