@mapbox/react-map-gl
Version:
A React wrapper for MapboxGL-js and overlay API.
255 lines (213 loc) • 10.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _viewportMercatorProject = _interopRequireDefault(require("viewport-mercator-project"));
var _mapboxgl = _interopRequireDefault(require("../utils/mapboxgl"));
var _baseControl = _interopRequireDefault(require("./base-control"));
var _marker = _interopRequireDefault(require("./marker"));
var _mapState = _interopRequireDefault(require("../utils/map-state"));
var _transitionManager = _interopRequireDefault(require("../utils/transition-manager"));
var _geolocateUtils = require("../utils/geolocate-utils");
/* global window */
var LINEAR_TRANSITION_PROPS = Object.assign({}, _transitionManager["default"].defaultProps, {
transitionDuration: 500
});
var propTypes = Object.assign({}, _baseControl["default"].propTypes, {
// Custom className
className: _propTypes["default"].string,
style: _propTypes["default"].object,
// mapbox geolocate options
// https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol
positionOptions: _propTypes["default"].object,
fitBoundsOptions: _propTypes["default"].object,
trackUserLocation: _propTypes["default"].bool,
showUserLocation: _propTypes["default"].bool,
// Callbacks fired when the user interacted with the map. The object passed to the callbacks
// contains viewport properties such as `longitude`, `latitude`, `zoom` etc.
onViewStateChange: _propTypes["default"].func,
onViewportChange: _propTypes["default"].func
});
var defaultProps = Object.assign({}, _baseControl["default"].defaultProps, {
className: '',
style: {},
// mapbox geolocate options
positionOptions: null,
fitBoundsOptions: null,
trackUserLocation: false,
showUserLocation: true,
// viewport handlers
onViewStateChange: function onViewStateChange() {},
onViewportChange: function onViewportChange() {}
});
var GeolocateControl =
/*#__PURE__*/
function (_BaseControl) {
(0, _inherits2["default"])(GeolocateControl, _BaseControl);
function GeolocateControl(props) {
var _this;
(0, _classCallCheck2["default"])(this, GeolocateControl);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(GeolocateControl).call(this, props));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_containerRef", (0, _react.createRef)());
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_geolocateButtonRef", (0, _react.createRef)());
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_markerRef", (0, _react.createRef)());
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_setupMapboxGeolocateControl", function (supportsGeolocation) {
if (!supportsGeolocation) {
/* eslint-disable no-console, no-undef */
console.warn('Geolocation support is not available, the GeolocateControl will not be visible.');
/* eslint-enable no-console, no-undef */
return;
}
var controlOptions = {};
['positionOptions', 'fitBoundsOptions', 'trackUserLocation', 'showUserLocation'].forEach(function (prop) {
// For null option, use Mapbox default value
if (prop in _this.props && _this.props[prop] !== null) {
controlOptions[prop] = _this.props[prop];
}
});
_this._mapboxGeolocateControl = new _mapboxgl["default"].GeolocateControl(controlOptions); // the following re-implement MapboxGeolocateControl's _setupUI
// replace mapbox internal prop
_this._mapboxGeolocateControl._watchState = 'OFF'; // replace mapbox internal UI elements
_this._mapboxGeolocateControl._geolocateButton = _this._geolocateButtonRef.current; // replace mapbox internal methods
_this._mapboxGeolocateControl._updateMarker = _this._updateMarker;
_this._mapboxGeolocateControl._updateCamera = _this._updateCamera;
_this._mapboxGeolocateControl._setup = true;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onClickGeolocate", function () {
return _this._mapboxGeolocateControl.trigger();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_updateMarker", function (position) {
if (position) {
_this.setState({
markerPosition: position.coords
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getBounds", function (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]];
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_updateCamera", function (position) {
var viewport = _this._context.viewport;
var bounds = _this._getBounds(position);
var _fitBounds = new _viewportMercatorProject["default"](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["default"](newViewState);
var viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS); // Call new style callback
_this.props.onViewStateChange({
viewState: viewState
}); // Call old style callback
_this.props.onViewportChange(viewState);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderButton", function (type, label, callback, children) {
return (0, _react.createElement)('button', {
key: type,
className: "mapboxgl-ctrl-icon mapboxgl-ctrl-".concat(type),
ref: _this._geolocateButtonRef,
type: 'button',
title: label,
onClick: callback,
children: children
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderMarker", function () {
var showUserLocation = _this.props.showUserLocation;
var markerPosition = _this.state.markerPosition;
if (!showUserLocation || !markerPosition) {
return null;
}
return (0, _react.createElement)(_marker["default"], {
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
});
});
_this.state = {
supportsGeolocation: null,
markerPosition: null
};
return _this;
}
(0, _createClass2["default"])(GeolocateControl, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
(0, _geolocateUtils.isGeolocationSupported)().then(function (result) {
_this2.setState({
supportsGeolocation: result
});
_this2._setupMapboxGeolocateControl(result);
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
// MapboxGeolocateControl needs manipulate the style of Marker's container
var markerRef = this._markerRef.current;
if (this._mapboxGeolocateControl && markerRef) {
this._mapboxGeolocateControl._dotElement = markerRef._containerRef.current;
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
// re-implement MapboxGeolocateControl's _onRemove
// clear the geolocation watch if exists
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 (0, _react.createElement)('div', null, [this._renderMarker(), (0, _react.createElement)('div', {
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["default"]);
exports["default"] = GeolocateControl;
(0, _defineProperty2["default"])(GeolocateControl, "propTypes", propTypes);
(0, _defineProperty2["default"])(GeolocateControl, "defaultProps", defaultProps);
//# sourceMappingURL=geolocate-control.js.map