I'm using leaflet.js to create a map of Scotland, with two insets for the Orkney and Shetland groups of islands. This is as far as I've got.

enter image description here

I wish to guarantte that no matter what size the overall map is created, only the portions of the map set using fitBounds() ever show, and that the size of the insets scale inline with the main div.

This however is trickier than I thought. If I make the parent div narrower, when leaflet draws the main map, it's not making the height any shorter, it's maintaining the aspect ration by reducing the scaling over all, so that the islands in the insets are showing on the main map.

Also I wanted to guarantee that the scale of the two insets is the same as the main div, but at the moment I'm using ems in order to have the map scale well on a tablet / mobile phone.

Not sure if the solution lies in the CSS of the divs or something else.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.