@mapbox/react-map-gl
Version:
A React wrapper for MapboxGL-js and overlay API.
298 lines (249 loc) • 9.43 kB
JavaScript
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 */
const TOKEN_DOC_URL = 'https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens';
const NO_TOKEN_WARNING = 'A valid API access token is required to use Mapbox data';
/* eslint-disable max-len */
function noop() {}
const UNAUTHORIZED_ERROR_CODE = 401;
const CONTAINER_STYLE = {
position: 'absolute',
width: '100%',
height: '100%',
overflow: 'hidden'
};
const 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
});
const defaultProps = Object.assign({}, Mapbox.defaultProps, {
preventStyleDiffing: false,
disableTokenWarning: false,
visible: true,
onResize: noop,
className: '',
style: null,
visibilityConstraints: MAPBOX_LIMITS
});
export default class StaticMap extends PureComponent {
constructor() {
var _this;
super(...arguments);
_this = this;
_defineProperty(this, "state", {
accessTokenInvalid: false
});
_defineProperty(this, "_mapbox", null);
_defineProperty(this, "_map", null);
_defineProperty(this, "_mapboxMapRef", createRef());
_defineProperty(this, "_mapContainerRef", createRef());
_defineProperty(this, "_queryParams", {});
_defineProperty(this, "_width", 0);
_defineProperty(this, "_height", 0);
_defineProperty(this, "getMap", () => {
return this._map;
});
_defineProperty(this, "queryRenderedFeatures", function (geometry) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return _this._map.queryRenderedFeatures(geometry, options);
});
_defineProperty(this, "_mapboxMapError", evt => {
const 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);
});
}
static supported() {
return mapboxgl && mapboxgl.supported();
}
componentDidMount() {
if (!StaticMap.supported()) {
return;
}
const mapStyle = this.props.mapStyle; // $FlowFixMe
this._mapbox = new Mapbox(Object.assign({}, this.props, {
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();
}
componentDidUpdate(prevProps) {
if (this._mapbox) {
this._updateMapStyle(prevProps, this.props);
this._updateMapProps(this.props);
}
}
componentWillUnmount() {
if (this._mapbox) {
this._mapbox.finalize();
this._mapbox = null;
this._map = null;
}
}
// Note: needs to be called after render (e.g. in componentDidUpdate)
_updateMapSize(width, height) {
if (this._width !== width || this._height !== height) {
this._width = width;
this._height = height;
this._updateMapProps(this.props);
}
}
_updateMapStyle(oldProps, newProps) {
const mapStyle = newProps.mapStyle;
const oldMapStyle = oldProps.mapStyle;
if (mapStyle !== oldMapStyle) {
this._map.setStyle(normalizeStyle(mapStyle), {
diff: !this.props.preventStyleDiffing
});
}
}
_updateMapProps(props) {
if (!this._mapbox) {
return;
}
this._mapbox.setProps(Object.assign({}, props, {
width: this._width,
height: this._height
}));
} // Handle map error
_renderNoTokenWarning() {
if (this.state.accessTokenInvalid && !this.props.disableTokenWarning) {
const style = {
position: 'absolute',
left: 0,
top: 0
};
return createElement('div', {
key: 'warning',
id: 'no-token-warning',
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;
}
_renderOverlays(dimensions) {
const _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, interactiveContext => {
const context = Object.assign({}, interactiveContext, {
// $FlowFixMe
viewport: new WebMercatorViewport(Object.assign({}, this.props, this.props.viewState, {
width,
height
})),
map: this._map,
mapContainer: interactiveContext.mapContainer || this._mapContainerRef.current
});
return createElement(MapContext.Provider, {
value: context
}, createElement('div', {
key: 'map-overlays',
className: 'overlays',
style: CONTAINER_STYLE,
children: this.props.children
}));
});
}
render() {
const _this$props = this.props,
className = _this$props.className,
width = _this$props.width,
height = _this$props.height,
style = _this$props.style,
visibilityConstraints = _this$props.visibilityConstraints;
const mapContainerStyle = Object.assign({
position: 'relative'
}, style, {
width,
height
});
const visible = this.props.visible && checkVisibilityConstraints(this.props.viewState || this.props, visibilityConstraints);
const 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
}), // 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()]
});
}
}
_defineProperty(StaticMap, "propTypes", propTypes);
_defineProperty(StaticMap, "defaultProps", defaultProps);
//# sourceMappingURL=static-map.js.map