I recently rewrote the maps portal for the Karnataka Learning Partnership. 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.
We used the amazing Leaflet.js library and a wide range of plugins. Most of the UI elements are from Twitter’s Bootstrap. I cannot say that Leaflet and Bootstrap works well all the time, but in case you want to add something on the map, make sure that you use extend leaflet’s control layer. For instance, see how we added the Stop Drawing control.
We made several design decisions mostly inspired by the series of blog posts by Brian Timoney.
Show only the required information – depending on the zoom level, we show the user relevant information at that level. For instance, the district layer will be hidden on a zoom level beyond 8, clusters and projects are not shown beyond 10. At the same time, the user is free to turn these layers on from the layer control on the right side. In case you are curious how to do this, here’s the bit of code that does this trick.
Clustered markers – based on location, the markers are clustered. This makes the map much intuitive than laying out all the markers outright. There are several performance aspects of doing this though. Clustering gives the user a birds-eye view of how the data is spread over the locations.
Search – a very easy to use search bar is employed. Search is absolutely the best feature that any maps portal should offer. It helps the user quickly find his location of interest than pan the map around. In a way, search will take the user to the exact information that he/she is looking for.
Filter – suppose the user wants to find one particular school in an area well known to him. The filter tool on the portal does just this. It will help the user filter the data according to different levels and the map will change its view whenever the user selects an attribute. You are more than welcome try this out yourself. Just click the filter icon on the right side.
Bounding circle – we’ve often seen our users wanting to find schools within a particular distance from their point of interest. We incorporated the Bounding circle tool which lets the user draw a circle on the map, and it will load all the schools in that region. More over, it will also list all the schools as drop down on the left side of the map.
Locate the user – upon loading, the map portal will ask the user for his/her location, if it’s available, the map will change its view to that particular location and load the data. This gives more context to the volunteers at KLP. If you are starting out to build a map portal and are looking for a real world example, the maps might be a good place for you to start. Also, don’t forget to check the code!