sg-heatmap/dist/plugins/mapboxgl.js

Open-source all-in-one Swiss Army knife tool for creating Choropleth maps

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = supportMapboxGL;

var _pick2 = require('lodash/pick');

var _pick3 = _interopRequireDefault(_pick2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function supportMapboxGL(heatmap) {
  function initializeRenderer(map, colorScale) {
    var defaultStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
    var addonStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};

    if (!window) throw new Error('Method initializeRenderer should only be called browser-side');
    if (!window.mapboxgl) throw new Error('MapboxGL not loaded');
    if ('renderer' in this) {
      console.log('Existing renderer replaced');
      this.renderer.remove();
    }

    this.colorScale = colorScale;

    var id = void 0;
    do {
      id = randomHash(8);
    } while (map.getSource(id) || map.getLayer(id + '-default') || map.getLayer(id));

    var data = {
      type: 'FeatureCollection',
      features: this.children.map(function (c) {
        return {
          id: c.id,
          type: 'Feature',
          geometry: c.geometry,
          properties: Object.assign({}, c.properties)
        };
      })
    };

    map.addSource(id, { type: 'geojson', data: data });

    map.addLayer({
      id: id + '-fill-default',
      source: id,
      type: 'fill',
      filter: ['!has', 'color'],
      paint: Object.assign((0, _pick3.default)(defaultStyle, ['fill-color', 'fill-opacity']))
    });

    map.addLayer({
      id: id + '-line-default',
      source: id,
      type: 'line',
      filter: ['!has', 'color'],
      paint: Object.assign((0, _pick3.default)(defaultStyle, ['line-width', 'line-color', 'line-opacity']))
    });

    map.addLayer({
      id: id + '-fill',
      source: id,
      type: 'fill',
      filter: ['has', 'color'],
      paint: Object.assign((0, _pick3.default)(defaultStyle, ['fill-color', 'fill-opacity']), (0, _pick3.default)(addonStyle, ['fill-opacity']), { 'fill-color': ['get', 'color'] })
    });

    map.addLayer({
      id: id + '-line',
      source: id,
      type: 'line',
      filter: ['has', 'color'],
      paint: Object.assign((0, _pick3.default)(defaultStyle, ['line-width', 'line-color', 'line-opacity']), (0, _pick3.default)(addonStyle, ['line-width', 'line-color', 'line-opacity']))
    });

    this.renderer = {
      layer: id,
      layers: [id + '-fill-default', id + '-line-default', id + '-fill', id + '-line'],
      get source() {
        return map.getSource(id);
      },
      remove: function remove() {
        this.layers.forEach(function (layer) {
          if (map.getLayer(layer)) map.removeLayer(layer);
        });
        if (map.getSource(id)) map.removeSource(id);
      }
    };
    return this.renderer;
  }

  function render(stat) {
    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

    if (!this.renderer) throw new Error('Renderer has not been initialized');

    var colorScale = options.colorScale || this.colorScale;

    var _getStat = this.getStat(stat),
        statValues = _getStat.values,
        min = _getStat.min,
        max = _getStat.max;

    var domain = options.domain || [min, max];
    function normalize(value) {
      return (value - domain[0]) / (domain[1] - domain[0]);
    }

    var data = {
      type: 'FeatureCollection',
      features: this.children.map(function (c) {
        var key = c.id;
        var properties = Object.assign({}, c.properties);
        if (key in statValues) {
          var normalized = normalize(statValues[key]);
          var transformed = Math.pow(normalized, options.transform || 1);
          properties.color = colorScale(transformed);
        } else {
          delete properties.color;
        }
        return {
          id: c.id,
          type: 'Feature',
          geometry: c.geometry,
          properties: properties
        };
      })
    };

    this.renderer.source.setData(data);
  }

  heatmap.initializeRenderer = initializeRenderer.bind(heatmap);
  heatmap.render = render.bind(heatmap);
}

function randomHash(len) {
  var zeroPad = '0'.repeat(len);
  return (Math.random().toString(36) + zeroPad).slice(2, len + 2);
}