rc-leaflet
Version:
React Map Components of Leaflet
233 lines (232 loc) • 10.7 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 };
}
};
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
require("leaflet/dist/leaflet.css");
require("./index.css");
var react_1 = __importStar(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var classnames_1 = __importDefault(require("classnames"));
var leaflet_1 = __importDefault(require("leaflet"));
var PropTypes_1 = require("../../util/PropTypes");
var Theme_1 = __importDefault(require("../Theme"));
var Context_1 = __importDefault(require("./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_1.default.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 = leaflet_1.default.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_1.default.createElement(Context_1.default.Provider, { value: context },
react_1.default.createElement("div", { className: classnames_1.default('rc-leaflet-wrap', className) },
react_1.default.createElement("div", { className: 'rc-leaflet-ref', ref: this.ref }),
context.map ? children : null)));
};
RCMap.propTypes = {
className: PropTypes_1.ClassValue,
preferCanvas: prop_types_1.default.bool,
attributionControl: prop_types_1.default.bool,
zoomControl: prop_types_1.default.bool,
closePopupOnClick: prop_types_1.default.bool,
zoomSnap: prop_types_1.default.number,
zoomDelta: prop_types_1.default.number,
trackResize: prop_types_1.default.bool,
boxZoom: prop_types_1.default.bool,
doubleClickZoom: PropTypes_1.Zoom,
dragging: prop_types_1.default.bool,
crs: PropTypes_1.CRS,
center: PropTypes_1.Point,
zoom: prop_types_1.default.number,
minZoom: prop_types_1.default.number,
maxZoom: prop_types_1.default.number,
layers: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(leaflet_1.default.Layer)),
maxBounds: PropTypes_1.Bounds,
renderer: prop_types_1.default.instanceOf(leaflet_1.default.Renderer),
zoomAnimation: prop_types_1.default.bool,
zoomAnimationThreshold: prop_types_1.default.number,
fadeAnimation: prop_types_1.default.bool,
markerZoomAnimation: prop_types_1.default.bool,
transform3DLimit: prop_types_1.default.number,
inertia: prop_types_1.default.bool,
inertiaDeceleration: prop_types_1.default.number,
inertiaMaxSpeed: prop_types_1.default.number,
easeLinearity: prop_types_1.default.number,
worldCopyJump: prop_types_1.default.bool,
maxBoundsViscosity: prop_types_1.default.number,
keyboard: prop_types_1.default.bool,
keyboardPanDelta: prop_types_1.default.number,
scrollWheelZoom: PropTypes_1.Zoom,
wheelDebounceTime: prop_types_1.default.number,
wheelPxPerZoomLevel: prop_types_1.default.number,
tap: prop_types_1.default.bool,
tapTolerance: prop_types_1.default.number,
touchZoom: PropTypes_1.Zoom,
bounceAtZoomLimits: prop_types_1.default.bool,
flyToBounds: prop_types_1.default.bool,
bounds: PropTypes_1.Bounds,
boundsOptions: PropTypes_1.BoundsOptions,
children: prop_types_1.default.node,
onZoom: prop_types_1.default.func,
onZoomStart: prop_types_1.default.func,
onZoomEnd: prop_types_1.default.func,
onInit: prop_types_1.default.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 = Theme_1.default;
return RCMap;
}(react_1.PureComponent));
exports.default = RCMap;