@mapbox/react-map-gl
Version:
A React wrapper for MapboxGL-js and overlay API.
335 lines (287 loc) • 11.5 kB
JavaScript
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";
// Copyright (c) 2015 Uber Technologies, Inc.
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { PureComponent, createElement, createRef } from 'react';
import PropTypes from 'prop-types';
import { normalizeStyle } from '../utils/style-utils';
import WebMercatorViewport from 'viewport-mercator-project';
import AutoSizer from 'react-virtualized-auto-sizer';
import Mapbox from '../mapbox/mapbox';
import mapboxgl from '../utils/mapboxgl';
import { checkVisibilityConstraints } from '../utils/map-constraints';
import { MAPBOX_LIMITS } from '../utils/map-state';
import MapContext from './map-context';
/* eslint-disable max-len */
var TOKEN_DOC_URL = 'https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens';
var NO_TOKEN_WARNING = 'A valid API access token is required to use Mapbox data';
/* eslint-disable max-len */
function noop() {}
var UNAUTHORIZED_ERROR_CODE = 401;
var CONTAINER_STYLE = {
position: 'absolute',
width: '100%',
height: '100%',
overflow: 'hidden'
};
var propTypes = Object.assign({}, Mapbox.propTypes, {
/** The dimensions of the map **/
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Callback when map size changes **/
onResize: PropTypes.func,
/** There are known issues with style diffing. As stopgap, add option to prevent style diffing. */
preventStyleDiffing: PropTypes.bool,
/** Hide invalid token warning even if request fails */
disableTokenWarning: PropTypes.bool,
/** Whether the map is visible */
visible: PropTypes.bool,
/** Custom class name for the map */
className: PropTypes.string,
/** Custom CSS for the container */
style: PropTypes.object,
/** Advanced features */
// Contraints for displaying the map. If not met, then the map is hidden.
// Experimental! May be changed in minor version updates.
visibilityConstraints: PropTypes.object
});
var defaultProps = Object.assign({}, Mapbox.defaultProps, {
preventStyleDiffing: false,
disableTokenWarning: false,
visible: true,
onResize: noop,
className: '',
style: null,
visibilityConstraints: MAPBOX_LIMITS
});
var StaticMap =
/*#__PURE__*/
function (_PureComponent) {
_inherits(StaticMap, _PureComponent);
function StaticMap() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, StaticMap);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StaticMap)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "state", {
accessTokenInvalid: false
});
_defineProperty(_assertThisInitialized(_this), "_mapbox", null);
_defineProperty(_assertThisInitialized(_this), "_map", null);
_defineProperty(_assertThisInitialized(_this), "_mapboxMapRef", createRef());
_defineProperty(_assertThisInitialized(_this), "_mapContainerRef", createRef());
_defineProperty(_assertThisInitialized(_this), "_queryParams", {});
_defineProperty(_assertThisInitialized(_this), "_width", 0);
_defineProperty(_assertThisInitialized(_this), "_height", 0);
_defineProperty(_assertThisInitialized(_this), "getMap", function () {
return _this._map;
});
_defineProperty(_assertThisInitialized(_this), "queryRenderedFeatures", function (geometry) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return _this._map.queryRenderedFeatures(geometry, options);
});
_defineProperty(_assertThisInitialized(_this), "_mapboxMapError", function (evt) {
var statusCode = evt.error && evt.error.status || evt.status;
if (statusCode === UNAUTHORIZED_ERROR_CODE && !_this.state.accessTokenInvalid) {
// Mapbox throws unauthorized error - invalid token
console.error(NO_TOKEN_WARNING); // eslint-disable-line
_this.setState({
accessTokenInvalid: true
});
}
_this.props.onError(evt);
});
return _this;
}
_createClass(StaticMap, [{
key: "componentDidMount",
value: function componentDidMount() {
if (!StaticMap.supported()) {
return;
}
var mapStyle = this.props.mapStyle; // $FlowFixMe
this._mapbox = new Mapbox(Object.assign({}, this.props, {
mapboxgl: mapboxgl,
// Handle to mapbox-gl library
width: this._width,
height: this._height,
container: this._mapboxMapRef.current,
onError: this._mapboxMapError,
mapStyle: normalizeStyle(mapStyle)
}));
this._map = this._mapbox.getMap();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (this._mapbox) {
this._updateMapStyle(prevProps, this.props);
this._updateMapProps(this.props);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this._mapbox) {
this._mapbox.finalize();
this._mapbox = null;
this._map = null;
}
}
}, {
key: "_updateMapSize",
// Note: needs to be called after render (e.g. in componentDidUpdate)
value: function _updateMapSize(width, height) {
if (this._width !== width || this._height !== height) {
this._width = width;
this._height = height;
this._updateMapProps(this.props);
}
}
}, {
key: "_updateMapStyle",
value: function _updateMapStyle(oldProps, newProps) {
var mapStyle = newProps.mapStyle;
var oldMapStyle = oldProps.mapStyle;
if (mapStyle !== oldMapStyle) {
this._map.setStyle(normalizeStyle(mapStyle), {
diff: !this.props.preventStyleDiffing
});
}
}
}, {
key: "_updateMapProps",
value: function _updateMapProps(props) {
if (!this._mapbox) {
return;
}
this._mapbox.setProps(Object.assign({}, props, {
width: this._width,
height: this._height
}));
} // Handle map error
}, {
key: "_renderNoTokenWarning",
value: function _renderNoTokenWarning() {
if (this.state.accessTokenInvalid && !this.props.disableTokenWarning) {
var style = {
position: 'absolute',
left: 0,
top: 0
};
return createElement('div', {
key: 'warning',
id: 'no-token-warning',
style: style
}, [createElement('h3', {
key: 'header'
}, NO_TOKEN_WARNING), createElement('div', {
key: 'text'
}, 'For information on setting up your basemap, read'), createElement('a', {
key: 'link',
href: TOKEN_DOC_URL
}, 'Note on Map Tokens')]);
}
return null;
}
}, {
key: "_renderOverlays",
value: function _renderOverlays(dimensions) {
var _this2 = this;
var _dimensions$width = dimensions.width,
width = _dimensions$width === void 0 ? Number(this.props.width) : _dimensions$width,
_dimensions$height = dimensions.height,
height = _dimensions$height === void 0 ? Number(this.props.height) : _dimensions$height;
this._updateMapSize(width, height);
return createElement(MapContext.Consumer, null, function (interactiveContext) {
var context = Object.assign({}, interactiveContext, {
// $FlowFixMe
viewport: new WebMercatorViewport(Object.assign({}, _this2.props, _this2.props.viewState, {
width: width,
height: height
})),
map: _this2._map,
mapContainer: interactiveContext.mapContainer || _this2._mapContainerRef.current
});
return createElement(MapContext.Provider, {
value: context
}, createElement('div', {
key: 'map-overlays',
className: 'overlays',
style: CONTAINER_STYLE,
children: _this2.props.children
}));
});
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
className = _this$props.className,
width = _this$props.width,
height = _this$props.height,
style = _this$props.style,
visibilityConstraints = _this$props.visibilityConstraints;
var mapContainerStyle = Object.assign({
position: 'relative'
}, style, {
width: width,
height: height
});
var visible = this.props.visible && checkVisibilityConstraints(this.props.viewState || this.props, visibilityConstraints);
var mapStyle = Object.assign({}, CONTAINER_STYLE, {
visibility: visible ? 'inherit' : 'hidden'
});
return createElement('div', {
key: 'map-container',
style: mapContainerStyle,
ref: this._mapContainerRef,
children: [createElement('div', {
key: 'map-mapbox',
ref: this._mapboxMapRef,
style: mapStyle,
className: className
}), // AutoSizer is a pure component and does not rerender when map props change
// rebind the callback so that it's triggered every render pass
createElement(AutoSizer, {
key: 'autosizer',
disableWidth: Number.isFinite(width),
disableHeight: Number.isFinite(height),
onResize: this.props.onResize
}, this._renderOverlays.bind(this)), this._renderNoTokenWarning()]
});
}
}], [{
key: "supported",
value: function supported() {
return mapboxgl && mapboxgl.supported();
}
}]);
return StaticMap;
}(PureComponent);
_defineProperty(StaticMap, "propTypes", propTypes);
_defineProperty(StaticMap, "defaultProps", defaultProps);
export { StaticMap as default };
//# sourceMappingURL=static-map.js.map