Show me the map: http://users.leafletjs.com/
I have been working on a few projects lately using the excellent Leaflet JavaScript mapping library from Cloudmade. Leaflet is a relatively new project that has an active group of contributors, a loyal user base and has been generating a lot of buzz in the community.
Inspired by the Quantum GIS Community Map, I decided to hack together a site showing Leaflet users… on a Leaflet map of course. This project was to be my first GitHub Repository as well. I have been slowly learning Git, as GitHub has become the main version control platform for many popular open source projects. All the cool kids in the FOSS4G realm are embracing GitHub (Leaflet, OpenLayers, GeoExt) and if you want to keep up with these projects, you best create a GitHub account post haste!
I had a few prerequisites going in to this thing; it had to be lightweight and simple, reusable for future projects, and built on solid components that followed similar principles. Initially, I settled on the following architecture:
The logic is quite simple since we are only dealing with points.
Insert New User:
The user visits the map, which initially zooms to fit the extent of all the existing markers. They zoom into their local area (or use Leaflet’s built-in browser geolocation function), click to drop a marker on the map, and fill in a short form (which captures the lat/lon of the click event in hidden fields). This info then gets inserted into the SQLite database of users via a simple little PHP script.
Drop Existing User:
I did want to include some mechanism to allow users to edit their information, but I didn’t want to bother with a system for authentication, usernames, passwords, etc, etc. The application does not collect any sensitive data (other than emails), so I just generate a random 6 digit token that gets inserted with the user’s info and emailed to them upon insertion. To “edit” your info, you simply remove your marker by passing your email and token to another simple little PHP delete script and adding a new marker with your updated info.
Map Users:
The markers are loaded from the database by a PHP script that fetches the data as an associative array and echoes out JSON. This JSON data gets parsed with jQuery’s $.getJSON function and a for loop is used to add the markers to a Leaflet FeatureGroup. Nothing to it but to do it!
UI Overhaul:
After the initial release of the site, I received some great feedback and decided to overhaul the user interface to support a better range of browsers and screen resolutions. I scrapped jQuery UI and went with the Twitter Bootstrap library. The Bootstrap interface and navbar may see familiar as this toolset has become super popular in recent months (notice my website redesign).
Current version: http://users.leafletjs.com VS Original version: http://users.leafletjs.com/V1.html
Let me know what you think and if you use Leaflet, I encourage you to join the Leaflet Users Map!