OpenStreetMap 로고 OpenStreetMap

Making a multilingual map of India using OpenStreetMap data

PlaneMad님이 English로 2016년 3월 18일에 게시함. 최근 2016년 9월 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
이메일 아이콘 Bluesky 아이콘 Facebook 아이콘 LinkedIn 아이콘 마스토돈 아이콘 텔레그램 아이콘 X 아이콘

토론

2016년 3월 20일 21:46MapMakinMeyers님의 의견

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

2016년 3월 21일 10:13Vincent de Phily님의 의견

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

2016년 3월 21일 11:03PlaneMad님의 의견

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.

2016년 4월 9일 17:50pnorman님의 의견

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?

2016년 4월 11일 07:39PlaneMad님의 의견

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.

2016년 4월 11일 11:37PlaneMad님의 의견

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

2016년 4월 11일 11:40PlaneMad님의 의견

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

2016년 4월 12일 06:25pnorman님의 의견

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?

2016년 4월 12일 07:31PlaneMad님의 의견

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.

2016년 4월 13일 04:39pnorman님의 의견

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.

2016년 9월 27일 00:56Ghybu님의 의견

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.

2016년 10월 25일 22:14Nizil님의 의견

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.

2016년 10월 30일 14:46pkram님의 의견

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

2016년 12월 27일 10:00Reshma Maner님의 의견

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?

2017년 1월 4일 09:57PlaneMad님의 의견

@reshma

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

2017년 10월 14일 02:26shekhar kc님의 의견

@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

2017년 10월 14일 17:33shekhar kc님의 의견

@planemad,

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

2017년 11월 8일 11:45Reshma Maner님의 의견

Hi Shekhar,

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

2018년 11월 28일 08:38Reshma Maner님의 의견

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.

2019년 1월 14일 05:51shekhar kc님의 의견

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.

댓글을 남기려면 로그인하세요