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:


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) {

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

function updateOpacity(value) {

The code for the above example is here.

Web and mobile applications account for most of the maps usage today. We recently read that about 54% of smartphone users have Google Maps running on their phone making it the most popular application in the market. In the recent years, the technology behind web maps have improved considerably, owing to the incredibly fast and intuitive experience that we enjoy today. What we see, drag, scroll, touch, pinch and poke today is a set of map tiles.

The OpenStreetMap Wiki defines map tiles this way –

square bitmap graphics displayed in a grid arrangement to show a map

The fine folks at MapBox defined it this way –

tiles are typically 256×256 pixels and are placed side-by-side in order to create the illusion of a very large seamless image.

This technique of preparing and serving maps changed the way they are consumed drastically. Earlier, loading the map in a browser would take up so much memory that it was practically impossible to browse the map easily. Tiles make sure that only the required (usually the area which is currently viewed) have to be displayed on the browser, reducing the memory footprint. Even though Google got the usage of tiling right, they did not invent it. Web Map Service which came out in 1999 as an OGC standard set the web mapping revolution to a new level. WMS was slow for a lot of neogeographers. This frustration lead Anselm Hook to explore the idea of tiling the map for better performance.

The core of the application is a lightweight javascript application that runs in both Internet Explorer and Firefox. The approach is similar to the one taken at SVG Tile Engine which I wrote last summer. The difference is that this one talks to conventional WMS compliant mapping sources rather than a pre-tiled blue marble database and relies only on Javascript – not on SVG. This javascript engine is actually just a straight port of a java client based tile mapping engine which is visible at Java Tile Engine . The problem with the java applet approach however is that it cannot do cross domain image loading due to flaws in the security policy of java.

WMS-C was introduced following this idea to cache the map images which was super-ceded by the Tile Map Service by OSGeo.

Let’s take another step forward and see how the tiles work and how they are generated.

tilesWhen we view a map on the browser, there’s an immensely powerful feature – zoom. The world map at the least zoom level (level 0) is usually four square images which forms a grid of tiles. Every location on the earth is represented by a tuple with two elements – [latitude, longitude]. This, on your screen, translates to [x, y] which is the pixel coordinates. Zoom levels are incorporated to this data structure by adding one more element to the tuple – [latitude, longitude, zoom]. For instance, [12.9719, 77.5938, 12] is Bangalore at zoom level 12 and [12.9719, 77.5938, 15] is Bangalore at zoom level 15.

In your browser, the map is a collection of HTML image tags. This is achieved by using one of the various JavaScript map libraries like Leaflet.js, OpenLayers.js, or MapBox.js.

The geographic data in databases or shapefiles are rendered into the tiles through a process which involves several stages. We will quickly run through the most important and commonly used pipeline using a stack of open source softwares.

Mapnik is the de facto open source rendering library written in C++ that is used by large geographic data projects like OpenStreetMap to tiny map studios. Mapnik accepts a wide variety of input data – PostgreSQL databases, Shapefiles, GeoTIFF, and renders the data into set of map tiles depending on the style that you have developed. The styles are XML files which explain what Mapnik should do for each of the geographic feature (read tags) that it finds in the data source.

	<Style name="highways">
			<Filter>[highway] &lt;&gt; ''</Filter>
				<CssParameter name="stroke">#808080</CssParameter>
				<CssParameter name="stroke-width">2</CssParameter>
				<CssParameter name="stroke-linejoin">round</CssParameter>
				<CssParameter name="stroke-linecap">round</CssParameter>
			<Filter>[highway] &lt;&gt; ''</Filter>
			<TextSymbolizer name="name" fontset_name="book-fonts"
				size="9" fill="#000" halo_radius="1" placement="line" />

The above XML is one of the many style tags used by OpenStreetMap to render the tiles using Mapnik. This style tag refers to the highways that you see on the map. A style tag comprises of several Rules. A common technique is to apply CSS to the features that satisfy a rule and Mapnik will pick it up.

The tiles rendered by Mapnik are then served from what is called a Tile Server. The commonly used tools for a server is Apache with the mod_tile extension. I like the Python based server called TileStache. It’s fast and easy to setup. When the browser requests for a map tile, the server checks if the tile has been already rendered, if yes it is send to the browser. Otherwise, it is send to Mapnik for rendering.

We will discuss more about the configuration and best practices of setting up a rendering stack eventually in another blog post.

As two South Asian countries celebrate their independence days in August, I decided to focus on ‘political maps’ in this *Monthly Maps* post. This means that some of the exciting maps and map news we came across in August, which did not directly speak of politics, will become part of the September post.

We begin with a fascinating map of the Bangladesh-India border along the Indian district of Cooch Behar depicting various ‘enclaves’ (parcel of Bangladeshi territory within Indian territory, and vice versa) along the border lands. This pre-1971 map (hence referring to Bangladesh as East Pakistan) posted by Frank Jacobs on the Strange Maps blog is a great example of the deeply geopolitical nature of the lines and the names that annotate and constitute maps, and also of the territorial mess often created by such politics.


bangladesh-india border - cooch behar - enclaves


Maps have also played a key political role as a tool for government to uniquely identify and classify not only national borders but also various forms of landed properties and their relationship with the government. This 1855 “vice” map of the Chinatown in San Francisco was created by the municipal government to locate places of gambling, prostitution and opium “resorts”, as part of the anti-Chinese movement and propaganda in California. Interestingly, the map fails to capture the vertical dimension of urban spaces and only identifies the usage pattern of the ground floor spaces.

david rumsey - san francisco - chinatown

Military requirements have been perhaps the most crucial driver for development of modern cartographic techniques and instruments. Jeremy Crampton recently shared a ‘jaw-dropping “OSS Theater Map”‘ produced by the Office of Strategic Affairs (predecessor of Central Intelligence Agency of USA) during the World War II. Crampton explains that the ‘unusual projection’ utilised by this map is targeted at solving a classic cartographic problem of finding a projection to represent earth’s surface as a square grid (just like how modern web-map tiles work) while not distorting the actual spherical shape form of the surface.


Continue reading

The Thermal InfraRed Sensor (TIRS) is a new instrument carried onboard the Landsat 8 satellite that is dedicated to capturing temperature-specific information.  Using radiation information from the two electromagnetic spectral bands covered by this sensor, it is possible to estimate the temperature at the Earth’s surface (albeit at a 100m resolution, compared to the 30m resolution of the other instrument, the Operational Land Imager).

I used data from the TIRS to estimate the surface temperature in the city-state of Delhi, India as of the 29th of May, 2013.  The relevant tarball file containing the data was downloaded using the United States’ Geological Survey’s (USGS) EarthExplorer tool; the area of interest was encompassed by [scene identifier: path 146 row 040] in the WRS-2 scheme. I think I’ll leave the specific explanations describing WRS-2, path/row values and the other miscellaneous small data-management operations for a later post. For now, I’ll let it be understood that these are important things to know when in the process of actually obtaining this data. When the tarball is unpacked fully, the bands from the TIRS instrument are bands 10 and 11;  the relevant .tif files are [“identifier”_B10.tif] and [“identifier”_B11.tif], and these were clipped to the administrative boundary of Delhi. There’s also a text file containing metadata: [“identifier”_MTL.txt] is essential for the math we’re going to do on these two bands.


Delhi as seen by Landsat 8 Band 10 (TIRS)
Delhi as seen by Landsat 8 Band 10 (TIRS)

Continue reading

I planned to highlight ten maps each in month in this *Monthly Maps* series. The month of July, however, saw quite a few fabulous maps, and left me struggling to choose between them. Perhaps I will break the limit of ten maps a bit for this month.

July began with the awesome urban tweet topography maps by data visualisation scientist Nicolas Belmonte. These maps takes all the geo-tagged tweets from five cities — Buenos Aires, Istanbul, Moscow, New York, and San Francisco — and generate a three dimensional topography of these tweets with a higher contour line indicating a greater number of tweets from the place concerned. The image below is for Istanbul. Do visit the maps page to explore other cities and various thematic terrain shading, and the entire code is on GitHub too!

3d twitter topography

And Stamen came out with the *instgram for maps* – map stack. It lets you create a map by combining various basemap layers (including satellite imagery, terrain, road networks etc.), visually crafting the layers using detailed controls (e.g., masks, opacity and brightness), and to convert the final map into an image for sharing.

stamen - map stack

Continue reading

Note: Welcome to this new content section we are beginning. As the name suggest, the ‘Monthly Maps’ series will do a monthly aggregation of all the maps, map codes, and map news that we loved and flagged during the month concerned (and not necessarily those that were published in the month concerned). Apologies for the late publication of the June 2013 edition. We hope you will enjoy this one and keep following the future editions.


The biggest international news this month was the ‘discovery’ of PRISM and associated technological systems being used by the Government of USA for global media surveillance. WikiLeaks and friends created a very informative map of snooping activities by governments across the world.


And, the OpenStreetMap community went ahead and mapped a secret data center of the National Security Agency of USA being contructed outside Salt Lake City, Utah.


Continue reading

This will be a relatively short post; I’ve been working with Landsat data for a few years now, and I find it absolutely fascinating. The new Landsat satellite, initially named the Landsat Data Continuity Mission and now known as Landsat 8, is actually the 7th in the series; Landsat 6 never made it to orbit. When Landsat 8 was launched on the 11th of February 2013, I was really anxious and excited and when it made it to orbit successfully, I was ecstatic. I downloaded my first set of Landsat data (Path146/Row040, covering the Indian city of Delhi) off the USGS EarthExplorer website last week, and have been tinkering with it ever since.




Continue reading

It has been a while since we started writing in a consistent pace. But somehow, I see that happening now. Today, we will see how to organize and align your data so that you can make a map or two out of it.

We often deal with data in CSV formats, which potentially can be visualized as a map. Let’s start with a sample file.

code district boys_appeared girls_appeared total_appeared boys_passed girls_passed total_passed pass_% rank
GA UDUPI 8013 8058 16071 6852 7537 14389 89.53 1
PA SIRSI 4582 4633 9215 3955 4183 8138 88.31 2
LL HASSAN 11783 11968 23751 9722 10685 20407 85.92 3
DD TUMKUR 12312 11085 23397 10305 9780 20085 85.84 4

The table above shows the first few rows from a CSV file containing SSLC results in Karanataka for the year 2012. You can download the complete file here. The contents of the file and what each row means is very evident from the column headers.

The column of interest for you right now should be ‘district’. We will now use this column to make a map from this data. The process of converting an address or part of an address to a geographic coordinate is called geocoding. We will geocode this data to find the latitude and longitude of the districts.

There are several ways of geocoding data – from free and easy APIs to comprehensive as well as expensive ones. Two of our favourites are: Batch Geocode and the MapBox Google Docs Geo plugin. We will use the second one for this exercise.


Continue reading

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.


Continue reading

I was employed as a spatial data and cartographic consultant on a project to analyse specific agricultural commodities and Agricultural Produce Marketing Committees (APMCs) in the Indian states of Karnataka and Madhya Pradesh. The final product was a set of maps for various publications, as well as the clean datasets themselves.

Agricultural market datasets for the states of Karnataka and Madhya Pradesh were obtained for the purposes of spatial visualisation; these contained information on wheat procurement in Madhya Pradesh (2008 – 2012), tuar production in Karnataka (2007 – 2009) and the locations and categories of APMCs in both these states. Some of the data was linked to district names, while the rest was geocoded using a free online geocoding service. I used Quantum GIS, TextEdit and Microsoft Excel extensively for this project; Excel and TextEdit are invaluable when processing CSV files, and QGIS is where all the actual mapping itself takes place.

The actual process itself involved lots of data-cleaning and a little bit of mapping. First, for the geocoding, I ran the column containing the village names through the geocoder thrice; at each repetition, I tweaked the names a little more to get more accurate coordinate results. I then had to similarly tweak the district names to get them to match up with my source shapefiles; fixing bad spellings can be a LOT of work. In its entirity, this was a tedious process that involved organising, cleaning and validating four distinct datasets with both automated and manual operations. However, the final products were datasets that were clean, had accurate spatial locations and could easily be used to produce analytically valuable maps.

CASI _ Five years of wheat procurement in Madhya Pradesh _ Animated


Continue reading