@mapbox/react-map-gl
Version:
A React wrapper for MapboxGL-js and overlay API.
417 lines (369 loc) • 14.1 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.MAPBOX_LIMITS = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _viewportMercatorProject = _interopRequireWildcard(require("viewport-mercator-project"));
var _transition = require("./transition");
var _mathUtils = require("./math-utils");
var _assert = _interopRequireDefault(require("./assert"));
// MAPBOX LIMITS
var MAPBOX_LIMITS = {
minZoom: 0,
maxZoom: 24,
minPitch: 0,
maxPitch: 60
};
exports.MAPBOX_LIMITS = MAPBOX_LIMITS;
var DEFAULT_STATE = {
pitch: 0,
bearing: 0,
altitude: 1.5
};
var MapState =
/*#__PURE__*/
function () {
function MapState(_ref) {
var width = _ref.width,
height = _ref.height,
latitude = _ref.latitude,
longitude = _ref.longitude,
zoom = _ref.zoom,
_ref$bearing = _ref.bearing,
bearing = _ref$bearing === void 0 ? DEFAULT_STATE.bearing : _ref$bearing,
_ref$pitch = _ref.pitch,
pitch = _ref$pitch === void 0 ? DEFAULT_STATE.pitch : _ref$pitch,
_ref$altitude = _ref.altitude,
altitude = _ref$altitude === void 0 ? DEFAULT_STATE.altitude : _ref$altitude,
_ref$maxZoom = _ref.maxZoom,
maxZoom = _ref$maxZoom === void 0 ? MAPBOX_LIMITS.maxZoom : _ref$maxZoom,
_ref$minZoom = _ref.minZoom,
minZoom = _ref$minZoom === void 0 ? MAPBOX_LIMITS.minZoom : _ref$minZoom,
_ref$maxPitch = _ref.maxPitch,
maxPitch = _ref$maxPitch === void 0 ? MAPBOX_LIMITS.maxPitch : _ref$maxPitch,
_ref$minPitch = _ref.minPitch,
minPitch = _ref$minPitch === void 0 ? MAPBOX_LIMITS.minPitch : _ref$minPitch,
transitionDuration = _ref.transitionDuration,
transitionEasing = _ref.transitionEasing,
transitionInterpolator = _ref.transitionInterpolator,
transitionInterruption = _ref.transitionInterruption,
startPanLngLat = _ref.startPanLngLat,
startZoomLngLat = _ref.startZoomLngLat,
startBearing = _ref.startBearing,
startPitch = _ref.startPitch,
startZoom = _ref.startZoom;
(0, _classCallCheck2["default"])(this, MapState);
(0, _defineProperty2["default"])(this, "_viewportProps", void 0);
(0, _defineProperty2["default"])(this, "_interactiveState", void 0);
(0, _assert["default"])(Number.isFinite(width), '`width` must be supplied');
(0, _assert["default"])(Number.isFinite(height), '`height` must be supplied');
(0, _assert["default"])(Number.isFinite(longitude), '`longitude` must be supplied');
(0, _assert["default"])(Number.isFinite(latitude), '`latitude` must be supplied');
(0, _assert["default"])(Number.isFinite(zoom), '`zoom` must be supplied');
this._viewportProps = this._applyConstraints({
width: width,
height: height,
latitude: latitude,
longitude: longitude,
zoom: zoom,
bearing: bearing,
pitch: pitch,
altitude: altitude,
maxZoom: maxZoom,
minZoom: minZoom,
maxPitch: maxPitch,
minPitch: minPitch,
transitionDuration: transitionDuration,
transitionEasing: transitionEasing,
transitionInterpolator: transitionInterpolator,
transitionInterruption: transitionInterruption
});
this._interactiveState = {
startPanLngLat: startPanLngLat,
startZoomLngLat: startZoomLngLat,
startBearing: startBearing,
startPitch: startPitch,
startZoom: startZoom
};
}
(0, _createClass2["default"])(MapState, [{
key: "getViewportProps",
/* Public API */
value: function getViewportProps() {
return this._viewportProps;
}
}, {
key: "getInteractiveState",
value: function getInteractiveState() {
return this._interactiveState;
}
/**
* Start panning
* @param {[Number, Number]} pos - position on screen where the pointer grabs
*/
}, {
key: "panStart",
value: function panStart(_ref2) {
var pos = _ref2.pos;
return this._getUpdatedMapState({
startPanLngLat: this._unproject(pos)
});
}
/**
* Pan
* @param {[Number, Number]} pos - position on screen where the pointer is
* @param {[Number, Number], optional} startPos - where the pointer grabbed at
* the start of the operation. Must be supplied of `panStart()` was not called
*/
}, {
key: "pan",
value: function pan(_ref3) {
var pos = _ref3.pos,
startPos = _ref3.startPos;
var startPanLngLat = this._interactiveState.startPanLngLat || this._unproject(startPos);
if (!startPanLngLat) {
return this;
}
var _this$_calculateNewLn = this._calculateNewLngLat({
startPanLngLat: startPanLngLat,
pos: pos
}),
_this$_calculateNewLn2 = (0, _slicedToArray2["default"])(_this$_calculateNewLn, 2),
longitude = _this$_calculateNewLn2[0],
latitude = _this$_calculateNewLn2[1];
return this._getUpdatedMapState({
longitude: longitude,
latitude: latitude
});
}
/**
* End panning
* Must call if `panStart()` was called
*/
}, {
key: "panEnd",
value: function panEnd() {
return this._getUpdatedMapState({
startPanLngLat: null
});
}
/**
* Start rotating
* @param {[Number, Number]} pos - position on screen where the center is
*/
}, {
key: "rotateStart",
value: function rotateStart(_ref4) {
var pos = _ref4.pos;
return this._getUpdatedMapState({
startBearing: this._viewportProps.bearing,
startPitch: this._viewportProps.pitch
});
}
/**
* Rotate
* @param {Number} deltaScaleX - a number between [-1, 1] specifying the
* change to bearing.
* @param {Number} deltaScaleY - a number between [-1, 1] specifying the
* change to pitch. -1 sets to minPitch and 1 sets to maxPitch.
*/
}, {
key: "rotate",
value: function rotate(_ref5) {
var _ref5$deltaScaleX = _ref5.deltaScaleX,
deltaScaleX = _ref5$deltaScaleX === void 0 ? 0 : _ref5$deltaScaleX,
_ref5$deltaScaleY = _ref5.deltaScaleY,
deltaScaleY = _ref5$deltaScaleY === void 0 ? 0 : _ref5$deltaScaleY;
var _this$_interactiveSta = this._interactiveState,
startBearing = _this$_interactiveSta.startBearing,
startPitch = _this$_interactiveSta.startPitch;
if (!Number.isFinite(startBearing) || !Number.isFinite(startPitch)) {
return this;
}
var _this$_calculateNewPi = this._calculateNewPitchAndBearing({
deltaScaleX: deltaScaleX,
deltaScaleY: deltaScaleY,
startBearing: startBearing || 0,
startPitch: startPitch || 0
}),
pitch = _this$_calculateNewPi.pitch,
bearing = _this$_calculateNewPi.bearing;
return this._getUpdatedMapState({
bearing: bearing,
pitch: pitch
});
}
/**
* End rotating
* Must call if `rotateStart()` was called
*/
}, {
key: "rotateEnd",
value: function rotateEnd() {
return this._getUpdatedMapState({
startBearing: null,
startPitch: null
});
}
/**
* Start zooming
* @param {[Number, Number]} pos - position on screen where the center is
*/
}, {
key: "zoomStart",
value: function zoomStart(_ref6) {
var pos = _ref6.pos;
return this._getUpdatedMapState({
startZoomLngLat: this._unproject(pos),
startZoom: this._viewportProps.zoom
});
}
/**
* Zoom
* @param {[Number, Number]} pos - position on screen where the current center is
* @param {[Number, Number]} startPos - the center position at
* the start of the operation. Must be supplied of `zoomStart()` was not called
* @param {Number} scale - a number between [0, 1] specifying the accumulated
* relative scale.
*/
}, {
key: "zoom",
value: function zoom(_ref7) {
var pos = _ref7.pos,
startPos = _ref7.startPos,
scale = _ref7.scale;
(0, _assert["default"])(scale > 0, '`scale` must be a positive number'); // Make sure we zoom around the current mouse position rather than map center
var _this$_interactiveSta2 = this._interactiveState,
startZoom = _this$_interactiveSta2.startZoom,
startZoomLngLat = _this$_interactiveSta2.startZoomLngLat;
if (!Number.isFinite(startZoom)) {
// We have two modes of zoom:
// scroll zoom that are discrete events (transform from the current zoom level),
// and pinch zoom that are continuous events (transform from the zoom level when
// pinch started).
// If startZoom state is defined, then use the startZoom state;
// otherwise assume discrete zooming
startZoom = this._viewportProps.zoom;
startZoomLngLat = this._unproject(startPos) || this._unproject(pos);
} // take the start lnglat and put it where the mouse is down.
(0, _assert["default"])(startZoomLngLat, '`startZoomLngLat` prop is required ' + 'for zoom behavior to calculate where to position the map.');
var zoom = this._calculateNewZoom({
scale: scale,
startZoom: startZoom || 0
});
var zoomedViewport = new _viewportMercatorProject["default"](Object.assign({}, this._viewportProps, {
zoom: zoom
})); // $FlowFixMe
var _zoomedViewport$getMa = zoomedViewport.getMapCenterByLngLatPosition({
lngLat: startZoomLngLat,
pos: pos
}),
_zoomedViewport$getMa2 = (0, _slicedToArray2["default"])(_zoomedViewport$getMa, 2),
longitude = _zoomedViewport$getMa2[0],
latitude = _zoomedViewport$getMa2[1];
return this._getUpdatedMapState({
zoom: zoom,
longitude: longitude,
latitude: latitude
});
}
/**
* End zooming
* Must call if `zoomStart()` was called
*/
}, {
key: "zoomEnd",
value: function zoomEnd() {
return this._getUpdatedMapState({
startZoomLngLat: null,
startZoom: null
});
}
/* Private methods */
}, {
key: "_getUpdatedMapState",
value: function _getUpdatedMapState(newProps) {
// Update _viewportProps
return new MapState(Object.assign({}, this._viewportProps, this._interactiveState, newProps));
} // Apply any constraints (mathematical or defined by _viewportProps) to map state
}, {
key: "_applyConstraints",
value: function _applyConstraints(props) {
// Ensure zoom is within specified range
var maxZoom = props.maxZoom,
minZoom = props.minZoom,
zoom = props.zoom;
props.zoom = (0, _mathUtils.clamp)(zoom, minZoom, maxZoom); // Ensure pitch is within specified range
var maxPitch = props.maxPitch,
minPitch = props.minPitch,
pitch = props.pitch;
props.pitch = (0, _mathUtils.clamp)(pitch, minPitch, maxPitch);
Object.assign(props, (0, _viewportMercatorProject.normalizeViewportProps)(props));
return props;
}
}, {
key: "_unproject",
value: function _unproject(pos) {
var viewport = new _viewportMercatorProject["default"](this._viewportProps);
return pos && viewport.unproject(pos);
} // Calculate a new lnglat based on pixel dragging position
}, {
key: "_calculateNewLngLat",
value: function _calculateNewLngLat(_ref8) {
var startPanLngLat = _ref8.startPanLngLat,
pos = _ref8.pos;
var viewport = new _viewportMercatorProject["default"](this._viewportProps);
return viewport.getMapCenterByLngLatPosition({
lngLat: startPanLngLat,
pos: pos
});
} // Calculates new zoom
}, {
key: "_calculateNewZoom",
value: function _calculateNewZoom(_ref9) {
var scale = _ref9.scale,
startZoom = _ref9.startZoom;
var _this$_viewportProps = this._viewportProps,
maxZoom = _this$_viewportProps.maxZoom,
minZoom = _this$_viewportProps.minZoom;
var zoom = startZoom + Math.log2(scale);
return (0, _mathUtils.clamp)(zoom, minZoom, maxZoom);
} // Calculates a new pitch and bearing from a position (coming from an event)
}, {
key: "_calculateNewPitchAndBearing",
value: function _calculateNewPitchAndBearing(_ref10) {
var deltaScaleX = _ref10.deltaScaleX,
deltaScaleY = _ref10.deltaScaleY,
startBearing = _ref10.startBearing,
startPitch = _ref10.startPitch;
// clamp deltaScaleY to [-1, 1] so that rotation is constrained between minPitch and maxPitch.
// deltaScaleX does not need to be clamped as bearing does not have constraints.
deltaScaleY = (0, _mathUtils.clamp)(deltaScaleY, -1, 1);
var _this$_viewportProps2 = this._viewportProps,
minPitch = _this$_viewportProps2.minPitch,
maxPitch = _this$_viewportProps2.maxPitch;
var bearing = startBearing + 180 * deltaScaleX;
var pitch = startPitch;
if (deltaScaleY > 0) {
// Gradually increase pitch
pitch = startPitch + deltaScaleY * (maxPitch - startPitch);
} else if (deltaScaleY < 0) {
// Gradually decrease pitch
pitch = startPitch - deltaScaleY * (minPitch - startPitch);
}
return {
pitch: pitch,
bearing: bearing
};
}
}]);
return MapState;
}();
exports["default"] = MapState;
//# sourceMappingURL=map-state.js.map