I have been learning how to use leaflet recently and have create a number of maps which have all been full screen maps. I would like to understand how I would place other features on a web page along side a leaflet map?

See the attached image, where:

  • Green is the Leaflet js map.
  • Red is a heading and some text.
  • Blue is an image.
  • You should post this on Stackoverflow and you will get an answer within minutes. Just tell them you want to divide your page into three divs. Then you can just add your map/heading & text/image to those divs :-) Jun 8, 2016 at 13:20
  • Agree with the other comments re html question, but have a look at some of the Leaflet examples on their pages - some of them have layouts like yours.
    – mlinth
    Jun 8, 2016 at 19:13

1 Answer 1


This is not a GIS question, but rather a HTML+CSS one. Start by reading https://developer.mozilla.org/en-US/Learn/CSS/CSS_layout/Positioning , then do a bit of research on positioning block-level elements relative to the viewport, including how to use the vw and vh units.

  • Just to add to this answer... it's helpful to understand that what goes on in leaflet is all happening via javascript inside that div that you set up with the id='map' (your green box). It's just another part of html layout with javascript making the user interaction happen.
    – Tangnar
    Jun 8, 2016 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.