Optimal page layout with Leaflet

Question

This is somewhat of a broad question. I'm basically looking for the best or easiest way to control the layout of a page with a Leaflet map. Say I want the map to be located on the right side of the screen, mobile friendly and resize responsively. I've been playing around with Leaflet for a little while and haven't found a convenient way to control the maps location and size on the page. Am I better off with traditional CSS or maybe something like Bootstrap? Could there be a plug-in I've overlooked?

Like I said, it's a broad question. Not looking for specifics. Just a sense of direction, so I don't run down unnecessary rabbit holes.

Answer 1

The Leaflet framework can only be used to control the map itself and its controls (like zoom, search, etc.), not the rest of the webpage.

Therefore the map itself has to be inside a normal div element. To change the size or position of this div element you can use plain CSS/HTML or any frontend framework (e.g. bootstrap) you like.

Answer 2

Some times ago I developed a general responsive framework for my webmaps. It is based on Bootstrap and jQuery. You can find it here: https://github.com/nobohan/responsive-webmap

The features of this framework are:

• the map is taking 100% of the page width,
• the whole page takes 100% of the height, no vertical scrollbar,
• there is one collapsible panel on the left,
• there is one navbar,
• this is "responsive", meaning that some elements change between small-scale and large-scale devices.

You can see it in action here.

Note that it was developed for OpenLayers 3 but you can easily move to Leaflet. Actually I have a LeafletJS-based project built on the same framework here.

It can surely be improved. I'd be happy to get some feedback.