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/v3.1.2/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css">
<div class="header">
  <h3>MapX Style Demo</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.eyJ1IjoiaGVsc2lua2kiLCJhIjoiY2puZW5rZ3N6MGRzYzNwb3drOW12MWEzdyJ9.IZC03hW3hKtBcbMgD0_KPw';
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: 'globe'
  },
  attributionControl: false
});


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



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

  addGraticule(map,10,10);

})





function style() {
  return {
  "metadata": {
    "mapx_version": "1.12.7"
  },
  "version": 8,
  "name": "water_light_1.12.7",
  "fog": {
    "horizon-blend": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      4,
      0.1,
      7,
      0.3
    ],
    "color": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      0,
      "rgba(17, 176, 248, 0.3)",
      4,
      "rgba(255, 255, 255, 0.3)",
      7,
      "rgba(255, 255, 255, 0.8)"
    ],
    "high-color": "rgba(255,255,255,0.1)",
    "space-color": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      4,
      "#111",
      7,
      "rgba(17,176,248,0.9)"
    ],
    "star-intensity": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      4,
      0.1,
      7,
      0
    ],
    "range": [
      0.5,
      10
    ]
  },
  "sprite": "mapbox://sprites/mapbox/bright-v8",
  "glyphs": "mapbox://fonts/helsinki/{fontstack}/{range}.pbf",
  "sources": {
    "mapbox_composite": {
      "type": "vector",
      "url": "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v8,mapbox-public.bathymetry,helsinki.42ysskas,helsinki.6lefiu83"
    },
    "mapbox_dem": {
      "type": "raster-dem",
      "url":...