React-map-gl: Localization

Created on 30 Sep 2020  路  5Comments  路  Source: visgl/react-map-gl

Is there possible localization in the map ?

Most helpful comment

You need to contact Mapbox for issues in their labels. react-map-gl is only a wrapper and does not provide the data service.

All 5 comments

I also have to change map labels (countries, cities etc...) to Arabic when application language is changed and vice versa. I have used StaticMap with functional component.

I also have to change map labels (countries, cities etc...) to Arabic when application language is changed and vice versa. I have used StaticMap with functional component.

@syedfasih
If you find resolution please share with me, I am still searching

enable RTL

Follow mapbox's example

The labels have been translated but I have to translate all the labels. There are various labels that are shown in en but not in ar. code is below:

`setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
null,
true,
);
const setLabels = map => {
const language = localStorage.getItem('lang')
? JSON.parse(localStorage.getItem('lang')).code
: 'ar';

map.getStyle().layers.map(each => {
    if (each.hasOwnProperty('layout') && each.layout.hasOwnProperty('text-field')) {
        map.setLayoutProperty(each.id, 'text-field', ['get', `name_${language}`]);
    }
});

}; {...viewport}
mapStyle="mapbox://styles/mapbox/streets-v11"
mapboxApiAccessToken={mapboxKey}
mapOptions
onLoad={event => {
setLabels(event.target);
}}
>


{markers &&
markers
.filter(
marker =>
marker.latitude &&
marker.longitude &&
marker.latitude >= -90 &&
marker.latitude <= 90 &&
marker.longitude >= -180 &&
marker.longitude <= 180,
)
.map((marker, idx) => {
return (
key={idx}
latitude={marker.latitude}
longitude={marker.longitude}
>


);
})}
`

Please guide me what is wrong with it?

You need to contact Mapbox for issues in their labels. react-map-gl is only a wrapper and does not provide the data service.

Was this page helpful?
0 / 5 - 0 ratings