@hackoregon/component-library/es/BaseMap/BaseMap.js

Official repo for Hack Oregon React component library

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  z-index: 1;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  padding: 0;\n  width: 100%;\n  height: 100%;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React, { Component } from "react";
import MapGL, { NavigationControl, Marker, FlyToInterpolator } from "react-map-gl";
import Dimensions from "react-dimensions";
import { css } from "emotion";
import PropTypes from "prop-types";
import createRef from "create-react-ref/lib/createRef";
import Geocoder from "react-map-gl-geocoder";
import "mapbox-gl/dist/mapbox-gl.css";
import { isEqual } from "lodash";
import mapboxgl from "./mapboxgl";
var MAPBOX_TOKEN = "pk.eyJ1IjoiaGFja29yZWdvbiIsImEiOiJjamk0MGZhc2cwNDl4M3FsdHAwaG54a3BnIn0.Fq1KA0IUwpeKQlFIoaEn_Q";
var CIVIC_LIGHT = "mapbox://styles/hackoregon/cjiazbo185eib2srytwzleplg";
var CIVIC_DARK = "mapbox://styles/mapbox/dark-v9";
var mapWrapper = css(_templateObject());
var navControl = css(_templateObject2());

var BaseMap = function (_Component) {
  _inherits(BaseMap, _Component);

  function BaseMap(props) {
    var _this;

    _classCallCheck(this, BaseMap);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(BaseMap).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "onHover", function (_ref) {
      var object = _ref.object,
          x = _ref.x,
          y = _ref.y;

      _this.setState({
        tooltipInfo: object,
        x: x,
        y: y
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onViewportChange", function (viewport) {
      _this.setState(function (prevState) {
        return {
          viewport: _objectSpread({}, prevState.viewport, viewport)
        };
      });
    });

    _this.state = {
      viewport: {
        longitude: props.initialLongitude,
        latitude: props.initialLatitude,
        zoom: props.initialZoom,
        minZoom: 6,
        maxZoom: 20,
        pitch: props.initialPitch,
        bearing: 0,
        scrollZoom: true
      },
      tooltipInfo: null,
      x: null,
      y: null,
      mounted: false
    };
    _this.mapRef = createRef();
    return _this;
  }

  _createClass(BaseMap, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setState({
        mounted: true
      });
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(props) {
      var updateViewport = props.updateViewport;

      if (updateViewport) {
        var updatedViewportProps = {
          zoom: props.initialZoom,
          pitch: props.initialPitch,
          longitude: props.initialLongitude,
          latitude: props.initialLatitude
        };
        Object.keys(updatedViewportProps).forEach(function (key) {
          if (updatedViewportProps[key] == null) {
            delete updatedViewportProps[key];
          }
        });
        this.setState(function (prevState) {
          return {
            viewport: _objectSpread({}, prevState.viewport, updatedViewportProps)
          };
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var previousMapboxData = prevProps.mapboxData,
          previousMapboxLayerOptions = prevProps.mapboxLayerOptions;
      var _this$props = this.props,
          mapboxData = _this$props.mapboxData,
          mapboxDataId = _this$props.mapboxDataId,
          mapboxLayerOptions = _this$props.mapboxLayerOptions,
          mapboxLayerId = _this$props.mapboxLayerId;

      if (!isEqual(previousMapboxData, mapboxData)) {
        var map = this.mapRef.current.getMap();
        map.getSource(mapboxDataId).setData(mapboxData);
      }

      if (!isEqual(previousMapboxLayerOptions, mapboxLayerOptions)) {
        var _map = this.mapRef.current.getMap();

        var updatedProperties = Object.keys(mapboxLayerOptions).filter(function (m) {
          return !isEqual(previousMapboxLayerOptions[m], mapboxLayerOptions[m]);
        });
        updatedProperties.forEach(function (p) {
          return _map.setPaintProperty(mapboxLayerId, p, mapboxLayerOptions[p]);
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state = this.state,
          viewport = _this$state.viewport,
          tooltipInfo = _this$state.tooltipInfo,
          x = _this$state.x,
          y = _this$state.y,
          mounted = _this$state.mounted;
      var _this$props2 = this.props,
          height = _this$props2.height,
          containerHeight = _this$props2.containerHeight,
          containerWidth = _this$props2.containerWidth,
          civicMapStyle = _this$props2.civicMapStyle,
          mapboxToken = _this$props2.mapboxToken,
          navigation = _this$props2.navigation,
          geocoder = _this$props2.geocoder,
          locationMarker = _this$props2.locationMarker,
          geocoderOptions = _this$props2.geocoderOptions,
          geocoderOnChange = _this$props2.geocoderOnChange,
          mapGLOptions = _this$props2.mapGLOptions,
          children = _this$props2.children,
          useContainerHeight = _this$props2.useContainerHeight,
          onBaseMapClick = _this$props2.onBaseMapClick,
          mapboxData = _this$props2.mapboxData,
          mapboxDataId = _this$props2.mapboxDataId,
          mapboxLayerType = _this$props2.mapboxLayerType,
          mapboxLayerOptions = _this$props2.mapboxLayerOptions,
          mapboxLayerId = _this$props2.mapboxLayerId,
          locationMarkerCoord = _this$props2.locationMarkerCoord,
          animate = _this$props2.animate,
          animationDuration = _this$props2.animationDuration,
          scaleBar = _this$props2.scaleBar,
          scaleBarOptions = _this$props2.scaleBarOptions;
      viewport.width = containerWidth || 500;
      viewport.height = useContainerHeight ? containerHeight : height;
      var childrenLayers = React.Children.map(children, function (child) {
        return React.cloneElement(child, {
          viewport: viewport,
          tooltipInfo: tooltipInfo,
          x: x,
          y: y,
          onHover: function onHover(info) {
            return _this2.onHover(info);
          }
        });
      });

      var onMapLoad = function onMapLoad() {
        var map = _this2.mapRef.current.getMap();

        if (scaleBar) {
          map.addControl(new mapboxgl.ScaleControl({
            maxWidth: scaleBarOptions.maxWidth,
            unit: scaleBarOptions.units
          }));
        }

        if (!mapboxData || !mapboxLayerType || !mapboxLayerOptions) return;
        map.addSource(mapboxDataId, {
          type: "geojson",
          data: mapboxData
        });
        map.addLayer({
          id: mapboxLayerId,
          type: mapboxLayerType,
          source: mapboxDataId,
          paint: mapboxLayerOptions
        }, "waterway-label");
      };

      var baseMapboxStyleURL = civicMapStyle === "light" ? CIVIC_LIGHT : civicMapStyle === "dark" ? CIVIC_DARK : CIVIC_LIGHT;
      var animationProps = !animate ? {} : {
        transitionDuration: animationDuration,
        transitionInterpolator: new FlyToInterpolator()
      };
      return React.createElement("div", {
        className: mapWrapper
      }, React.createElement(MapGL, _extends({
        className: "MapGL"
      }, viewport, animationProps, {
        mapStyle: baseMapboxStyleURL,
        mapboxApiAccessToken: mapboxToken,
        onViewportChange: function onViewportChange(newViewport) {
          return _this2.onViewportChange(newViewport);
        },
        ref: this.mapRef
      }, mapGLOptions, {
        onClick: onBaseMapClick,
        onLoad: onMapLoad
      }), React.createElement("div", {
        className: navControl
      }, navigation && React.createElement(NavigationControl, {
        className: "NavigationControl",
        onViewportChange: function onViewportChange(newViewport) {
          return _this2.onViewportChange(newViewport);
        }
      })), locationMarker && React.createElement(Marker, {
        latitude: locationMarkerCoord.latitude,
        longitude: locationMarkerCoord.longitude,
        offsetLeft: -20,
        offsetTop: -10
      }, React.createElement("span", {
        role: "img",
        "aria-label": "star"
      }, "\u274C")), geocoder && mounted && React.createElement(Geocoder, {
        mapRef: {
          current: this.mapRef.current
        },
        mapboxApiAccessToken: mapboxToken,
        onViewportChange: function onViewportChange(newViewport) {
          _this2.onViewportChange(newViewport);

          !!geocoderOnChange && geocoderOnChange(newViewport);
        },
        options: _objectSpread({}, geocoderOptions)
      }), childrenLayers));
    }
  }]);

  return BaseMap;
}(Component);

BaseMap.propTypes = {
  initialLongitude: PropTypes.number,
  initialLatitude: PropTypes.number,
  initialZoom: PropTypes.number,
  initialPitch: PropTypes.number,
  height: PropTypes.number,
  containerHeight: PropTypes.number,
  containerWidth: PropTypes.number,
  mapboxToken: PropTypes.string,
  civicMapStyle: PropTypes.string,
  navigation: PropTypes.bool,
  locationMarker: PropTypes.bool,
  locationMarkerCoord: PropTypes.shape({
    latitude: PropTypes.number,
    longitude: PropTypes.number
  }),
  geocoder: PropTypes.bool,
  geocoderOptions: PropTypes.shape({}),
  geocoderOnChange: PropTypes.func,
  mapGLOptions: PropTypes.shape({}),
  children: PropTypes.node,
  useContainerHeight: PropTypes.bool,
  updateViewport: PropTypes.bool,
  animate: PropTypes.bool,
  animationDuration: PropTypes.number,
  onBaseMapClick: PropTypes.func,
  mapboxDataId: PropTypes.string,
  mapboxData: PropTypes.shape({
    type: PropTypes.string,
    features: PropTypes.arrayOf(PropTypes.shape({}))
  }),
  mapboxLayerType: PropTypes.string,
  mapboxLayerId: PropTypes.string,
  mapboxLayerOptions: PropTypes.shape({}),
  scaleBar: PropTypes.bool,
  scaleBarOptions: PropTypes.shape({
    maxWidth: PropTypes.number,
    units: PropTypes.string
  })
};
BaseMap.defaultProps = {
  mapboxToken: MAPBOX_TOKEN,
  navigation: true,
  geocoder: false,
  useContainerHeight: false,
  updateViewport: true,
  animate: false,
  initialLongitude: -122.6765,
  initialLatitude: 45.5231,
  initialZoom: 9.5,
  initialPitch: 0,
  height: 500,
  locationMarkerCoord: {
    latitude: 0,
    longitude: 0
  },
  animationDuration: 1000,
  scaleBar: false
};
export default Dimensions()(BaseMap);