New Leaflet+Bootstrap Template on Github

After my Quality of Life Dashboard project (which is still glacially inching towards the finish line), I decided I have mad love for (a) Leaflet and (b) Bootstrap. I tossed together a template I can use to quick-start new projects, and then I thought somebody else might find it useful. So…

leaflet-bootstrap-mapping-template

Ta-dah.

I started out with a Bootstrap/Modernizr/HTML5 Boilerplate combo from Initializr. After that there’s only ~150 lines of Javascript for the page, setting up the map, autocomplete, adding a popup and marker, etc. (about half that code is for the autocomplete – I’m going to move it from jQuery UI to Bootstrap when I get some time to figure it out). There are only 70 lines of custom CSS to handle any styling not covered by Bootstrap. So what you get is:

  • Fully functioning map via Leaflet with marker/popup.
  • Autocomplete search (you’ll have to give this an enema for your stuff).
  • Responsive design - scales from a phone to a desktop, including a button-ized header.
  • Good print styling.
  • Light-weight (at least for one of my apps).
  • Clean/little code, which makes it easier to grok and throw at different tasks.

It’s part of my move away from hey-look-I’m-just-like-ArcMap apps to better design and usability. MIT licensed, so use it however you wish, and as always, patches are most welcome.