MAPX UN STYLE

MapX tileset of UN official boundaries, with style set close to UN GIS recommendation

by fxi

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.0-beta.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.0-beta.1/mapbox-gl.css">
<div class="header">
  <h3>Official United Nations Borders 2023</h3>

  <span>Attribution links:</span><br>
  <hr>
  <code id="attr"></code>
  <hr>
</div>
<div id="map"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #333;
}



.header {
  width:100%;
  z-index: 1;
  position: absolute;
  top: 0;
  ;
  background-color: #333333b8;
  font-family: Helvetica, sans-serif;
  color: white;
  backdrop-filter: blur(2px);
}

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZnJlZGZ4aSIsImEiOiJja3ZpNW1wdmoxdGU5Mm9xNXRyNnM0ZjMzIn0.VCpZ5PZAnhqvTT0BZ-ENRw';
const elAttr = document.getElementById('attr');
const txtAttr = '<a href="https://www.un.org/geospatial/">© 2021 UN-GIS,</a><a href="https://mapx.org">MapX</a>';
elAttr.innerText = txtAttr;

const map = new mapboxgl.Map({
  container: 'map',
  zoom: 1.3,
  center: [0, 0],
  style: style(),
  projection: {
    name: 'equalEarth'
  },
  attributionControl: false
});


map.addControl(
  new mapboxgl.AttributionControl({
    customAttribution: txtAttr
  })
);



map.on('load', () => {

  addGraticule(map,10,10);

})





function style() {
  return {
    version: 8,
    name: 'mx_wri_jsfiddle',
    //glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    glyphs: "https://api.staging.mapx.org/get/mirror?url=https%3A%2F%2Fapp.mapx.org%2Ffontstack%2F{fontstack}%2F{range}.pbf",
    sources: {
      mapbox_composite: {
        type: 'vector',
        url: 'mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v8,mapbox-public.bathymetry,helsinki.42ysskas,helsinki.6lefiu83'
      }
    },
    layers: [{
        id: 'background',
        type: 'background',
        layout: {
          visibility: 'visible'
        },
        paint: {
          'background-color': '#fff'
        }
      },

     {
      "id": "boundary_un_1",
      "type": "line",
      "source": "mapbox_composite",
      "source-layer": "un_2020_borders_line",
      "filter": ["==", ["get", "type"], 1],
      "layout": {
        "line-join": "bevel",
        "visibility": "visible"
      },
      "paint": {
        "line-color": "rgba(38,38,38,0.3)",
        "line-width": ["interpolate", ["linear"], ["zoom"], 0, 0.5, 22, 2],
        "line-opacity": ["interpolate", ["linear"], ["zoom"], 0, 0.9, 6, 1]
      }
    },
    {
      "id": "boundary_un_2",
      "type": "line",
      "source": "mapbox_composite",
      "source-layer": "un_2020_borders_line",
      "filter": ["==", ["get",...