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).
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:
http://www.gisdoctor.com/presidents.html
Happy presidential mapping!