react-map-gl/dist/esm/components/geolocate-control.js

A React wrapper for MapboxGL-js and overlay API.

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { createElement, createRef } from 'react';
import PropTypes from 'prop-types';
import WebMercatorViewport from 'viewport-mercator-project';
import mapboxgl from '../utils/mapboxgl';
import BaseControl from './base-control';
import Marker from './marker';
import MapState from '../utils/map-state';
import TransitionManager from '../utils/transition-manager';
import { isGeolocationSupported } from '../utils/geolocate-utils';
var LINEAR_TRANSITION_PROPS = Object.assign({}, TransitionManager.defaultProps, {
  transitionDuration: 500
});

var noop = function noop() {};

var propTypes = Object.assign({}, BaseControl.propTypes, {
  className: PropTypes.string,
  style: PropTypes.object,
  positionOptions: PropTypes.object,
  fitBoundsOptions: PropTypes.object,
  trackUserLocation: PropTypes.bool,
  showUserLocation: PropTypes.bool,
  onViewStateChange: PropTypes.func,
  onViewportChange: PropTypes.func
});
var defaultProps = Object.assign({}, BaseControl.defaultProps, {
  className: '',
  style: {},
  positionOptions: null,
  fitBoundsOptions: null,
  trackUserLocation: false,
  showUserLocation: true
});

var GeolocateControl = function (_BaseControl) {
  _inherits(GeolocateControl, _BaseControl);

  function GeolocateControl() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, GeolocateControl);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(GeolocateControl)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "state", {
      supportsGeolocation: false,
      markerPosition: null
    });

    _defineProperty(_assertThisInitialized(_this), "_mapboxGeolocateControl", null);

    _defineProperty(_assertThisInitialized(_this), "_geolocateButtonRef", createRef());

    _defineProperty(_assertThisInitialized(_this), "_markerRef", createRef());

    _defineProperty(_assertThisInitialized(_this), "_setupMapboxGeolocateControl", function (supportsGeolocation) {
      if (!supportsGeolocation) {
        console.warn('Geolocation support is not available, the GeolocateControl will not be visible.');
        return;
      }

      var controlOptions = {};
      ['positionOptions', 'fitBoundsOptions', 'trackUserLocation', 'showUserLocation'].forEach(function (prop) {
        if (prop in _this.props && _this.props[prop] !== null) {
          controlOptions[prop] = _this.props[prop];
        }
      });
      _this._mapboxGeolocateControl = new mapboxgl.GeolocateControl(controlOptions);
      _this._mapboxGeolocateControl._watchState = 'OFF';
      _this._mapboxGeolocateControl._geolocateButton = _this._geolocateButtonRef.current;
      _this._mapboxGeolocateControl._updateMarker = _this._updateMarker;
      _this._mapboxGeolocateControl._updateCamera = _this._updateCamera;
      _this._mapboxGeolocateControl._setup = true;
    });

    _defineProperty(_assertThisInitialized(_this), "_onClickGeolocate", function () {
      return _this._mapboxGeolocateControl.trigger();
    });

    _defineProperty(_assertThisInitialized(_this), "_updateMarker", function (position) {
      if (position) {
        _this.setState({
          markerPosition: position.coords
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "_getBounds", function (position) {
      var center = new mapboxgl.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]];
    });

    _defineProperty(_assertThisInitialized(_this), "_updateCamera", function (position) {
      var viewport = _this._context.viewport;

      var bounds = _this._getBounds(position);

      var _fitBounds = new WebMercatorViewport(viewport).fitBounds(bounds),
          longitude = _fitBounds.longitude,
          latitude = _fitBounds.latitude,
          zoom = _fitBounds.zoom;

      var newViewState = Object.assign({}, viewport, {
        longitude: longitude,
        latitude: latitude,
        zoom: zoom
      });
      var mapState = new MapState(newViewState);
      var viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);
      var onViewportChange = _this.props.onViewportChange || _this._context.onViewportChange || noop;
      var onViewStateChange = _this.props.onViewStateChange || _this._context.onViewStateChange || noop;
      onViewStateChange({
        viewState: viewState
      });
      onViewportChange(viewState);
    });

    _defineProperty(_assertThisInitialized(_this), "_renderButton", function (type, label, callback) {
      return createElement('button', {
        key: type,
        className: "mapboxgl-ctrl-icon mapboxgl-ctrl-".concat(type),
        ref: _this._geolocateButtonRef,
        type: 'button',
        title: label,
        onClick: callback
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_renderMarker", function () {
      var showUserLocation = _this.props.showUserLocation;
      var markerPosition = _this.state.markerPosition;

      if (!showUserLocation || !markerPosition) {
        return null;
      }

      return createElement(Marker, {
        key: 'location-maker',
        ref: _this._markerRef,
        className: 'mapboxgl-user-location-dot',
        longitude: markerPosition.longitude,
        latitude: markerPosition.latitude,
        onContextMenu: function onContextMenu(e) {
          return e.preventDefault();
        },
        captureDrag: false,
        captureDoubleClick: false
      });
    });

    return _this;
  }

  _createClass(GeolocateControl, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      isGeolocationSupported().then(function (result) {
        _this2.setState({
          supportsGeolocation: result
        });

        _this2._setupMapboxGeolocateControl(result);
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var markerRef = this._markerRef.current;

      if (this._mapboxGeolocateControl && markerRef) {
        this._mapboxGeolocateControl._dotElement = markerRef._containerRef.current;
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var geolocationWatchID = this._mapboxGeolocateControl._geolocationWatchID;

      if (geolocationWatchID !== undefined) {
        window.navigator.geolocation.clearWatch(geolocationWatchID);
        this._mapboxGeolocateControl._geolocationWatchID = undefined;
      }
    }
  }, {
    key: "_render",
    value: function _render() {
      if (!this.state.supportsGeolocation) {
        return null;
      }

      var _this$props = this.props,
          className = _this$props.className,
          style = _this$props.style;
      return createElement('div', null, [this._renderMarker(), createElement('div', {
        key: 'geolocate-control',
        className: "mapboxgl-ctrl mapboxgl-ctrl-group ".concat(className),
        ref: this._containerRef,
        style: style,
        onContextMenu: function onContextMenu(e) {
          return e.preventDefault();
        }
      }, this._renderButton('geolocate', 'Geolocate', this._onClickGeolocate))]);
    }
  }]);

  return GeolocateControl;
}(BaseControl);

_defineProperty(GeolocateControl, "propTypes", propTypes);

_defineProperty(GeolocateControl, "defaultProps", defaultProps);

export { GeolocateControl as default };
//# sourceMappingURL=geolocate-control.js.map