Friday, March 20, 2015

Another neat Leaflet control: L.Control.BoxZoom

Yesterday,  I was also asked by a client to create a box-zoom tool. Their end users don't know about using the Shift key, and at any rate they prefer the visual aesthetic of a visible, clickable button to make a one-time box zoom.

I was quite surprised to find no ready-to-deploy ones. And I was pleased with Leaflet for making subclassing L.Control so darn easy! About 90 minutes later, I had this:

Not a lot to say about it. It's a single button, clicking it will let you perform a box zoom one time, at which time the control will turn itself off again.

Cosmetically, you could configure the HTML a bit. The default one on Github, simply uses a background-image and a included SVG icon. The live, deployed one for this client uses a FontAwesome <i> tag, and your own could use Twitter Bootstrap icons or whatnot.


No comments:

Post a Comment