Compare mapx style to un clear

by fxi

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css">




<div id="comparison-container">
    <div id="before" class="map"></div>
    <div id="after" class="map"></div>
</div>

CSS

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

    body {
        overflow: hidden;
    }

    body * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

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

JavaScript

mapboxgl.accessToken =
  'pk.eyJ1IjoiaGVsc2lua2kiLCJhIjoiY2puZW5rZ3N6MGRzYzNwb3drOW12MWEzdyJ9.IZC03hW3hKtBcbMgD0_KPw';
var beforeMap = new mapboxgl.Map({
  container: 'before',
  style: getStyle(),
  center: [0, 0],
  zoom: 0
});

var urlClear =
  'https://geoservices.un.org/arcgis/rest/services/ClearMap_WebPlain/MapServer/tile/{z}/{y}/{x}';

var afterMap = new mapboxgl.Map({
  container: 'after',
  style: {
    version: 8,
    name: 'mx_un_test',
    sources: {
      un_clear: {
        scheme: 'xyz',
        type: 'raster',
        tileSize: 256,
        tiles: [urlClear, urlClear]
      }
    },
    layers: [
      {
        id: 'un_clear_map',
        type: 'raster',
        source: 'un_clear'
      }
    ],
    center: [0, 0],
    zoom: 0
  }
});

// A selector or reference to HTML element
var container = '#comparison-container';

var map = new mapboxgl.Compare(beforeMap, afterMap, container, {
  // Set this to enable comparing two maps by mouse movement:
  // mousemove: true
});

function getStyle() {
  return {
    version: 8,
    name: 'labels un mapx',
    center: [9.750458229468222, 26.697954979119828],
    zoom: 1.9934606672641884,
    bearing: 0,
    pitch: 0,
    sources: {
      composite: {
        url:
          'mapbox://helsinki.5qf1prs4,mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2',
        type: 'vector'
      }
    },
    sprite:
      'mapbox://sprites/helsinki/ckh0efc838ts119pa1urw7ota/9ouysvtyaqo6hcokw4hbmepk4',
    glyphs: 'mapbox://fonts/helsinki/{fontstack}/{range}.pbf',
    layers: [
      {
        id: 'land',
        type: 'background',
        metadata: {
          'mapbox:featureComponent': 'land-and-water',
          'mapbox:group': 'Land & water, land'
        },
        layout: {},
        paint: {
          'background-color': '#FFFFFF'
        }
      },
      {
        id: 'water',
        type: 'fill',
        metadata: {
          'mapbox:featureComponent': 'land-and-water',
          'mapbox:group': 'Land & water,...