LeafShoot

A responsive Leaflet map template using Bootstrap

| View Map

---

No need to set a defined height on the map container!

Before using Leaflet you had to have a hard-coded height value in order for the map to render, as seen below:

Make sure the map container has a defined height, for example by setting it in CSS:

#mapid { height: 180px; }

Now you can use percentages and the map will render!

#mapid { height: 100%; }

Built With

• Leaflet - an open-source JavaScript library for mobile-friendly interactive maps
• BootStrap - The web framework used

Author

• tforward - Initial work

Acknowledgements

• StackExchange @Calvin: Sizing Leaflet Map inside bootstrap

Other

• Why is it called LeafShoot?

Desired a name that encapsulates both Leaflet and BootStrap in one. A leaf shoot in reality is the bud of a tea leaf before it opens from its natural curled up form, which makes a good fit for the name.