Лагатып OpenStreetMap OpenStreetMap

Making a multilingual map of India using OpenStreetMap data

Апублікавана карыстальнікам PlaneMad 18 Сакавік 2016 на мове English Апошняе абнаўленне 18 Верасень 2016.

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
Email icon Bluesky Icon Facebook Icon LinkedIn Icon Mastodon Icon Telegram Icon X Icon

Абмеркаванне

Каментар ад MapMakinMeyers у 20 Сакавік 2016 у 21:46

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

Каментар ад Vincent de Phily у 21 Сакавік 2016 у 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) ?

Каментар ад PlaneMad у 21 Сакавік 2016 у 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.

Каментар ад pnorman у 9 Красавік 2016 у 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?

Каментар ад PlaneMad у 11 Красавік 2016 у 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.

Каментар ад PlaneMad у 11 Красавік 2016 у 11:37

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

Каментар ад PlaneMad у 11 Красавік 2016 у 11:40

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

Каментар ад pnorman у 12 Красавік 2016 у 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?

Каментар ад PlaneMad у 12 Красавік 2016 у 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.

Каментар ад pnorman у 13 Красавік 2016 у 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.

Каментар ад Ghybu у 27 Верасень 2016 у 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.

Каментар ад Nizil у 25 Кастрычнік 2016 у 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.

Каментар ад pkram у 30 Кастрычнік 2016 у 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 Maner у 27 Снежань 2016 у 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?

Каментар ад PlaneMad у 4 Студзень 2017 у 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 kc у 14 Кастрычнік 2017 у 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 kc у 14 Кастрычнік 2017 у 17:33

@planemad,

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

Каментар ад Reshma Maner у 8 Лістапад 2017 у 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 Maner у 28 Лістапад 2018 у 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 kc у 14 Студзень 2019 у 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.

Увайсці каб пакінуць каментар