Multilingual OSM Maps Demo with Disputed Boundaries

Using multilingual tiles from Wikimedia maps and custom disputed boundaries from Mapbox

by Nikolay Petrov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.44.2/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css">
<!DOCTYPE html>
<html>

  <head>
    <title>Wikimedia Maps with Indian border fix</title>
    <meta charset='utf-8'>
  </head>

  <body>
    <div id='map'></div>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

// Set the map langauge code
 const languageCode = 'kn';
 
 // Replace with your Mapbox token
 mapboxgl.accessToken = 'pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2l2eDhnNzNpMDAwNzJ5cGowcnpiMXJkdyJ9.NljuPglsRA3mTGf-4CLIEg';

 // Create a new Mapbox GL map: https://www.mapbox.com/mapbox-gl-js/api
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/mapbox/basic-v9',
   zoom: 3,
   center: [80, 28],
   hash: true
 });

 map.on('load', function() {

   // Add Wikimedia i18n raster tiles: https://wiki.openstreetmap.org/wiki/Tile_servers
   map.addLayer({
     'id': 'osm-tiles',
     'type': 'raster',
     'source': {
       'type': 'raster',

       'tiles': [
         `https://maps.wikimedia.org/osm-intl-i18n/{z}/{x}/{y}@2x.png?lang=${languageCode}`
       ],
       'tileSize': 256
     }
   });
   
      // Add vector tiles to mute disputed boundaries within the claimed areas
 map.addLayer({
     'id': 'admin-2 disputed hide',
     'type': 'line',
     "source": {
       type: 'vector',
       url: 'mapbox://mapbox.mapbox-streets-v7'
     },
     "source-layer": "admin",
     "layout": {
       "line-join": "round",
       "line-cap": "round"
     },
     'paint': {
       "line-color": "#F7F4F1",
       "line-opacity": 0.6,
       "line-width": [
         // Scale border line width by zoom level to match style of raster tiles
         'interpolate', ['linear'],
         ['zoom'],
         0, 1,
         5, 3,
         8, 7
       ]
     },
     "filter": ["==", "disputed", 1]
   });

   // Add vector tiles for extra calimed Indian boundaries
   map.addLayer({
     'id': 'india-claimed-boundaries',
     'type': 'line',
     "source": {
       type: 'vector',
       url: 'mapbox://planemad.claimedboundaries'
     },
     "source-layer": "claimedboundaries",
     "layout": {
       "line-join": "round",
       "line-cap": "round"
     },
     'paint': {
       "line-color": "#9899A2",
       "line-width": [
         // Scale border line width by zoom...