Mapbox GL JS  |  Compare Two Maps: Swipe Map Plugin

Comparing two maps in Mapbox GL JS is easy with the Swipe Map plugin. The map below uses data from the National Center for Health Statistics to compare drug overdose death rates from 1999-2015. The same process used to join data from a json file to vector tiles in this map is the same as used in the previous map, and documented in the official Mapbox examples.

The age-adjusted rate of drug overdose deaths in the United States in 2015 (16.3 per 100,000) was more than 2.5 times the rate in 1999 (6.1). ~ NCHS

« Choropleth: Vector Tiles with Joined Data

Full Map Code

      
var mapContainer = document.getElementById('map');
var beforeDiv = document.createElement('div');
beforeDiv.id = "before";
beforeDiv.className = 'map';
var afterDiv = document.createElement('div');
afterDiv.id = "after";
afterDiv.className = 'map';
mapContainer.appendChild(beforeDiv);
mapContainer.appendChild(afterDiv);
/*Blank Mapbox GL Map with tile sources loaded*/

var style = {
  "version": 8,
  "name": "blank",
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": ""
    },
    "source": {
      type: "vector",
      url:"mapbox://ovrdc.18vllzwu"
    }
  },
  "layers": [{
    "id": "background",
    "type": "background",
    "paint": {
      "background-color": "#1d1f20"
    }
  }]
};

var beforeMap = new mapboxgl.Map({
    container: 'before',
    style: style,
    center: [-95.39, 39.15],
    zoom: 3.4
});

var afterMap = new mapboxgl.Map({
    container: 'after',
    style: style,
    center: [-95.39, 39.15],
    zoom: 3.4
});

var map = new mapboxgl.Compare(beforeMap, afterMap, {
//  mousemove: true
});

afterMap.addControl(new mapboxgl.NavigationControl());

/*Cannot figure out FullscreenControl for both maps*/
/*afterMap.addControl(new mapboxgl.FullscreenControl());
beforeMap.addControl(new mapboxgl.FullscreenControl(), "top-left");*/

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

  var maxValue = 16;
  var jsonData2015, jsonData1999;

  $.getJSON("/gis-tutorials/tutorial-data/nchs_overdose_2015.json")
    .done(function(data) {
      console.log('json data loaded');
      //console.log(data);
      jsonData2015 = data;
      buildMap(jsonData2015, afterMap, true);
    });

  $.getJSON("/gis-tutorials/tutorial-data/nchs_overdose_1999.json")
    .done(function(data) {
      console.log('json data loaded');
      //console.log(data);
      jsonData1999 = data;
      buildMap(jsonData1999, beforeMap, null);
    });

  function buildMap(data, mapname, x) {

    var layerName = "uscounties";
    var vtMatchProp = "GEOID";
    var dataMatchProp = "geoid";
    var dataStyleProp = "category";

    // First value is the default, used where the is no data
    var stops = [];

    // Calculate color for each state based on the overdose death rate

    var numbers = data.map(function(val) {
      return Number(val[dataStyleProp])
    });

    //console.log(numbers);

    var numbersIndex = data.map(function(val) {
      var index = val[dataMatchProp] + "|" + val[dataStyleProp];
      return index
    });

    //console.log(numbersIndex);

    //chroma quantile scale
    var limits = chroma.limits([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16], 'e', 5);

    //chroma color scale
    var colorScale = chroma.scale(['#fafa6e', '#2A4858']).mode('lch').colors(6);

    console.log(limits);

    console.log(colorScale);

    var newData = data.map(function(county) {

      var color = "#fafa6e";

      for (var i = 0; i < limits.length; i++) {
        if (county[dataStyleProp] <= limits[i]) {
          color = colorScale[i];
          break;
        }
      }

      var id = county[dataMatchProp];
      return [id, color]
    });

    //console.log(newData);

    // Add layer from the vector tile source with data-driven style
    mapname.addLayer({
      "id": "joined-data",
      "type": "fill",
      "source": "source",
      "source-layer": layerName,
      "paint": {
        "fill-color": {
          "property": vtMatchProp,
          "type": "categorical",
          "stops": newData
        },
        "fill-opacity": 0.7,
        "fill-outline-color": "hsla(11,0%,75%,1)"
      }
    });
    if (x != null) {
      var div = document.createElement('DIV');
      div.className = 'legend';
      /* Add min & max*/
      var labels = []
      div.innerHTML = '<div><h3 style="font-weight:bolder;font-size:larger;">Drug Overdose Death Rates</h3><br> \
      </div><div class="labels"><div class="min"><em>&nbsp;0-4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;per 100,000 persons</div> \
        <div class="max">30+</em></div></div>'

      for (i = 0; i < colorScale.length; i++) {
        labels.push('<li style="background-color: ' + colorScale[i] + '"></li>')
      }

      div.innerHTML += '<ul style="list-style-type:none;display:flex">' + labels.join('') + '</ul>'
      document.getElementById('after').appendChild(div);
    }
  }
});