1 | var __extends = (this && this.__extends) || (function () {
|
2 | var extendStatics = function (d, b) {
|
3 | extendStatics = Object.setPrototypeOf ||
|
4 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
5 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
6 | return extendStatics(d, b);
|
7 | }
|
8 | return function (d, b) {
|
9 | extendStatics(d, b);
|
10 | function __() { this.constructor = d; }
|
11 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
12 | };
|
13 | })();
|
14 | var __assign = (this && this.__assign) || function () {
|
15 | __assign = Object.assign || function(t) {
|
16 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
17 | s = arguments[i];
|
18 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
19 | t[p] = s[p];
|
20 | }
|
21 | return t;
|
22 | };
|
23 | return __assign.apply(this, arguments);
|
24 | };
|
25 | import * as MapboxGl from 'mapbox-gl';
|
26 | import * as React from 'react';
|
27 | import { listenEvents, events, updateEvents } from './map-events';
|
28 | import { MapContext } from './context';
|
29 | import { createPortal } from 'react-dom';
|
30 | var isEqual = require('deep-equal');
|
31 | var defaultZoom = [11];
|
32 | var defaultMovingMethod = 'flyTo';
|
33 | var defaultCenter = [-0.2416815, 51.5285582];
|
34 | var ReactMapboxFactory = function (_a) {
|
35 | var accessToken = _a.accessToken, apiUrl = _a.apiUrl, _b = _a.minZoom, minZoom = _b === void 0 ? 0 : _b, _c = _a.maxZoom, maxZoom = _c === void 0 ? 20 : _c, _d = _a.hash, hash = _d === void 0 ? false : _d, _e = _a.preserveDrawingBuffer, preserveDrawingBuffer = _e === void 0 ? false : _e, _f = _a.scrollZoom, scrollZoom = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.dragRotate, dragRotate = _h === void 0 ? true : _h, _j = _a.pitchWithRotate, pitchWithRotate = _j === void 0 ? true : _j, _k = _a.attributionControl, attributionControl = _k === void 0 ? true : _k, customAttribution = _a.customAttribution, _l = _a.logoPosition, logoPosition = _l === void 0 ? 'bottom-left' : _l, _m = _a.renderWorldCopies, renderWorldCopies = _m === void 0 ? true : _m, _o = _a.trackResize, trackResize = _o === void 0 ? true : _o, _p = _a.touchZoomRotate, touchZoomRotate = _p === void 0 ? true : _p, _q = _a.doubleClickZoom, doubleClickZoom = _q === void 0 ? true : _q, _r = _a.keyboard, keyboard = _r === void 0 ? true : _r, _s = _a.dragPan, dragPan = _s === void 0 ? true : _s, _t = _a.boxZoom, boxZoom = _t === void 0 ? true : _t, _u = _a.refreshExpiredTiles, refreshExpiredTiles = _u === void 0 ? true : _u, _v = _a.failIfMajorPerformanceCaveat, failIfMajorPerformanceCaveat = _v === void 0 ? false : _v, _w = _a.bearingSnap, bearingSnap = _w === void 0 ? 7 : _w, _x = _a.antialias, antialias = _x === void 0 ? false : _x, mapInstance = _a.mapInstance, transformRequest = _a.transformRequest;
|
36 | var _y;
|
37 | return _y = (function (_super) {
|
38 | __extends(ReactMapboxGl, _super);
|
39 | function ReactMapboxGl() {
|
40 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
41 | _this.state = {
|
42 | map: mapInstance,
|
43 | ready: false
|
44 | };
|
45 | _this.listeners = {};
|
46 | _this._isMounted = true;
|
47 | _this.calcCenter = function (bounds) { return [
|
48 | (bounds[0][0] + bounds[1][0]) / 2,
|
49 | (bounds[0][1] + bounds[1][1]) / 2
|
50 | ]; };
|
51 | _this.setRef = function (x) {
|
52 | _this.container = x;
|
53 | };
|
54 | return _this;
|
55 | }
|
56 | ReactMapboxGl.prototype.componentDidMount = function () {
|
57 | var _this = this;
|
58 | var _a = this.props, style = _a.style, onStyleLoad = _a.onStyleLoad, center = _a.center, pitch = _a.pitch, zoom = _a.zoom, fitBounds = _a.fitBounds, fitBoundsOptions = _a.fitBoundsOptions, bearing = _a.bearing, maxBounds = _a.maxBounds;
|
59 | MapboxGl.accessToken = accessToken;
|
60 | if (apiUrl) {
|
61 | MapboxGl.config.API_URL = apiUrl;
|
62 | }
|
63 | if (!Array.isArray(zoom)) {
|
64 | throw new Error('zoom need to be an array type of length 1 for reliable update');
|
65 | }
|
66 | var opts = {
|
67 | preserveDrawingBuffer: preserveDrawingBuffer,
|
68 | hash: hash,
|
69 | zoom: zoom[0],
|
70 | minZoom: minZoom,
|
71 | maxZoom: maxZoom,
|
72 | maxBounds: maxBounds,
|
73 | container: this.container,
|
74 | center: fitBounds && center === defaultCenter
|
75 | ? this.calcCenter(fitBounds)
|
76 | : center,
|
77 | style: style,
|
78 | scrollZoom: scrollZoom,
|
79 | attributionControl: attributionControl,
|
80 | customAttribution: customAttribution,
|
81 | interactive: interactive,
|
82 | dragRotate: dragRotate,
|
83 | pitchWithRotate: pitchWithRotate,
|
84 | renderWorldCopies: renderWorldCopies,
|
85 | trackResize: trackResize,
|
86 | touchZoomRotate: touchZoomRotate,
|
87 | doubleClickZoom: doubleClickZoom,
|
88 | keyboard: keyboard,
|
89 | dragPan: dragPan,
|
90 | boxZoom: boxZoom,
|
91 | refreshExpiredTiles: refreshExpiredTiles,
|
92 | logoPosition: logoPosition,
|
93 | bearingSnap: bearingSnap,
|
94 | failIfMajorPerformanceCaveat: failIfMajorPerformanceCaveat,
|
95 | antialias: antialias,
|
96 | transformRequest: transformRequest
|
97 | };
|
98 | if (bearing) {
|
99 | if (!Array.isArray(bearing)) {
|
100 | throw new Error('bearing need to be an array type of length 1 for reliable update');
|
101 | }
|
102 | opts.bearing = bearing[0];
|
103 | }
|
104 | if (pitch) {
|
105 | if (!Array.isArray(pitch)) {
|
106 | throw new Error('pitch need to be an array type of length 1 for reliable update');
|
107 | }
|
108 | opts.pitch = pitch[0];
|
109 | }
|
110 | var map = this.state.map;
|
111 | if (!map) {
|
112 | map = new MapboxGl.Map(opts);
|
113 | this.setState({ map: map });
|
114 | }
|
115 | if (fitBounds) {
|
116 | map.fitBounds(fitBounds, fitBoundsOptions, { fitboundUpdate: true });
|
117 | }
|
118 | map.on('load', function (evt) {
|
119 | if (_this._isMounted) {
|
120 | _this.setState({ ready: true });
|
121 | }
|
122 | if (onStyleLoad) {
|
123 | onStyleLoad(map, evt);
|
124 | }
|
125 | });
|
126 | this.listeners = listenEvents(events, this.props, map);
|
127 | };
|
128 | ReactMapboxGl.prototype.componentWillUnmount = function () {
|
129 | var map = this.state.map;
|
130 | this._isMounted = false;
|
131 | if (map) {
|
132 | map.remove();
|
133 | }
|
134 | };
|
135 | ReactMapboxGl.prototype.componentDidUpdate = function (prevProps) {
|
136 | var _this = this;
|
137 | var map = this.state.map;
|
138 | if (!map) {
|
139 | return null;
|
140 | }
|
141 | this.listeners = updateEvents(this.listeners, this.props, map);
|
142 | var center = map.getCenter();
|
143 | var zoom = map.getZoom();
|
144 | var bearing = map.getBearing();
|
145 | var pitch = map.getPitch();
|
146 | var didZoomUpdate = prevProps.zoom !== this.props.zoom &&
|
147 | (this.props.zoom && this.props.zoom[0]) !== zoom;
|
148 | var didCenterUpdate = prevProps.center !== this.props.center &&
|
149 | ((this.props.center && this.props.center[0]) !== center.lng ||
|
150 | (this.props.center && this.props.center[1]) !== center.lat);
|
151 | var didBearingUpdate = prevProps.bearing !== this.props.bearing &&
|
152 | (this.props.bearing && this.props.bearing[0]) !== bearing;
|
153 | var didPitchUpdate = prevProps.pitch !== this.props.pitch &&
|
154 | (this.props.pitch && this.props.pitch[0]) !== pitch;
|
155 | if (this.props.maxBounds) {
|
156 | var didMaxBoundsUpdate = prevProps.maxBounds !== this.props.maxBounds;
|
157 | if (didMaxBoundsUpdate) {
|
158 | map.setMaxBounds(this.props.maxBounds);
|
159 | }
|
160 | }
|
161 | if (this.props.fitBounds) {
|
162 | var fitBounds = prevProps.fitBounds;
|
163 | var didFitBoundsUpdate = fitBounds !== this.props.fitBounds ||
|
164 | this.props.fitBounds.length !== (fitBounds && fitBounds.length) ||
|
165 | !!fitBounds.filter(function (c, i) {
|
166 | var nc = _this.props.fitBounds && _this.props.fitBounds[i];
|
167 | return c[0] !== (nc && nc[0]) || c[1] !== (nc && nc[1]);
|
168 | })[0];
|
169 | if (didFitBoundsUpdate ||
|
170 | !isEqual(prevProps.fitBoundsOptions, this.props.fitBoundsOptions)) {
|
171 | map.fitBounds(this.props.fitBounds, this.props.fitBoundsOptions, {
|
172 | fitboundUpdate: true
|
173 | });
|
174 | }
|
175 | }
|
176 | if (didZoomUpdate ||
|
177 | didCenterUpdate ||
|
178 | didBearingUpdate ||
|
179 | didPitchUpdate) {
|
180 | var mm = this.props.movingMethod || defaultMovingMethod;
|
181 | var _a = this.props, flyToOptions = _a.flyToOptions, animationOptions = _a.animationOptions;
|
182 | map[mm](__assign({}, animationOptions, flyToOptions, { zoom: didZoomUpdate && this.props.zoom ? this.props.zoom[0] : zoom, center: didCenterUpdate ? this.props.center : center, bearing: didBearingUpdate ? this.props.bearing : bearing, pitch: didPitchUpdate ? this.props.pitch : pitch }));
|
183 | }
|
184 | if (!isEqual(prevProps.style, this.props.style)) {
|
185 | map.setStyle(this.props.style);
|
186 | }
|
187 | return null;
|
188 | };
|
189 | ReactMapboxGl.prototype.render = function () {
|
190 | var _a = this.props, containerStyle = _a.containerStyle, className = _a.className, children = _a.children, renderChildrenInPortal = _a.renderChildrenInPortal;
|
191 | var _b = this.state, ready = _b.ready, map = _b.map;
|
192 | if (renderChildrenInPortal) {
|
193 | var container = ready && map && typeof map.getCanvasContainer === 'function'
|
194 | ? map.getCanvasContainer()
|
195 | : undefined;
|
196 | return (React.createElement(MapContext.Provider, { value: map },
|
197 | React.createElement("div", { ref: this.setRef, className: className, style: __assign({}, containerStyle) }, ready && container && createPortal(children, container))));
|
198 | }
|
199 | return (React.createElement(MapContext.Provider, { value: map },
|
200 | React.createElement("div", { ref: this.setRef, className: className, style: __assign({}, containerStyle) }, ready && children)));
|
201 | };
|
202 | return ReactMapboxGl;
|
203 | }(React.Component)),
|
204 | _y.defaultProps = {
|
205 | onStyleLoad: function (map, evt) { return null; },
|
206 | center: defaultCenter,
|
207 | zoom: defaultZoom,
|
208 | bearing: 0,
|
209 | movingMethod: defaultMovingMethod,
|
210 | pitch: 0,
|
211 | containerStyle: {
|
212 | textAlign: 'left'
|
213 | }
|
214 | },
|
215 | _y;
|
216 | };
|
217 | export default ReactMapboxFactory;
|
218 |
|
\ | No newline at end of file |