OpenStreetMap

Making a multilingual map of India using OpenStreetMap data

Posted by PlaneMad on 18 March 2016 in English (English)

untitled2

One of the main reasons I was convinced of the power of OSM when I first started to edit 8 years ago was the possiblity of seeing maps in my native language Tamil, spoken by 70 million people, which was till then unheard of. This is a huge factor in making technology relevant for people on the ground and breaking the notion that one needs to be literate in English or the Latin alphabet to be able to use modern tools like interactive maps.

There have been numerous experiments at making multlingual maps in India, I remember Yahoo maps having Indic streetmaps for India in 2007, but was soon discontinued. Google Maps for India is primarily in English and even in OSM we use the name tag to record the name in the Latin alphabet for consistency. India has 22 languages, none of them universally understood by the whole country. Even the national survey agency makes only English maps, with a select few created in Hindi.

Hardly anyone in India even knows that OSM can handle regional languages, simply because its not visible anywhere on the map. After some recent interest from the community in making regional language maps for openstreetmap.in, I decided to give this a shot to make a multlingual place map for India using OSM and Mapbox Studio that I have been playing with recently.

Extracting the data

First step is to get some sweet OSM data. For India, we are looking for a places that have one of the regional language name tags name:XX tag apart from the standard name tag in English. This overpass query extracts such places with names in either Malayalam, Tamil, Telugu, Kannada, Bengali or Hindi. There are around 21,000 such places in the Indian subcontinent. You can easily modify the query for your own language.

screenshot 2016-03-18 13 58 55

Once the data is exported as a geojson, you can upload it as a new Mapbox Tileset that can be styled later.

If you are comfortable with the commandline, you can extract the data, reformat and upload to Mapbox with these terminal commands.

Creating a new Mapbox style

I started of with a new Mapbox Studio style based on the 'Emerald' template, which is a great starting point to design a custom fully featured OSM based map. There are plenty of guides online to help you get started.

'Fixing' the boundaries of India

The official boundaries of India are slighlty different from whats displayed by default on OSM due to the dispute in Kashmir. Legally it is required to depict the entire erstwhile Kingdom of Kashmir as an undisputed part of India. To do this, I had the claimed boundaries extracted from various sources and have created a custom dataset that can be added to a Mapbox style.

The custom boundaries were added as a new layer in the style with a paint property similiar to the existing boundaries. With some tweaking, it looks close to perfect.

untitled2 The defacto (OSM) and official boundaries of India

Adding custom language place labels on the map

Just like the custom boundaries, its rather simple to add the overpass datasets that was uploaded earlier. For convenience, I made duplicates of the existing place label layers, and modified the data source for each of them to use the uploaded places instead of the mapbox-streets dataset provided as the default.

screenshot 2016-03-18 17 22 41

By changing the text field to use for labelling, we can instantly see the language change.

untitled2

This is great, but does not solve the problem of allowing a user to switch between multiple regional languages of their choice.

Dynamic styling with Mapbox GL JS

Once the map was published in Studio, its possible to embed it easily into a custom html page using Mapbox GL JS. Inspired by the language switcher example that how its possible to switch between the default languages supported by Mapbox, I could extend the concept to switch the text field dynamically for the other custom layers in the style. The end output works like the animation posted at the top.

The code is available here and the switchable map should soon be live on openstreetmap.in. A non switchable version of the style can be previewed here.

This should fill a huge void faced by the OSM India community in being able to use the map in their native language and also help us showcase the power of the project to local Government agencies.

Would be great to hear feedback and further ideas you may have to extend this process to your own community.

Location: Indiranagar 1st Stage, Indiranagar, Bengaluru, Bangalore Urban, Karnataka, 560001, India

Comment from MapMakinMeyers on 20 March 2016 at 21:46

do you have the raw data used for the names? and the wiki ids?

Hide this comment

Comment from Vincent de Phily on 21 March 2016 at 10:13

