Happy Presidents’ Day – Leaflet Edition!

I’ve been seeing a lot of Leaflet lately, whether it’s in my twitter stream, on Boston.com, or hearing others in the geo-community talk about enthusiastically.  So, on a snowy Sunday in Somerville, I decided to give a Leaflet a try.  To honor the 43 presidents (remember, Grover Cleveland was both the 22nd and 24th president) of the United States of America I put together a simple leaflet app of each president’s birthplace (according to Wikipedia).

Leaflet in Action
Leaflet in Action

I’ve built plenty of web mapping apps with Google and Esri APIs, but by no means am I an expert.  If you have ever built a web-map using either of those APIs you will be able to build and launch a web map with Leaflet, no problem.  More than likely, you will be able to create a web ready map more quickly with Leaflet as well (as was my experience).

The app I built adds a few markers with custom icons and modified popups.  I read in and customized a state boundary geojson file from a Leaflet tutorial to give the user some context of “where” at larger scales.  The background tiles are from CloudMade and are nice and fast.

I don’t think I configured the autopan for the popups correctly as it doesn’t work as I think it should.  More than likely I just don’t have the right settings configured.  If you see something in my jumbled (and undocumented) code leave a comment and I’ll make the necessary updates.  I would eventually like to add a drop shadow to the presidential seal icons and perhaps read the data directly from a PostGIS database, as opposed to creating static markers.

The Leaflet documentation was easy to understand and the samples provided enough guidance to get a map online that did what I wanted it to do.  I wish there were a few more samples available through the Leaflet tutorials section, but those will come as the user community grows.

Overall, my first experience with Leaflet was generally pleasant.  I know JavaScripting  but I am not an expert and I was able to get a map online pretty quickly.  I spent more time collecting and formatting the data than I did getting the map online.  That is a good thing.  I recommend to those who have programmed with the Google or Esri API to check Leaflet out.  Added bonus – free and open source.

The page I created is for demo purposes only.  I only tested this in Chrome and Firefox (sorry IE users).  If there is incorrect information in the map please let me know and I will update it accordingly.

Finally, here is the direct link to the app:


Happy presidential mapping!