rc-leaflet
Version:
React Map Components of Leaflet
221 lines (220 loc) • 9.5 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __values = (this && this.__values) || function (o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
};
import 'leaflet/dist/leaflet.css';
import './index.css';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import L from 'leaflet';
import { ClassValue as ClassValueType, CRS, Point, Zoom, Bounds, BoundsOptions } from '../../util/PropTypes';
import ThemeContext from '../Theme';
import Context from './Context';
var RCMap = /** @class */ (function (_super) {
__extends(RCMap, _super);
function RCMap() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
map: null,
theme: null
};
_this.ref = React.createRef();
_this.onZoom = function (e) { return _this.props.onZoom && _this.props.onZoom(e); };
_this.onZoomStart = function (e) { return _this.props.onZoomStart && _this.props.onZoomStart(e); };
_this.onZoomEnd = function (e) { return _this.props.onZoomEnd && _this.props.onZoomEnd(e); };
return _this;
}
RCMap.prototype.componentDidMount = function () {
var _a = this.props, center = _a.center, flyToBounds = _a.flyToBounds, bounds = _a.bounds, boundsOptions = _a.boundsOptions, onZoom = _a.onZoom, onZoomStart = _a.onZoomStart, onZoomEnd = _a.onZoomEnd, onInit = _a.onInit, options = __rest(_a, ["center", "flyToBounds", "bounds", "boundsOptions", "onZoom", "onZoomStart", "onZoomEnd", "onInit"]);
var map = L.map(this.ref.current, options);
if (bounds) {
if (center && flyToBounds) {
map.panTo(center);
map.flyToBounds(bounds, boundsOptions);
}
else {
map.fitBounds(bounds, boundsOptions);
}
}
else if (center) {
map.panTo(center);
}
map.on({ zoom: this.onZoom, zoomstart: this.onZoomStart, zoomend: this.onZoomEnd });
onInit && onInit(map);
this.setState({ map: map, theme: this.context });
};
RCMap.prototype.componentDidUpdate = function (prevProps) {
var e_1, _a, e_2, _b;
var prevCenter = prevProps.center, prevZoom = prevProps.zoom, prevMinZoom = prevProps.minZoom, prevMaxZoom = prevProps.maxZoom, prevLayers = prevProps.layers, prevMaxBounds = prevProps.maxBounds, prevBounds = prevProps.bounds;
var _c = this.props, className = _c.className, center = _c.center, zoom = _c.zoom, minZoom = _c.minZoom, maxZoom = _c.maxZoom, layers = _c.layers, maxBounds = _c.maxBounds, flyToBounds = _c.flyToBounds, bounds = _c.bounds, boundsOptions = _c.boundsOptions, children = _c.children, onZoom = _c.onZoom, onZoomStart = _c.onZoomStart, onZoomEnd = _c.onZoomEnd, onInit = _c.onInit, options = __rest(_c, ["className", "center", "zoom", "minZoom", "maxZoom", "layers", "maxBounds", "flyToBounds", "bounds", "boundsOptions", "children", "onZoom", "onZoomStart", "onZoomEnd", "onInit"]);
var _d = this.state, map = _d.map, theme = _d.theme;
Object.assign(map.options, options);
if (layers !== prevLayers) {
if (prevLayers && prevLayers.length) {
try {
for (var prevLayers_1 = __values(prevLayers), prevLayers_1_1 = prevLayers_1.next(); !prevLayers_1_1.done; prevLayers_1_1 = prevLayers_1.next()) {
var layer = prevLayers_1_1.value;
map.removeLayer(layer);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (prevLayers_1_1 && !prevLayers_1_1.done && (_a = prevLayers_1.return)) _a.call(prevLayers_1);
}
finally { if (e_1) throw e_1.error; }
}
}
if (layers && layers.length) {
try {
for (var layers_1 = __values(layers), layers_1_1 = layers_1.next(); !layers_1_1.done; layers_1_1 = layers_1.next()) {
var layer = layers_1_1.value;
map.addLayer(layer);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (layers_1_1 && !layers_1_1.done && (_b = layers_1.return)) _b.call(layers_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
if (minZoom && minZoom !== prevMinZoom) {
map.setMinZoom(minZoom);
}
if (maxZoom && maxZoom !== prevMaxZoom) {
map.setMaxZoom(maxZoom);
}
if (zoom && zoom !== prevZoom) {
map.setZoom(zoom);
}
if (maxBounds !== prevMaxBounds) {
map.setMaxBounds(maxBounds);
}
if (bounds && bounds !== prevBounds) {
if (prevCenter && flyToBounds) {
map.flyToBounds(bounds, boundsOptions);
}
else {
map.fitBounds(bounds, boundsOptions);
}
}
else if (center && center !== prevCenter) {
map.panTo(center);
}
if (theme !== this.context) {
this.setState({ theme: this.context });
}
};
RCMap.prototype.componentWillUnmount = function () {
var map = this.state.map;
if (map) {
map.remove();
}
};
RCMap.prototype.render = function () {
var _a = this.props, className = _a.className, children = _a.children;
var context = this.state;
return (React.createElement(Context.Provider, { value: context },
React.createElement("div", { className: classNames('rc-leaflet-wrap', className) },
React.createElement("div", { className: 'rc-leaflet-ref', ref: this.ref }),
context.map ? children : null)));
};
RCMap.propTypes = {
className: ClassValueType,
preferCanvas: PropTypes.bool,
attributionControl: PropTypes.bool,
zoomControl: PropTypes.bool,
closePopupOnClick: PropTypes.bool,
zoomSnap: PropTypes.number,
zoomDelta: PropTypes.number,
trackResize: PropTypes.bool,
boxZoom: PropTypes.bool,
doubleClickZoom: Zoom,
dragging: PropTypes.bool,
crs: CRS,
center: Point,
zoom: PropTypes.number,
minZoom: PropTypes.number,
maxZoom: PropTypes.number,
layers: PropTypes.arrayOf(PropTypes.instanceOf(L.Layer)),
maxBounds: Bounds,
renderer: PropTypes.instanceOf(L.Renderer),
zoomAnimation: PropTypes.bool,
zoomAnimationThreshold: PropTypes.number,
fadeAnimation: PropTypes.bool,
markerZoomAnimation: PropTypes.bool,
transform3DLimit: PropTypes.number,
inertia: PropTypes.bool,
inertiaDeceleration: PropTypes.number,
inertiaMaxSpeed: PropTypes.number,
easeLinearity: PropTypes.number,
worldCopyJump: PropTypes.bool,
maxBoundsViscosity: PropTypes.number,
keyboard: PropTypes.bool,
keyboardPanDelta: PropTypes.number,
scrollWheelZoom: Zoom,
wheelDebounceTime: PropTypes.number,
wheelPxPerZoomLevel: PropTypes.number,
tap: PropTypes.bool,
tapTolerance: PropTypes.number,
touchZoom: Zoom,
bounceAtZoomLimits: PropTypes.bool,
flyToBounds: PropTypes.bool,
bounds: Bounds,
boundsOptions: BoundsOptions,
children: PropTypes.node,
onZoom: PropTypes.func,
onZoomStart: PropTypes.func,
onZoomEnd: PropTypes.func,
onInit: PropTypes.func
};
RCMap.defaultProps = {
className: undefined,
attributionControl: false,
zoomControl: false,
zoom: 15,
minZoom: 1,
maxZoom: 18,
flyToBounds: true,
bounds: undefined,
boundsOptions: undefined,
children: null
};
RCMap.contextType = ThemeContext;
return RCMap;
}(PureComponent));
export default RCMap;