Wikimedia India Maps with language picker

Multilingual maps + universal language selector

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">
<link rel="stylesheet" href="https://rawgit.com/wikimedia/jquery.uls/master/css/jquery.uls.css">
<link rel="stylesheet" href="https://rawgit.com/wikimedia/jquery.uls/master/css/jquery.uls.grid.css">
<link rel="stylesheet" href="https://rawgit.com/wikimedia/jquery.uls/master/css/jquery.uls.lcd.css">
<script src="https://rawgit.com/wikimedia/jquery.uls/master/src/jquery.uls.data.js"></script>
<script src="https://rawgit.com/wikimedia/jquery.uls/master/src/jquery.uls.data.utils.js"></script>
<script src="https://rawgit.com/wikimedia/jquery.uls/master/src/jquery.uls.lcd.js"></script>
<script src="https://rawgit.com/wikimedia/jquery.uls/master/src/jquery.uls.languagefilter.js"></script>
<script src="https://rawgit.com/wikimedia/jquery.uls/master/src/jquery.uls.core.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Wikimedia India Maps with language picker</title>
    <meta charset='utf-8'>
  </head>


  <body>
    <div id='map'></div>
    <span id='language' class="active uls-trigger">Select language</span>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
}

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

#language {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(150, 150, 150, 0.6);
  padding: 5px 5px 5px 24px;
}

JavaScript

// Set the map langauge code
 const languageCode = 'ml';

 // 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 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 level to match style of raster tiles
         'interpolate', ['linear'],
         ['zoom'],
         0, 0.5,
         5, 2,
         8, 5
       ]
     }
   });

   setMapLanguage(languageCode);

   // Function to switch language of map tiles
   function setMapLanguage(language) {
     if (map.getLayer('wikimedia-tiles')) {
      ...