The map is an important part of our project, action and process because it serves as the pivot point of navigation. I will quickly talk about the data and tools before we discuss the design aspects.
We have a fairly large dataset of schools in Karnataka. The name of the school, location, number of girls and boys etc. in a database. Fortunately, the data was clean and properly stored in a PostgreSQL database with PostGIS extensions. Most of my task was to modify the API to throw GeoJSON to the client using the ST_AsGeoJSON function and export the data.
Leaflet.js by default supports Cloudmade’s awesome map tiles. The Open MapQuest project also provides beautiful tiles, which are now used at OpenStreetMap.org. To use these tiles all you have to do is to change the map preamble as follows.
With Arky I was creating a map of the Mozilla l10n teams world wide and decided to use Leaflet.js. He send across a CSV data sheet which contained the geo-tagged teams and other information. Wrote a Python script to generate markers corresponding to Leaflet.js (Yes, my JS skills suck). When we laid the markers on the map, we found that it looked all crowded and difficult to locate one team quickly. I took this discussion to the HasGeek channel and Nigel showed me the Ubuntu Loco Global Events map. The markers in the map changed based on the zoom level of the map. That is pretty neat idea to handle crowded map markers. But they were using Google Maps.
I wanted to make this happen with Leaflet.js and OpenStreetMap data. Leaflet.js is perhaps the best, easy and intuitive interactive mapping library that I’ve come across. I spent some time in the documentation and came up with this idea and voila! – it worked.
Leaflet.js provides several events, the one which we will use is zoomend. This event gets triggered whenever the zoom level of the map changes. Exactly what we need. This is how I did it.
If you have a bunch of markers, use LayerGroup, that will give you better control. You can now add/remove the entire marker set by the LayerGroup handler.