開放街圖標誌 OpenStreetMap 開放街圖

Making a multilingual map of India using OpenStreetMap data

於 2016年三月18日 由 PlaneMadEnglish發表。 上一次更新在 2016年九月18日。

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.

位置: Indiranagar 1st Stage, Indiranagar, Bengaluru Central City Corporation, Bengaluru, Bangalore North, Bengaluru Urban, Karnataka, 560038, India
電子郵件圖示 藍天圖示 Facebook 圖示 LinkedIn 圖示 乳齒象圖示 Telegram 圖示 X 圖示

討論

MapMakinMeyers2016年03月20日 21時46分 發表的評論

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

Vincent de Phily2016年03月21日 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) ?

PlaneMad2016年03月21日 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.

pnorman2016年04月 9日 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?

PlaneMad2016年04月11日 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.

PlaneMad2016年04月11日 11時37分 發表的評論

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

PlaneMad2016年04月11日 11時40分 發表的評論

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

pnorman2016年04月12日 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?

PlaneMad2016年04月12日 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.

pnorman2016年04月13日 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.

Ghybu2016年09月27日 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.

Nizil2016年10月25日 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.

pkram2016年10月30日 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

Reshma Maner2016年12月27日 10時00分 發表的評論

Hi,

You have written here for “‘Fixing’ the boundaries of India”.

I am running a local OSM Tile server and I want to show the correct boundary. Can you please tell me how to do this?

PlaneMad2017年01月 4日 09時57分 發表的評論

@reshma

Yu can see instructions on correcting the boundaries on a local tile server here: http://xsce.org/wiki/generating_map_tiles

shekhar kc2017年10月14日 02時26分 發表的評論

@planemad,

Attempted the steps as outlined in the link provided by you above (http://xsce.org/wiki/generating_map_tiles) for my local OSM tile server with correct political boundaries for India. However, I have run into issues running run.py from osm-boundaries package (it generated the file in osm_admin_x-y.osm.pbf ..however, aborts the process at the time of invoking subprocess osmjs psql). Apparently, this is a known issue … without a fix yet. (https://github.com/mapbox/osm-boundaries/pull/9#issuecomment-53219685).

Wonder if there is a work around?

Thanks

shekhar kc2017年10月14日 17時33分 發表的評論

@planemad,

Issue resolved. Something to do with osmjs sparsetable. Worked once I removed that argument. Thanks anyways

Reshma Maner2017年11月 8日 11時45分 發表的評論

Hi Shekhar,

Can you give me exact steps to do this. I am trying to correct the boundaries on my local map.

Reshma Maner2018年11月28日 08時38分 發表的評論

Hi Shekhar,

Can you help me in correcting the boundaries in for local tile server?

I have set up local OSM Tile server. I need to correct the boundaries.

shekhar kc2019年01月14日 05時51分 發表的評論

Apologies for a delayed response Reshma. Didn’t follow the thread thereafter. Hope you’ve managed to resolve the issue you were facing.

I did face an issue while running the scripts as mentioned in the article. But the issue got resolved once I removed the ‘-l sparsetable’ argument in line 83 of run.py while invoking osmjs script here:

https://github.com/mapbox/osm-boundaries/blob/master/run.py

Hope this helps.

登入 來留下評論