Great work, good to see OSM's oft-cited strenghs actually applied in practice. And it'll hopefully increase the number of OSM users and contributors.

You say you got the boundaries from "various sources" but point at an opverpass query, so isn't the source just OSM (with some post-treatment to make sure the inda-approved ones are chosen) ?

Hide this comment

Comment from PlaneMad on 21 March 2016 at 11:03

MapMakinMeyers: The query for the raw data is in the post: http://overpass-turbo.eu/s/f5N

Vincent de Phily: Thank you. The boundaries on OSM was updated using various sources, should have clarified that.

Hide this comment

Comment from pnorman on 9 April 2016 at 17:50

It's good to see native language rendering.

One question is if someone wanted to reproduce this themselves without relying on third-party services, is there any way, or is it tied into components which can't be reproduced like the Mapbox Streets vector tile set?

Hide this comment

Comment from PlaneMad on 11 April 2016 at 07:39

pnorman, the first step is to create vector tiles of the data you want to render. One can do this from a regular mapnik source using https://github.com/mapbox/tilelive-bridge .

Next is to use a JS library like https://www.mapbox.com/mapbox-gl-js/api/ to request vector tiles and render them on the client side using a GL stylesheet https://www.mapbox.com/mapbox-gl-style-spec/ which will give the same results.

The hard lift in the process is to manage vector tiles and keep them in sync with OSM data. This is essentially what is simplified by using Mapbox hosted vector tiles.

Hide this comment

Comment from PlaneMad on 11 April 2016 at 11:37

Another workflow is to use minjur to convert OSM data into geojson and tippecanoe for conversion into vector tiles.

Hide this comment

Comment from PlaneMad on 11 April 2016 at 11:40

And yet another is to use the OSM QA tiles that are updated daily, although these do not yet support relations.

Hide this comment

Comment from pnorman on 12 April 2016 at 06:25

pnorman, the first step is to create vector tiles of the data you want to render. One can do this from a regular mapnik source using https://github.com/mapbox/tilelive-bridge .

What Mapnik source do you recommend to generate vector tiles with so that the tiles will work with the work you describe in this post?

Hide this comment

Comment from PlaneMad on 12 April 2016 at 07:31

Can't really recommend one over the other since I have not tried generating vector tiles myself. My guess is that the standard osm2pgsql/postgres setup should work.

Hide this comment

Comment from pnorman on 13 April 2016 at 04:39

Can't really recommend one over the other since I have not tried generating vector tiles myself. My guess is that the standard osm2pgsql/postgres setup should work.

That's a database setup, not a vector tile setup. The issue isn't the software, but the source definitions.

Hide this comment

Comment from Ghybu on 27 September 2016 at 00:56

Hello,

Very interested in what you have done! Indeed, I came here mainly to do a map in Kurdish (name:ku). Currently, there are more 7,000 translations in Kurdish but impossible to easily integrate them into a web page to view. It would be interesting to do the same for the Kurdish and it will interest many people.

Hide this comment

Comment from Nizil on 25 October 2016 at 22:14

Is there any application or tool to add labels in any language easily? It would be great if we have a tool where we can add labels of selected area in any language in comparison to already added English label. like we select are of Kerala state, names of district appears (as level by top to bottom) and we translate/add labels in Malayalam side by side.

Hide this comment

Comment from pkram on 30 October 2016 at 14:46

Good work Mr PlaneMad. We are setting our own OSM server and we would like to incorporate the customizations you have done. We are based out of Chennai. Please let me know if you have time to discuss.

Thanks, Prasanna K Ram pk@vamosys.com

Hide this comment

Leave a comment

Parsed with Markdown

  • Headings

    # Heading
    ## Subheading

  • Unordered list

    * First item
    * Second item

  • Ordered list

    1. First item
    2. Second item

  • Link

    [Text](URL)
  • Image

    ![Alt text](URL)

Login to leave a comment