@globalfishingwatch/react-map-gl/dist/es5/components/geolocate-control.js

A React wrapper for MapboxGL-js and overlay API.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var React = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _globals = require("../utils/globals");

var _mapboxgl = _interopRequireDefault(require("../utils/mapboxgl"));

var _mapState = _interopRequireDefault(require("../utils/map-state"));

var _transitionManager = _interopRequireDefault(require("../utils/transition-manager"));

var _geolocateUtils = require("../utils/geolocate-utils");

var _useMapControl = _interopRequireWildcard(require("./use-map-control"));

var LINEAR_TRANSITION_PROPS = Object.assign({}, _transitionManager["default"].defaultProps, {
  transitionDuration: 500
});

var noop = function noop() {};

var propTypes = Object.assign({}, _useMapControl.mapControlPropTypes, {
  className: _propTypes["default"].string,
  style: _propTypes["default"].object,
  label: _propTypes["default"].string,
  auto: _propTypes["default"].bool,
  positionOptions: _propTypes["default"].object,
  fitBoundsOptions: _propTypes["default"].object,
  trackUserLocation: _propTypes["default"].bool,
  showUserLocation: _propTypes["default"].bool,
  showAccuracyCircle: _propTypes["default"].bool,
  onViewStateChange: _propTypes["default"].func,
  onViewportChange: _propTypes["default"].func,
  onGeolocate: _propTypes["default"].func
});
var defaultProps = Object.assign({}, _useMapControl.mapControlDefaultProps, {
  className: '',
  style: {},
  label: 'Geolocate',
  auto: false,
  positionOptions: {
    enableHighAccuracy: false,
    timeout: 6000
  },
  fitBoundsOptions: {
    maxZoom: 15
  },
  trackUserLocation: false,
  showUserLocation: true,
  showAccuracyCircle: true,
  onGeolocate: function onGeolocate() {}
});

function getBounds(position) {
  var center = new _mapboxgl["default"].LngLat(position.coords.longitude, position.coords.latitude);
  var radius = position.coords.accuracy;
  var bounds = center.toBounds(radius);
  return [[bounds._ne.lng, bounds._ne.lat], [bounds._sw.lng, bounds._sw.lat]];
}

function setupMapboxGeolocateControl(context, props, geolocateButton) {
  var control = new _mapboxgl["default"].GeolocateControl(props);
  control._container = _globals.document.createElement('div');
  control._map = {
    on: function on() {},
    _getUIString: function _getUIString() {
      return '';
    }
  };

  control._setupUI(true);

  control._geolocateButton = geolocateButton;
  var eventManager = context.eventManager;

  if (control.options.trackUserLocation && eventManager) {
    eventManager.on('panstart', function () {
      if (control._watchState === 'ACTIVE_LOCK') {
        control._watchState = 'BACKGROUND';
        geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background');
        geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');
      }
    });
  }

  control.on('geolocate', props.onGeolocate);
  return control;
}

function triggerGeolocate(context, props, control) {
  if (control) {
    control._map = context.map;
    control.options = props;
    control.trigger();
  }
}

function updateCamera(position, _ref) {
  var context = _ref.context,
      props = _ref.props;
  var bounds = getBounds(position);

  var _context$viewport$fit = context.viewport.fitBounds(bounds, props.fitBoundsOptions),
      longitude = _context$viewport$fit.longitude,
      latitude = _context$viewport$fit.latitude,
      zoom = _context$viewport$fit.zoom;

  var newViewState = Object.assign({}, context.viewport, {
    longitude: longitude,
    latitude: latitude,
    zoom: zoom
  });
  var mapState = new _mapState["default"](newViewState);
  var viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);
  var onViewportChange = props.onViewportChange || context.onViewportChange || noop;
  var onViewStateChange = props.onViewStateChange || context.onViewStateChange || noop;
  onViewStateChange({
    viewState: viewState
  });
  onViewportChange(viewState);
}

function GeolocateControl(props) {
  var thisRef = (0, _useMapControl["default"])(props);
  var context = thisRef.context,
      containerRef = thisRef.containerRef;
  var geolocateButtonRef = (0, React.useRef)(null);

  var _useState = (0, React.useState)(null),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      mapboxGeolocateControl = _useState2[0],
      createMapboxGeolocateControl = _useState2[1];

  var _useState3 = (0, React.useState)(false),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      supportsGeolocation = _useState4[0],
      setSupportsGeolocation = _useState4[1];

  (0, React.useEffect)(function () {
    var control;
    (0, _geolocateUtils.isGeolocationSupported)().then(function (result) {
      setSupportsGeolocation(result);

      if (geolocateButtonRef.current) {
        control = setupMapboxGeolocateControl(context, props, geolocateButtonRef.current);

        control._updateCamera = function (position) {
          return updateCamera(position, thisRef);
        };

        createMapboxGeolocateControl(control);
      }
    });
    return function () {
      control._clearWatch();
    };
  }, []);
  (0, React.useEffect)(function () {
    if (props.auto) {
      triggerGeolocate(context, props, mapboxGeolocateControl);
    }
  }, [mapboxGeolocateControl, props.auto]);
  var className = props.className,
      style = props.style,
      label = props.label,
      trackUserLocation = props.trackUserLocation;
  return React.createElement("div", null, React.createElement("div", {
    key: "geolocate-control",
    className: "mapboxgl-ctrl mapboxgl-ctrl-group ".concat(className),
    ref: containerRef,
    style: style
  }, React.createElement("button", {
    key: "geolocate",
    className: "mapboxgl-ctrl-icon mapboxgl-ctrl-geolocate",
    ref: geolocateButtonRef,
    disabled: !supportsGeolocation,
    "aria-pressed": !trackUserLocation,
    type: "button",
    title: label,
    onClick: function onClick() {
      return triggerGeolocate(context, props, mapboxGeolocateControl);
    }
  }, React.createElement("span", {
    className: "mapboxgl-ctrl-icon",
    "aria-hidden": "true"
  }))));
}

GeolocateControl.propTypes = propTypes;
GeolocateControl.defaultProps = defaultProps;
var _default = GeolocateControl;
exports["default"] = _default;
//# sourceMappingURL=geolocate-control.js.map