This tutorial is a proof of concept to use an HTML5 slider to control the opacity of a Leaflet map layer. If you want more information about setting up Leaflet and adding different layers, read the documentation.

We will start by adding two layers:

map.addLayer(stamen);
map.addLayer(mapquest);

And a slider:

<input id="slide" type="range" min="0" max="1" step="0.1" value="0.5" onchange="updateOpacity(this.value)">

The slider will invoke the function updateOpacity  when it is moved, which sets the opacity of the layer:

function updateOpacity(value) {
    mapquest.setOpacity(value);
}


If we want to change the opacity of the stamen layer, that’s possible too:

function updateOpacity(value) {
    stamen.setOpacity(value);
}

The code for the above example is here.

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.

popup

Continue reading