react-mapbox-gl - npm Package Compare versions

Comparing version 4.8.6 to 5.0.0

lib-esm/cluster.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
 export interface Props {
-    ClusterMarkerFactory(coordinates: GeoJSON.Position, pointCount: number, getLeaves: (limit?: number, offset?: number) => Array<React.ReactElement<MarkerProps>>): React.ReactElement<MarkerProps>;
+    ClusterMarkerFactory(coordinates: GeoJSON.Position, pointCount: number, getLeaves: (limit?: number, offset?: number) => Array<React.ReactElement<MarkerProps> | undefined>): React.ReactElement<MarkerProps>;
     radius?: number;
@@ -40,5 +40,5 @@ maxZoom?: number;
     private featureClusterMap;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     private childrenChange;
@@ -45,0 +45,0 @@ private mapChange;

lib-esm/cluster.js

@@ -88,3 +88,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    Cluster.prototype.UNSAFE_componentWillMount = function () {
+    Cluster.prototype.componentDidMount = function () {
         var _a = this.props, children = _a.children, map = _a.map;
@@ -103,6 +103,6 @@ if (children) {
     };
-    Cluster.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        var children = this.props.children;
-        if (children !== nextProps.children && nextProps.children) {
-            this.childrenChange(nextProps.children);
+    Cluster.prototype.componentDidUpdate = function (prevProps) {
+        var children = prevProps.children;
+        if (children !== this.props.children && this.props.children) {
+            this.childrenChange(this.props.children);
             this.mapChange(true);
@@ -109,0 +109,0 @@ }

lib-esm/geojson-layer.d.ts

@@ -72,6 +72,6 @@ import * as React from 'react';
     private unbind;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
     isGeoJSONSource: (source?: MapboxGL.GeoJSONSourceRaw | MapboxGL.VectorSource | MapboxGL.RasterSource | MapboxGL.RasterDemSource | MapboxGL.GeoJSONSource | MapboxGL.VideoSource | MapboxGL.ImageSource | MapboxGL.CanvasSource | undefined) => source is MapboxGL.GeoJSONSource;
-    UNSAFE_componentWillReceiveProps(props: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     render(): null;
@@ -78,0 +78,0 @@ }

lib-esm/geojson-layer.js

@@ -130,3 +130,3 @@ var __extends = (this && this.__extends) || (function () {
     };
-    GeoJSONLayer.prototype.UNSAFE_componentWillMount = function () {
+    GeoJSONLayer.prototype.componentDidMount = function () {
         var map = this.props.map;
@@ -144,5 +144,5 @@ this.initialize();
     };
-    GeoJSONLayer.prototype.UNSAFE_componentWillReceiveProps = function (props) {
+    GeoJSONLayer.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
-        var _a = this.props, data = _a.data, before = _a.before, layerOptions = _a.layerOptions, map = _a.map;
+        var data = prevProps.data, before = prevProps.before, layerOptions = prevProps.layerOptions, map = prevProps.map;
         var source = map.getSource(this.id);
@@ -152,17 +152,17 @@ if (!this.isGeoJSONSource(source)) {
         }
-        if (props.data !== data) {
-            source.setData(props.data);
-            this.source = __assign({ type: 'geojson' }, props.sourceOptions, { data: props.data });
+        if (prevProps.data !== data) {
+            source.setData(this.props.data);
+            this.source = __assign({ type: 'geojson' }, this.props.sourceOptions, { data: this.props.data });
         }
-        var layerFilterChanged = props.layerOptions &&
+        var layerFilterChanged = this.props.layerOptions &&
             layerOptions &&
-            !isEqual(props.layerOptions.filter, layerOptions.filter);
+            !isEqual(this.props.layerOptions.filter, layerOptions.filter);
         types.forEach(function (type) {
             var layerId = _this.buildLayerId(type);
-            if (props.layerOptions && layerFilterChanged) {
-                map.setFilter(layerId, props.layerOptions.filter || []);
+            if (_this.props.layerOptions && layerFilterChanged) {
+                map.setFilter(layerId, _this.props.layerOptions.filter || []);
             }
             var paintProp = toCamelCase(type) + 'Paint';
-            if (!isEqual(props[paintProp], _this.props[paintProp])) {
-                var paintDiff_1 = diff(_this.props[paintProp], props[paintProp]);
+            if (!isEqual(prevProps[paintProp], _this.props[paintProp])) {
+                var paintDiff_1 = diff(prevProps[paintProp], _this.props[paintProp]);
                 Object.keys(paintDiff_1).forEach(function (key) {
@@ -173,4 +173,4 @@ map.setPaintProperty(layerId, key, paintDiff_1[key]);
             var layoutProp = toCamelCase(type) + 'Layout';
-            if (!isEqual(props[layoutProp], _this.props[layoutProp])) {
-                var layoutDiff_1 = diff(_this.props[layoutProp], props[layoutProp]);
+            if (!isEqual(prevProps[layoutProp], _this.props[layoutProp])) {
+                var layoutDiff_1 = diff(prevProps[layoutProp], _this.props[layoutProp]);
                 Object.keys(layoutDiff_1).forEach(function (key) {
@@ -183,13 +183,13 @@ map.setLayoutProperty(layerId, key, layoutDiff_1[key]);
                 var prop = toCamelCase(type) + eventToHandler[event];
-                if (props[prop] !== _this.props[prop]) {
+                if (prevProps[prop] !== _this.props[prop]) {
+                    if (prevProps[prop]) {
+                        map.off(event, layerId, prevProps[prop]);
+                    }
                     if (_this.props[prop]) {
-                        map.off(event, layerId, _this.props[prop]);
+                        map.on(event, layerId, _this.props[prop]);
                     }
-                    if (props[prop]) {
-                        map.on(event, layerId, props[prop]);
-                    }
                 }
             });
-            if (before !== props.before) {
-                map.moveLayer(layerId, props.before);
+            if (before !== _this.props.before) {
+                map.moveLayer(layerId, _this.props.before);
             }
@@ -196,0 +196,0 @@ });

lib-esm/image.js

@@ -21,3 +21,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    Image.prototype.UNSAFE_componentWillMount = function () {
+    Image.prototype.componentDidMount = function () {
         this.loadImage(this.props);
@@ -28,9 +28,9 @@ };
     };
-    Image.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        var id = this.props.id;
-        if (nextProps.map !== this.props.map) {
+    Image.prototype.componentDidUpdate = function (prevProps) {
+        var id = prevProps.id;
+        if (prevProps.map !== this.props.map) {
             Image.removeImage(this.props);
         }
-        if (nextProps.map && !nextProps.map.hasImage(id)) {
-            this.loadImage(nextProps);
+        if (this.props.map && !this.props.map.hasImage(id)) {
+            this.loadImage(this.props);
         }
@@ -37,0 +37,0 @@ };

lib-esm/layer-events-hoc.d.ts

@@ -27,3 +27,3 @@ import * as React from 'react';
         onFeatureDragEnd: (evt: any) => void;
-        UNSAFE_componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
@@ -58,3 +58,3 @@ render(): JSX.Element;
         onFeatureDragEnd: (evt: any) => void;
-        UNSAFE_componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
@@ -61,0 +61,0 @@ render(): JSX.Element;

lib-esm/layer-events-hoc.js

@@ -174,3 +174,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        EnhancedLayer.prototype.UNSAFE_componentWillMount = function () {
+        EnhancedLayer.prototype.componentDidMount = function () {
             var map = this.props.map;
@@ -177,0 +177,0 @@ map.on('click', this.id, this.onClick);

lib-esm/layer.d.ts

@@ -56,7 +56,7 @@ import * as React from 'react';
     private onStyleDataChange;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(props: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     getChildren: () => JSX.Element[];
     render(): null;
 }

lib-esm/layer.js

@@ -146,3 +146,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    Layer.prototype.UNSAFE_componentWillMount = function () {
+    Layer.prototype.componentDidMount = function () {
         var map = this.props.map;
@@ -183,8 +183,7 @@ this.initialize();
     };
-    Layer.prototype.UNSAFE_componentWillReceiveProps = function (props) {
+    Layer.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
-        var _a = this.props, paint = _a.paint, layout = _a.layout, before = _a.before, filter = _a.filter, id = _a.id, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
-        var map = this.props.map;
-        if (!isEqual(props.paint, paint)) {
-            var paintDiff_1 = diff(paint, props.paint);
+        var paint = prevProps.paint, layout = prevProps.layout, before = prevProps.before, filter = prevProps.filter, id = prevProps.id, minZoom = prevProps.minZoom, maxZoom = prevProps.maxZoom, map = prevProps.map;
+        if (!isEqual(this.props.paint, paint)) {
+            var paintDiff_1 = diff(paint, this.props.paint);
             Object.keys(paintDiff_1).forEach(function (key) {
@@ -194,4 +193,4 @@ map.setPaintProperty(id, key, paintDiff_1[key]);
         }
-        if (!isEqual(props.layout, layout)) {
-            var layoutDiff_1 = diff(layout, props.layout);
+        if (!isEqual(this.props.layout, layout)) {
+            var layoutDiff_1 = diff(layout, this.props.layout);
             Object.keys(layoutDiff_1).forEach(function (key) {
@@ -201,15 +200,15 @@ map.setLayoutProperty(id, key, layoutDiff_1[key]);
         }
-        if (!isEqual(props.filter, filter)) {
-            map.setFilter(id, props.filter);
+        if (!isEqual(this.props.filter, filter)) {
+            map.setFilter(id, this.props.filter);
         }
-        if (before !== props.before) {
-            map.moveLayer(id, props.before);
+        if (before !== this.props.before) {
+            map.moveLayer(id, this.props.before);
         }
-        if (minZoom !== props.minZoom || maxZoom !== props.maxZoom) {
-            map.setLayerZoomRange(id, props.minZoom, props.maxZoom);
+        if (minZoom !== this.props.minZoom || maxZoom !== this.props.maxZoom) {
+            map.setLayerZoomRange(id, this.props.minZoom, this.props.maxZoom);
         }
         Object.entries(eventToHandler).forEach(function (_a) {
             var event = _a[0], propName = _a[1];
-            var oldHandler = _this.props[propName];
-            var newHandler = props[propName];
+            var oldHandler = prevProps[propName];
+            var newHandler = _this.props[propName];
             if (oldHandler !== newHandler) {
@@ -216,0 +215,0 @@ if (oldHandler) {

lib-esm/map-events.d.ts

@@ -57,3 +57,3 @@ /// <reference types="react" />
 export declare const listenEvents: (partialEvents: EventMapping, props: Partial<Events>, map: MapboxGl.Map) => Listeners;
-export declare const updateEvents: (listeners: Listeners, nextProps: Partial<Events>, map: MapboxGl.Map) => {
+export declare const updateEvents: (listeners: Listeners, currentProps: Partial<Events>, map: MapboxGl.Map) => {
     onStyleLoad?: ((evt: import("react").SyntheticEvent<any, Event>) => void) | undefined;
@@ -60,0 +60,0 @@ onResize?: ((evt: import("react").SyntheticEvent<any, Event>) => void) | undefined;

lib-esm/map-events.js

@@ -69,5 +69,5 @@ var __assign = (this && this.__assign) || function () {
 };
-export var updateEvents = function (listeners, nextProps, map) {
+export var updateEvents = function (listeners, currentProps, map) {
     var toListenOff = Object.keys(events).filter(function (eventKey) {
-        return listeners[eventKey] && nextProps[eventKey] !== listeners[eventKey];
+        return listeners[eventKey] && typeof currentProps[eventKey] !== 'function';
     });
@@ -79,7 +79,7 @@ toListenOff.forEach(function (key) {
     var toListenOn = Object.keys(events)
-        .filter(function (key) { return typeof nextProps[key] === 'function'; })
+        .filter(function (key) { return !listeners[key] && typeof currentProps[key] === 'function'; })
         .reduce(function (acc, next) { return ((acc[next] = events[next]), acc); }, {});
-    var newListeners = listenEvents(toListenOn, nextProps, map);
+    var newListeners = listenEvents(toListenOn, currentProps, map);
     return __assign({}, listeners, newListeners);
 };
 //# sourceMappingURL=map-events.js.map

lib-esm/map.d.ts

@@ -77,5 +77,5 @@ import * as MapboxGl from 'mapbox-gl';
     bearingSnap?: number;
-    injectCSS?: boolean;
     transformRequest?: RequestTransformFunction;
     antialias?: boolean;
+    mapInstance?: MapboxGl.Map;
 }
@@ -90,3 +90,3 @@ declare global {
 }
-declare const ReactMapboxFactory: ({ accessToken, apiUrl, minZoom, maxZoom, hash, preserveDrawingBuffer, scrollZoom, interactive, dragRotate, pitchWithRotate, attributionControl, customAttribution, logoPosition, renderWorldCopies, trackResize, touchZoomRotate, doubleClickZoom, keyboard, dragPan, boxZoom, refreshExpiredTiles, failIfMajorPerformanceCaveat, bearingSnap, injectCSS, antialias, transformRequest }: FactoryParameters) => {
+declare const ReactMapboxFactory: ({ accessToken, apiUrl, minZoom, maxZoom, hash, preserveDrawingBuffer, scrollZoom, interactive, dragRotate, pitchWithRotate, attributionControl, customAttribution, logoPosition, renderWorldCopies, trackResize, touchZoomRotate, doubleClickZoom, keyboard, dragPan, boxZoom, refreshExpiredTiles, failIfMajorPerformanceCaveat, bearingSnap, antialias, mapInstance, transformRequest }: FactoryParameters) => {
     new (props: Readonly<Props & Events>): {
@@ -100,3 +100,3 @@ state: State;
         componentWillUnmount(): void;
-        UNSAFE_componentWillReceiveProps(nextProps: Props & Events): null;
+        componentDidUpdate(prevProps: Props & Events): null;
         setRef: (x: HTMLElement | null) => void;
@@ -122,3 +122,3 @@ render(): JSX.Element;
         componentWillUnmount(): void;
-        UNSAFE_componentWillReceiveProps(nextProps: Props & Events): null;
+        componentDidUpdate(prevProps: Props & Events): null;
         setRef: (x: HTMLElement | null) => void;
@@ -125,0 +125,0 @@ render(): JSX.Element;

lib-esm/map.js

@@ -35,8 +35,5 @@ var __extends = (this && this.__extends) || (function () {
 var ReactMapboxFactory = function (_a) {
-    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.injectCSS, injectCSS = _x === void 0 ? true : _x, _y = _a.antialias, antialias = _y === void 0 ? false : _y, transformRequest = _a.transformRequest;
-    var _z;
-    if (injectCSS) {
-        require('mapbox-gl/dist/mapbox-gl.css');
-    }
-    return _z = (function (_super) {
+    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;
+    var _y;
+    return _y = (function (_super) {
             __extends(ReactMapboxGl, _super);
@@ -46,3 +43,3 @@ function ReactMapboxGl() {
                 _this.state = {
-                    map: undefined,
+                    map: mapInstance,
                     ready: false
@@ -115,4 +112,7 @@ };
                 }
-                var map = new MapboxGl.Map(opts);
-                this.setState({ map: map });
+                var map = this.state.map;
+                if (!map) {
+                    map = new MapboxGl.Map(opts);
+                    this.setState({ map: map });
+                }
                 if (fitBounds) {
@@ -138,3 +138,4 @@ map.fitBounds(fitBounds, fitBoundsOptions, { fitboundUpdate: true });
             };
-            ReactMapboxGl.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
+            ReactMapboxGl.prototype.componentDidUpdate = function (prevProps) {
+                var _this = this;
                 var map = this.state.map;
@@ -144,3 +145,3 @@ if (!map) {
                 }
-                this.listeners = updateEvents(this.listeners, nextProps, map);
+                this.listeners = updateEvents(this.listeners, this.props, map);
                 var center = map.getCenter();
@@ -150,28 +151,28 @@ var zoom = map.getZoom();
                 var pitch = map.getPitch();
-                var didZoomUpdate = this.props.zoom !== nextProps.zoom &&
-                    (nextProps.zoom && nextProps.zoom[0]) !== zoom;
-                var didCenterUpdate = this.props.center !== nextProps.center &&
-                    ((nextProps.center && nextProps.center[0]) !== center.lng ||
-                        (nextProps.center && nextProps.center[1]) !== center.lat);
-                var didBearingUpdate = this.props.bearing !== nextProps.bearing &&
-                    (nextProps.bearing && nextProps.bearing[0]) !== bearing;
-                var didPitchUpdate = this.props.pitch !== nextProps.pitch &&
-                    (nextProps.pitch && nextProps.pitch[0]) !== pitch;
-                if (nextProps.maxBounds) {
-                    var didMaxBoundsUpdate = this.props.maxBounds !== nextProps.maxBounds;
+                var didZoomUpdate = prevProps.zoom !== this.props.zoom &&
+                    (this.props.zoom && this.props.zoom[0]) !== zoom;
+                var didCenterUpdate = prevProps.center !== this.props.center &&
+                    ((this.props.center && this.props.center[0]) !== center.lng ||
+                        (this.props.center && this.props.center[1]) !== center.lat);
+                var didBearingUpdate = prevProps.bearing !== this.props.bearing &&
+                    (this.props.bearing && this.props.bearing[0]) !== bearing;
+                var didPitchUpdate = prevProps.pitch !== this.props.pitch &&
+                    (this.props.pitch && this.props.pitch[0]) !== pitch;
+                if (this.props.maxBounds) {
+                    var didMaxBoundsUpdate = prevProps.maxBounds !== this.props.maxBounds;
                     if (didMaxBoundsUpdate) {
-                        map.setMaxBounds(nextProps.maxBounds);
+                        map.setMaxBounds(this.props.maxBounds);
                     }
                 }
-                if (nextProps.fitBounds) {
-                    var fitBounds = this.props.fitBounds;
-                    var didFitBoundsUpdate = fitBounds !== nextProps.fitBounds ||
-                        nextProps.fitBounds.length !== (fitBounds && fitBounds.length) ||
+                if (this.props.fitBounds) {
+                    var fitBounds = prevProps.fitBounds;
+                    var didFitBoundsUpdate = fitBounds !== this.props.fitBounds ||
+                        this.props.fitBounds.length !== (fitBounds && fitBounds.length) ||
                         !!fitBounds.filter(function (c, i) {
-                            var nc = nextProps.fitBounds && nextProps.fitBounds[i];
+                            var nc = _this.props.fitBounds && _this.props.fitBounds[i];
                             return c[0] !== (nc && nc[0]) || c[1] !== (nc && nc[1]);
                         })[0];
                     if (didFitBoundsUpdate ||
-                        !isEqual(this.props.fitBoundsOptions, nextProps.fitBoundsOptions)) {
-                        map.fitBounds(nextProps.fitBounds, nextProps.fitBoundsOptions, {
+                        !isEqual(prevProps.fitBoundsOptions, this.props.fitBoundsOptions)) {
+                        map.fitBounds(this.props.fitBounds, this.props.fitBoundsOptions, {
                             fitboundUpdate: true
@@ -185,8 +186,8 @@ });
                     didPitchUpdate) {
-                    var mm = nextProps.movingMethod || defaultMovingMethod;
-                    var flyToOptions = nextProps.flyToOptions, animationOptions = nextProps.animationOptions;
-                    map[mm](__assign({}, animationOptions, flyToOptions, { zoom: didZoomUpdate && nextProps.zoom ? nextProps.zoom[0] : zoom, center: didCenterUpdate ? nextProps.center : center, bearing: didBearingUpdate ? nextProps.bearing : bearing, pitch: didPitchUpdate ? nextProps.pitch : pitch }));
+                    var mm = this.props.movingMethod || defaultMovingMethod;
+                    var _a = this.props, flyToOptions = _a.flyToOptions, animationOptions = _a.animationOptions;
+                    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 }));
                 }
-                if (!isEqual(this.props.style, nextProps.style)) {
-                    map.setStyle(nextProps.style);
+                if (!isEqual(prevProps.style, this.props.style)) {
+                    map.setStyle(this.props.style);
                 }
@@ -210,3 +211,3 @@ return null;
         }(React.Component)),
-        _z.defaultProps = {
+        _y.defaultProps = {
             onStyleLoad: function (map, evt) { return null; },
@@ -222,5 +223,5 @@ center: defaultCenter,
         },
-        _z;
+        _y;
 };
 export default ReactMapboxFactory;
 //# sourceMappingURL=map.js.map

lib-esm/projected-layer.d.ts

@@ -34,3 +34,3 @@ import * as React from 'react';
     private havePropsChanged;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     componentWillUnmount(): void;
@@ -37,0 +37,0 @@ render(): JSX.Element;

lib-esm/projected-layer.js

@@ -55,11 +55,11 @@ var __extends = (this && this.__extends) || (function () {
     };
-    ProjectedLayer.prototype.havePropsChanged = function (props, nextProps) {
-        return (props.coordinates[0] !== nextProps.coordinates[0] ||
-            props.coordinates[1] !== nextProps.coordinates[1] ||
-            props.offset !== nextProps.offset ||
-            props.anchor !== nextProps.anchor);
+    ProjectedLayer.prototype.havePropsChanged = function (props, prevProps) {
+        return (props.coordinates[0] !== prevProps.coordinates[0] ||
+            props.coordinates[1] !== prevProps.coordinates[1] ||
+            props.offset !== prevProps.offset ||
+            props.anchor !== prevProps.anchor);
     };
-    ProjectedLayer.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        if (this.havePropsChanged(this.props, nextProps)) {
-            this.setState(overlayState(nextProps, this.props.map, this.container));
+    ProjectedLayer.prototype.componentDidUpdate = function (prevProps) {
+        if (this.havePropsChanged(this.props, prevProps)) {
+            this.setState(overlayState(this.props, this.props.map, this.container));
         }
@@ -66,0 +66,0 @@ };

lib-esm/scale-control.d.ts

@@ -26,3 +26,3 @@ import * as React from 'react';
     };
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
@@ -29,0 +29,0 @@ private setScale;

lib-esm/scale-control.js

@@ -27,2 +27,3 @@ var __extends = (this && this.__extends) || (function () {
 import { withMap } from './context';
+var triggerEvents = ['moveend', 'touchend', 'zoomend'];
 var scales = [
@@ -110,9 +111,15 @@ 0.01,
     }
-    ScaleControl.prototype.UNSAFE_componentWillMount = function () {
+    ScaleControl.prototype.componentDidMount = function () {
+        var _this = this;
         this.setScale();
-        this.props.map.on('zoomend', this.setScale);
+        triggerEvents.forEach(function (event) {
+            _this.props.map.on(event, _this.setScale);
+        });
     };
     ScaleControl.prototype.componentWillUnmount = function () {
+        var _this = this;
         if (this.props.map) {
-            this.props.map.off('zoomend', this.setScale);
+            triggerEvents.forEach(function (event) {
+                _this.props.map.off(event, _this.setScale);
+            });
         }
@@ -119,0 +126,0 @@ };

lib-esm/source.d.ts

@@ -18,3 +18,3 @@ import * as React from 'react';
     private onStyleDataChange;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     private initialize;
@@ -24,3 +24,3 @@ private onData;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(props: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     render(): null;
@@ -27,0 +27,0 @@ }

lib-esm/source.js

@@ -71,3 +71,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    Source.prototype.UNSAFE_componentWillMount = function () {
+    Source.prototype.componentDidMount = function () {
         var map = this.props.map;
@@ -102,12 +102,12 @@ map.on('styledata', this.onStyleDataChange);
     };
-    Source.prototype.UNSAFE_componentWillReceiveProps = function (props) {
-        var _a = this.props, geoJsonSource = _a.geoJsonSource, tileJsonSource = _a.tileJsonSource, map = _a.map;
-        if (tileJsonSource && props.tileJsonSource) {
-            var hasNewTilesSource = tileJsonSource.url !== props.tileJsonSource.url ||
-                tileJsonSource.tiles !== props.tileJsonSource.tiles ||
-                tileJsonSource.minzoom !== props.tileJsonSource.minzoom ||
-                tileJsonSource.maxzoom !== props.tileJsonSource.maxzoom;
+    Source.prototype.componentDidUpdate = function (prevProps) {
+        var geoJsonSource = prevProps.geoJsonSource, tileJsonSource = prevProps.tileJsonSource, map = prevProps.map;
+        if (tileJsonSource && this.props.tileJsonSource) {
+            var hasNewTilesSource = tileJsonSource.url !== this.props.tileJsonSource.url ||
+                tileJsonSource.tiles !== this.props.tileJsonSource.tiles ||
+                tileJsonSource.minzoom !== this.props.tileJsonSource.minzoom ||
+                tileJsonSource.maxzoom !== this.props.tileJsonSource.maxzoom;
             if (hasNewTilesSource) {
                 var layers = this.removeSource();
-                map.addSource(this.id, props.tileJsonSource);
+                map.addSource(this.id, this.props.tileJsonSource);
                 layers.forEach(function (layer) { return map.addLayer(layer, layer.before); });
@@ -117,8 +117,8 @@ }
         if (geoJsonSource &&
-            props.geoJsonSource &&
-            props.geoJsonSource.data !== geoJsonSource.data &&
-            props.geoJsonSource.data &&
+            this.props.geoJsonSource &&
+            this.props.geoJsonSource.data !== geoJsonSource.data &&
+            this.props.geoJsonSource.data &&
             map.getSource(this.id)) {
             var source = map.getSource(this.id);
-            source.setData(props.geoJsonSource.data);
+            source.setData(this.props.geoJsonSource.data);
         }
@@ -125,0 +125,0 @@ };

lib/cluster.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
 export interface Props {
-    ClusterMarkerFactory(coordinates: GeoJSON.Position, pointCount: number, getLeaves: (limit?: number, offset?: number) => Array<React.ReactElement<MarkerProps>>): React.ReactElement<MarkerProps>;
+    ClusterMarkerFactory(coordinates: GeoJSON.Position, pointCount: number, getLeaves: (limit?: number, offset?: number) => Array<React.ReactElement<MarkerProps> | undefined>): React.ReactElement<MarkerProps>;
     radius?: number;
@@ -40,5 +40,5 @@ maxZoom?: number;
     private featureClusterMap;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     private childrenChange;
@@ -45,0 +45,0 @@ private mapChange;

lib/cluster.js

@@ -100,3 +100,3 @@ "use strict";
     }
-    Cluster.prototype.UNSAFE_componentWillMount = function () {
+    Cluster.prototype.componentDidMount = function () {
         var _a = this.props, children = _a.children, map = _a.map;
@@ -115,6 +115,6 @@ if (children) {
     };
-    Cluster.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        var children = this.props.children;
-        if (children !== nextProps.children && nextProps.children) {
-            this.childrenChange(nextProps.children);
+    Cluster.prototype.componentDidUpdate = function (prevProps) {
+        var children = prevProps.children;
+        if (children !== this.props.children && this.props.children) {
+            this.childrenChange(this.props.children);
             this.mapChange(true);
@@ -121,0 +121,0 @@ }

lib/geojson-layer.d.ts

@@ -72,6 +72,6 @@ import * as React from 'react';
     private unbind;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
     isGeoJSONSource: (source?: MapboxGL.GeoJSONSourceRaw | MapboxGL.VectorSource | MapboxGL.RasterSource | MapboxGL.RasterDemSource | MapboxGL.GeoJSONSource | MapboxGL.VideoSource | MapboxGL.ImageSource | MapboxGL.CanvasSource | undefined) => source is MapboxGL.GeoJSONSource;
-    UNSAFE_componentWillReceiveProps(props: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     render(): null;
@@ -78,0 +78,0 @@ }

lib/geojson-layer.js

@@ -142,3 +142,3 @@ "use strict";
     };
-    GeoJSONLayer.prototype.UNSAFE_componentWillMount = function () {
+    GeoJSONLayer.prototype.componentDidMount = function () {
         var map = this.props.map;
@@ -156,5 +156,5 @@ this.initialize();
     };
-    GeoJSONLayer.prototype.UNSAFE_componentWillReceiveProps = function (props) {
+    GeoJSONLayer.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
-        var _a = this.props, data = _a.data, before = _a.before, layerOptions = _a.layerOptions, map = _a.map;
+        var data = prevProps.data, before = prevProps.before, layerOptions = prevProps.layerOptions, map = prevProps.map;
         var source = map.getSource(this.id);
@@ -164,17 +164,17 @@ if (!this.isGeoJSONSource(source)) {
         }
-        if (props.data !== data) {
-            source.setData(props.data);
-            this.source = __assign({ type: 'geojson' }, props.sourceOptions, { data: props.data });
+        if (prevProps.data !== data) {
+            source.setData(this.props.data);
+            this.source = __assign({ type: 'geojson' }, this.props.sourceOptions, { data: this.props.data });
         }
-        var layerFilterChanged = props.layerOptions &&
+        var layerFilterChanged = this.props.layerOptions &&
             layerOptions &&
-            !isEqual(props.layerOptions.filter, layerOptions.filter);
+            !isEqual(this.props.layerOptions.filter, layerOptions.filter);
         types.forEach(function (type) {
             var layerId = _this.buildLayerId(type);
-            if (props.layerOptions && layerFilterChanged) {
-                map.setFilter(layerId, props.layerOptions.filter || []);
+            if (_this.props.layerOptions && layerFilterChanged) {
+                map.setFilter(layerId, _this.props.layerOptions.filter || []);
             }
             var paintProp = toCamelCase(type) + 'Paint';
-            if (!isEqual(props[paintProp], _this.props[paintProp])) {
-                var paintDiff_1 = diff_1.default(_this.props[paintProp], props[paintProp]);
+            if (!isEqual(prevProps[paintProp], _this.props[paintProp])) {
+                var paintDiff_1 = diff_1.default(prevProps[paintProp], _this.props[paintProp]);
                 Object.keys(paintDiff_1).forEach(function (key) {
@@ -185,4 +185,4 @@ map.setPaintProperty(layerId, key, paintDiff_1[key]);
             var layoutProp = toCamelCase(type) + 'Layout';
-            if (!isEqual(props[layoutProp], _this.props[layoutProp])) {
-                var layoutDiff_1 = diff_1.default(_this.props[layoutProp], props[layoutProp]);
+            if (!isEqual(prevProps[layoutProp], _this.props[layoutProp])) {
+                var layoutDiff_1 = diff_1.default(prevProps[layoutProp], _this.props[layoutProp]);
                 Object.keys(layoutDiff_1).forEach(function (key) {
@@ -195,13 +195,13 @@ map.setLayoutProperty(layerId, key, layoutDiff_1[key]);
                 var prop = toCamelCase(type) + eventToHandler[event];
-                if (props[prop] !== _this.props[prop]) {
+                if (prevProps[prop] !== _this.props[prop]) {
+                    if (prevProps[prop]) {
+                        map.off(event, layerId, prevProps[prop]);
+                    }
                     if (_this.props[prop]) {
-                        map.off(event, layerId, _this.props[prop]);
+                        map.on(event, layerId, _this.props[prop]);
                     }
-                    if (props[prop]) {
-                        map.on(event, layerId, props[prop]);
-                    }
                 }
             });
-            if (before !== props.before) {
-                map.moveLayer(layerId, props.before);
+            if (before !== _this.props.before) {
+                map.moveLayer(layerId, _this.props.before);
             }
@@ -208,0 +208,0 @@ });

lib/image.js

@@ -30,3 +30,3 @@ "use strict";
     }
-    Image.prototype.UNSAFE_componentWillMount = function () {
+    Image.prototype.componentDidMount = function () {
         this.loadImage(this.props);
@@ -37,9 +37,9 @@ };
     };
-    Image.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        var id = this.props.id;
-        if (nextProps.map !== this.props.map) {
+    Image.prototype.componentDidUpdate = function (prevProps) {
+        var id = prevProps.id;
+        if (prevProps.map !== this.props.map) {
             Image.removeImage(this.props);
         }
-        if (nextProps.map && !nextProps.map.hasImage(id)) {
-            this.loadImage(nextProps);
+        if (this.props.map && !this.props.map.hasImage(id)) {
+            this.loadImage(this.props);
         }
@@ -46,0 +46,0 @@ };

lib/layer-events-hoc.d.ts

@@ -27,3 +27,3 @@ import * as React from 'react';
         onFeatureDragEnd: (evt: any) => void;
-        UNSAFE_componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
@@ -58,3 +58,3 @@ render(): JSX.Element;
         onFeatureDragEnd: (evt: any) => void;
-        UNSAFE_componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
@@ -61,0 +61,0 @@ render(): JSX.Element;

lib/layer-events-hoc.js

@@ -183,3 +183,3 @@ "use strict";
         }
-        EnhancedLayer.prototype.UNSAFE_componentWillMount = function () {
+        EnhancedLayer.prototype.componentDidMount = function () {
             var map = this.props.map;
@@ -186,0 +186,0 @@ map.on('click', this.id, this.onClick);

lib/layer.d.ts

@@ -56,7 +56,7 @@ import * as React from 'react';
     private onStyleDataChange;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(props: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     getChildren: () => JSX.Element[];
     render(): null;
 }

lib/layer.js

@@ -158,3 +158,3 @@ "use strict";
     }
-    Layer.prototype.UNSAFE_componentWillMount = function () {
+    Layer.prototype.componentDidMount = function () {
         var map = this.props.map;
@@ -195,8 +195,7 @@ this.initialize();
     };
-    Layer.prototype.UNSAFE_componentWillReceiveProps = function (props) {
+    Layer.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
-        var _a = this.props, paint = _a.paint, layout = _a.layout, before = _a.before, filter = _a.filter, id = _a.id, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
-        var map = this.props.map;
-        if (!isEqual(props.paint, paint)) {
-            var paintDiff_1 = diff_1.default(paint, props.paint);
+        var paint = prevProps.paint, layout = prevProps.layout, before = prevProps.before, filter = prevProps.filter, id = prevProps.id, minZoom = prevProps.minZoom, maxZoom = prevProps.maxZoom, map = prevProps.map;
+        if (!isEqual(this.props.paint, paint)) {
+            var paintDiff_1 = diff_1.default(paint, this.props.paint);
             Object.keys(paintDiff_1).forEach(function (key) {
@@ -206,4 +205,4 @@ map.setPaintProperty(id, key, paintDiff_1[key]);
         }
-        if (!isEqual(props.layout, layout)) {
-            var layoutDiff_1 = diff_1.default(layout, props.layout);
+        if (!isEqual(this.props.layout, layout)) {
+            var layoutDiff_1 = diff_1.default(layout, this.props.layout);
             Object.keys(layoutDiff_1).forEach(function (key) {
@@ -213,15 +212,15 @@ map.setLayoutProperty(id, key, layoutDiff_1[key]);
         }
-        if (!isEqual(props.filter, filter)) {
-            map.setFilter(id, props.filter);
+        if (!isEqual(this.props.filter, filter)) {
+            map.setFilter(id, this.props.filter);
         }
-        if (before !== props.before) {
-            map.moveLayer(id, props.before);
+        if (before !== this.props.before) {
+            map.moveLayer(id, this.props.before);
         }
-        if (minZoom !== props.minZoom || maxZoom !== props.maxZoom) {
-            map.setLayerZoomRange(id, props.minZoom, props.maxZoom);
+        if (minZoom !== this.props.minZoom || maxZoom !== this.props.maxZoom) {
+            map.setLayerZoomRange(id, this.props.minZoom, this.props.maxZoom);
         }
         Object.entries(eventToHandler).forEach(function (_a) {
             var event = _a[0], propName = _a[1];
-            var oldHandler = _this.props[propName];
-            var newHandler = props[propName];
+            var oldHandler = prevProps[propName];
+            var newHandler = _this.props[propName];
             if (oldHandler !== newHandler) {
@@ -228,0 +227,0 @@ if (oldHandler) {

lib/map-events.d.ts

@@ -57,3 +57,3 @@ /// <reference types="react" />
 export declare const listenEvents: (partialEvents: EventMapping, props: Partial<Events>, map: MapboxGl.Map) => Listeners;
-export declare const updateEvents: (listeners: Listeners, nextProps: Partial<Events>, map: MapboxGl.Map) => {
+export declare const updateEvents: (listeners: Listeners, currentProps: Partial<Events>, map: MapboxGl.Map) => {
     onStyleLoad?: ((evt: import("react").SyntheticEvent<any, Event>) => void) | undefined;
@@ -60,0 +60,0 @@ onResize?: ((evt: import("react").SyntheticEvent<any, Event>) => void) | undefined;

lib/map-events.js

@@ -71,5 +71,5 @@ "use strict";
 };
-exports.updateEvents = function (listeners, nextProps, map) {
+exports.updateEvents = function (listeners, currentProps, map) {
     var toListenOff = Object.keys(exports.events).filter(function (eventKey) {
-        return listeners[eventKey] && nextProps[eventKey] !== listeners[eventKey];
+        return listeners[eventKey] && typeof currentProps[eventKey] !== 'function';
     });
@@ -81,7 +81,7 @@ toListenOff.forEach(function (key) {
     var toListenOn = Object.keys(exports.events)
-        .filter(function (key) { return typeof nextProps[key] === 'function'; })
+        .filter(function (key) { return !listeners[key] && typeof currentProps[key] === 'function'; })
         .reduce(function (acc, next) { return ((acc[next] = exports.events[next]), acc); }, {});
-    var newListeners = exports.listenEvents(toListenOn, nextProps, map);
+    var newListeners = exports.listenEvents(toListenOn, currentProps, map);
     return __assign({}, listeners, newListeners);
 };
 //# sourceMappingURL=map-events.js.map

lib/map.d.ts

@@ -77,5 +77,5 @@ import * as MapboxGl from 'mapbox-gl';
     bearingSnap?: number;
-    injectCSS?: boolean;
     transformRequest?: RequestTransformFunction;
     antialias?: boolean;
+    mapInstance?: MapboxGl.Map;
 }
@@ -90,3 +90,3 @@ declare global {
 }
-declare const ReactMapboxFactory: ({ accessToken, apiUrl, minZoom, maxZoom, hash, preserveDrawingBuffer, scrollZoom, interactive, dragRotate, pitchWithRotate, attributionControl, customAttribution, logoPosition, renderWorldCopies, trackResize, touchZoomRotate, doubleClickZoom, keyboard, dragPan, boxZoom, refreshExpiredTiles, failIfMajorPerformanceCaveat, bearingSnap, injectCSS, antialias, transformRequest }: FactoryParameters) => {
+declare const ReactMapboxFactory: ({ accessToken, apiUrl, minZoom, maxZoom, hash, preserveDrawingBuffer, scrollZoom, interactive, dragRotate, pitchWithRotate, attributionControl, customAttribution, logoPosition, renderWorldCopies, trackResize, touchZoomRotate, doubleClickZoom, keyboard, dragPan, boxZoom, refreshExpiredTiles, failIfMajorPerformanceCaveat, bearingSnap, antialias, mapInstance, transformRequest }: FactoryParameters) => {
     new (props: Readonly<Props & Events>): {
@@ -100,3 +100,3 @@ state: State;
         componentWillUnmount(): void;
-        UNSAFE_componentWillReceiveProps(nextProps: Props & Events): null;
+        componentDidUpdate(prevProps: Props & Events): null;
         setRef: (x: HTMLElement | null) => void;
@@ -122,3 +122,3 @@ render(): JSX.Element;
         componentWillUnmount(): void;
-        UNSAFE_componentWillReceiveProps(nextProps: Props & Events): null;
+        componentDidUpdate(prevProps: Props & Events): null;
         setRef: (x: HTMLElement | null) => void;
@@ -125,0 +125,0 @@ render(): JSX.Element;

lib/map.js

@@ -44,8 +44,5 @@ "use strict";
 var ReactMapboxFactory = function (_a) {
-    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.injectCSS, injectCSS = _x === void 0 ? true : _x, _y = _a.antialias, antialias = _y === void 0 ? false : _y, transformRequest = _a.transformRequest;
-    var _z;
-    if (injectCSS) {
-        require('mapbox-gl/dist/mapbox-gl.css');
-    }
-    return _z = (function (_super) {
+    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;
+    var _y;
+    return _y = (function (_super) {
             __extends(ReactMapboxGl, _super);
@@ -55,3 +52,3 @@ function ReactMapboxGl() {
                 _this.state = {
-                    map: undefined,
+                    map: mapInstance,
                     ready: false
@@ -124,4 +121,7 @@ };
                 }
-                var map = new MapboxGl.Map(opts);
-                this.setState({ map: map });
+                var map = this.state.map;
+                if (!map) {
+                    map = new MapboxGl.Map(opts);
+                    this.setState({ map: map });
+                }
                 if (fitBounds) {
@@ -147,3 +147,4 @@ map.fitBounds(fitBounds, fitBoundsOptions, { fitboundUpdate: true });
             };
-            ReactMapboxGl.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
+            ReactMapboxGl.prototype.componentDidUpdate = function (prevProps) {
+                var _this = this;
                 var map = this.state.map;
@@ -153,3 +154,3 @@ if (!map) {
                 }
-                this.listeners = map_events_1.updateEvents(this.listeners, nextProps, map);
+                this.listeners = map_events_1.updateEvents(this.listeners, this.props, map);
                 var center = map.getCenter();
@@ -159,28 +160,28 @@ var zoom = map.getZoom();
                 var pitch = map.getPitch();
-                var didZoomUpdate = this.props.zoom !== nextProps.zoom &&
-                    (nextProps.zoom && nextProps.zoom[0]) !== zoom;
-                var didCenterUpdate = this.props.center !== nextProps.center &&
-                    ((nextProps.center && nextProps.center[0]) !== center.lng ||
-                        (nextProps.center && nextProps.center[1]) !== center.lat);
-                var didBearingUpdate = this.props.bearing !== nextProps.bearing &&
-                    (nextProps.bearing && nextProps.bearing[0]) !== bearing;
-                var didPitchUpdate = this.props.pitch !== nextProps.pitch &&
-                    (nextProps.pitch && nextProps.pitch[0]) !== pitch;
-                if (nextProps.maxBounds) {
-                    var didMaxBoundsUpdate = this.props.maxBounds !== nextProps.maxBounds;
+                var didZoomUpdate = prevProps.zoom !== this.props.zoom &&
+                    (this.props.zoom && this.props.zoom[0]) !== zoom;
+                var didCenterUpdate = prevProps.center !== this.props.center &&
+                    ((this.props.center && this.props.center[0]) !== center.lng ||
+                        (this.props.center && this.props.center[1]) !== center.lat);
+                var didBearingUpdate = prevProps.bearing !== this.props.bearing &&
+                    (this.props.bearing && this.props.bearing[0]) !== bearing;
+                var didPitchUpdate = prevProps.pitch !== this.props.pitch &&
+                    (this.props.pitch && this.props.pitch[0]) !== pitch;
+                if (this.props.maxBounds) {
+                    var didMaxBoundsUpdate = prevProps.maxBounds !== this.props.maxBounds;
                     if (didMaxBoundsUpdate) {
-                        map.setMaxBounds(nextProps.maxBounds);
+                        map.setMaxBounds(this.props.maxBounds);
                     }
                 }
-                if (nextProps.fitBounds) {
-                    var fitBounds = this.props.fitBounds;
-                    var didFitBoundsUpdate = fitBounds !== nextProps.fitBounds ||
-                        nextProps.fitBounds.length !== (fitBounds && fitBounds.length) ||
+                if (this.props.fitBounds) {
+                    var fitBounds = prevProps.fitBounds;
+                    var didFitBoundsUpdate = fitBounds !== this.props.fitBounds ||
+                        this.props.fitBounds.length !== (fitBounds && fitBounds.length) ||
                         !!fitBounds.filter(function (c, i) {
-                            var nc = nextProps.fitBounds && nextProps.fitBounds[i];
+                            var nc = _this.props.fitBounds && _this.props.fitBounds[i];
                             return c[0] !== (nc && nc[0]) || c[1] !== (nc && nc[1]);
                         })[0];
                     if (didFitBoundsUpdate ||
-                        !isEqual(this.props.fitBoundsOptions, nextProps.fitBoundsOptions)) {
-                        map.fitBounds(nextProps.fitBounds, nextProps.fitBoundsOptions, {
+                        !isEqual(prevProps.fitBoundsOptions, this.props.fitBoundsOptions)) {
+                        map.fitBounds(this.props.fitBounds, this.props.fitBoundsOptions, {
                             fitboundUpdate: true
@@ -194,8 +195,8 @@ });
                     didPitchUpdate) {
-                    var mm = nextProps.movingMethod || defaultMovingMethod;
-                    var flyToOptions = nextProps.flyToOptions, animationOptions = nextProps.animationOptions;
-                    map[mm](__assign({}, animationOptions, flyToOptions, { zoom: didZoomUpdate && nextProps.zoom ? nextProps.zoom[0] : zoom, center: didCenterUpdate ? nextProps.center : center, bearing: didBearingUpdate ? nextProps.bearing : bearing, pitch: didPitchUpdate ? nextProps.pitch : pitch }));
+                    var mm = this.props.movingMethod || defaultMovingMethod;
+                    var _a = this.props, flyToOptions = _a.flyToOptions, animationOptions = _a.animationOptions;
+                    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 }));
                 }
-                if (!isEqual(this.props.style, nextProps.style)) {
-                    map.setStyle(nextProps.style);
+                if (!isEqual(prevProps.style, this.props.style)) {
+                    map.setStyle(this.props.style);
                 }
@@ -219,3 +220,3 @@ return null;
         }(React.Component)),
-        _z.defaultProps = {
+        _y.defaultProps = {
             onStyleLoad: function (map, evt) { return null; },
@@ -231,5 +232,5 @@ center: defaultCenter,
         },
-        _z;
+        _y;
 };
 exports.default = ReactMapboxFactory;
 //# sourceMappingURL=map.js.map

lib/projected-layer.d.ts

@@ -34,3 +34,3 @@ import * as React from 'react';
     private havePropsChanged;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     componentWillUnmount(): void;
@@ -37,0 +37,0 @@ render(): JSX.Element;

lib/projected-layer.js

@@ -64,11 +64,11 @@ "use strict";
     };
-    ProjectedLayer.prototype.havePropsChanged = function (props, nextProps) {
-        return (props.coordinates[0] !== nextProps.coordinates[0] ||
-            props.coordinates[1] !== nextProps.coordinates[1] ||
-            props.offset !== nextProps.offset ||
-            props.anchor !== nextProps.anchor);
+    ProjectedLayer.prototype.havePropsChanged = function (props, prevProps) {
+        return (props.coordinates[0] !== prevProps.coordinates[0] ||
+            props.coordinates[1] !== prevProps.coordinates[1] ||
+            props.offset !== prevProps.offset ||
+            props.anchor !== prevProps.anchor);
     };
-    ProjectedLayer.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        if (this.havePropsChanged(this.props, nextProps)) {
-            this.setState(overlays_1.overlayState(nextProps, this.props.map, this.container));
+    ProjectedLayer.prototype.componentDidUpdate = function (prevProps) {
+        if (this.havePropsChanged(this.props, prevProps)) {
+            this.setState(overlays_1.overlayState(this.props, this.props.map, this.container));
         }
@@ -75,0 +75,0 @@ };

lib/scale-control.d.ts

@@ -26,3 +26,3 @@ import * as React from 'react';
     };
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
@@ -29,0 +29,0 @@ private setScale;

lib/scale-control.js

@@ -36,2 +36,3 @@ "use strict";
 var context_1 = require("./context");
+var triggerEvents = ['moveend', 'touchend', 'zoomend'];
 var scales = [
@@ -119,9 +120,15 @@ 0.01,
     }
-    ScaleControl.prototype.UNSAFE_componentWillMount = function () {
+    ScaleControl.prototype.componentDidMount = function () {
+        var _this = this;
         this.setScale();
-        this.props.map.on('zoomend', this.setScale);
+        triggerEvents.forEach(function (event) {
+            _this.props.map.on(event, _this.setScale);
+        });
     };
     ScaleControl.prototype.componentWillUnmount = function () {
+        var _this = this;
         if (this.props.map) {
-            this.props.map.off('zoomend', this.setScale);
+            triggerEvents.forEach(function (event) {
+                _this.props.map.off(event, _this.setScale);
+            });
         }
@@ -128,0 +135,0 @@ };

lib/source.d.ts

@@ -18,3 +18,3 @@ import * as React from 'react';
     private onStyleDataChange;
-    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
     private initialize;
@@ -24,3 +24,3 @@ private onData;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(props: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     render(): null;
@@ -27,0 +27,0 @@ }

lib/source.js

@@ -80,3 +80,3 @@ "use strict";
     }
-    Source.prototype.UNSAFE_componentWillMount = function () {
+    Source.prototype.componentDidMount = function () {
         var map = this.props.map;
@@ -111,12 +111,12 @@ map.on('styledata', this.onStyleDataChange);
     };
-    Source.prototype.UNSAFE_componentWillReceiveProps = function (props) {
-        var _a = this.props, geoJsonSource = _a.geoJsonSource, tileJsonSource = _a.tileJsonSource, map = _a.map;
-        if (tileJsonSource && props.tileJsonSource) {
-            var hasNewTilesSource = tileJsonSource.url !== props.tileJsonSource.url ||
-                tileJsonSource.tiles !== props.tileJsonSource.tiles ||
-                tileJsonSource.minzoom !== props.tileJsonSource.minzoom ||
-                tileJsonSource.maxzoom !== props.tileJsonSource.maxzoom;
+    Source.prototype.componentDidUpdate = function (prevProps) {
+        var geoJsonSource = prevProps.geoJsonSource, tileJsonSource = prevProps.tileJsonSource, map = prevProps.map;
+        if (tileJsonSource && this.props.tileJsonSource) {
+            var hasNewTilesSource = tileJsonSource.url !== this.props.tileJsonSource.url ||
+                tileJsonSource.tiles !== this.props.tileJsonSource.tiles ||
+                tileJsonSource.minzoom !== this.props.tileJsonSource.minzoom ||
+                tileJsonSource.maxzoom !== this.props.tileJsonSource.maxzoom;
             if (hasNewTilesSource) {
                 var layers = this.removeSource();
-                map.addSource(this.id, props.tileJsonSource);
+                map.addSource(this.id, this.props.tileJsonSource);
                 layers.forEach(function (layer) { return map.addLayer(layer, layer.before); });
@@ -126,8 +126,8 @@ }
         if (geoJsonSource &&
-            props.geoJsonSource &&
-            props.geoJsonSource.data !== geoJsonSource.data &&
-            props.geoJsonSource.data &&
+            this.props.geoJsonSource &&
+            this.props.geoJsonSource.data !== geoJsonSource.data &&
+            this.props.geoJsonSource.data &&
             map.getSource(this.id)) {
             var source = map.getSource(this.id);
-            source.setData(props.geoJsonSource.data);
+            source.setData(this.props.geoJsonSource.data);
         }
@@ -134,0 +134,0 @@ };

package.json

 {
   "name": "react-mapbox-gl",
-  "version": "4.8.6",
+  "version": "5.0.0",
   "description": "A React binding of mapbox-gl-js",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -20,23 +20,23 @@ ![Logo](/logo.png)
 
-* ReactMapboxGL
-* Layer & Feature
-  * property `symbol` displays a mapbox symbol.
-  * property `line` displays a lineString.
-  * property `fill` displays a polygon.
-  * property `circle` displays a mapbox circle.
-  * property `raster` displays a mapbox raster tiles.
-  * property `fill-extrusion` displays a layer with extruded buildings.
-  * property `background` displays a mapbox background layer.
-  * property `heatmap` displays a mapbox heatmap layer.
-* Source
-* GeoJSONLayer
+- ReactMapboxGL
+- Layer & Feature
+  - property `symbol` displays a mapbox symbol.
+  - property `line` displays a lineString.
+  - property `fill` displays a polygon.
+  - property `circle` displays a mapbox circle.
+  - property `raster` displays a mapbox raster tiles.
+  - property `fill-extrusion` displays a layer with extruded buildings.
+  - property `background` displays a mapbox background layer.
+  - property `heatmap` displays a mapbox heatmap layer.
+- Source
+- GeoJSONLayer
 
 ### DOM components (normal React components)
 
-* ZoomControl
-* ScaleControl
-* RotationControl
-* Marker (Projected component)
-* Popup (Projected component)
-* Cluster
+- ZoomControl
+- ScaleControl
+- RotationControl
+- Marker (Projected component)
+- Popup (Projected component)
+- Cluster
 
@@ -51,5 +51,20 @@ ## Getting Started
 
+Adding the css in your index.html:
+
+```html
+<html>
+  <head>
+    ...
+    <link
+      href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
+      rel="stylesheet"
+    />
+  </head>
+</html>
+```
+
 ```jsx
 // ES6
 import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
 
@@ -60,2 +75,3 @@ // ES5
 var Feature = ReactMapboxGl.Feature;
+require('mapbox-gl/dist/mapbox-gl.css');
 
@@ -62,0 +78,0 @@ const Map = ReactMapboxGl({

src/geojson-layer.ts

@@ -238,3 +238,3 @@ import * as React from 'react';
 
-  public UNSAFE_componentWillMount() {
+  public componentDidMount() {
     const { map } = this.props;
@@ -263,4 +263,4 @@ this.initialize();
 
-  public UNSAFE_componentWillReceiveProps(props: Props) {
-    const { data, before, layerOptions, map } = this.props;
+  public componentDidUpdate(prevProps: Props) {
+    const { data, before, layerOptions, map } = prevProps;
     const source = map.getSource(this.id);
@@ -271,9 +271,9 @@ if (!this.isGeoJSONSource(source)) {
 
-    if (props.data !== data) {
-      source.setData(props.data);
+    if (prevProps.data !== data) {
+      source.setData(this.props.data);
 
       this.source = {
         type: 'geojson',
-        ...props.sourceOptions,
-        data: props.data
+        ...this.props.sourceOptions,
+        data: this.props.data
         // tslint:disable-next-line:no-any
@@ -284,5 +284,5 @@ } as any;
     const layerFilterChanged =
-      props.layerOptions &&
+      this.props.layerOptions &&
       layerOptions &&
-      !isEqual(props.layerOptions.filter, layerOptions.filter);
+      !isEqual(this.props.layerOptions.filter, layerOptions.filter);
 
@@ -292,4 +292,4 @@ types.forEach(type => {
 
-      if (props.layerOptions && layerFilterChanged) {
-        map.setFilter(layerId, props.layerOptions.filter || []);
+      if (this.props.layerOptions && layerFilterChanged) {
+        map.setFilter(layerId, this.props.layerOptions.filter || []);
       }
@@ -299,4 +299,4 @@
 
-      if (!isEqual(props[paintProp], this.props[paintProp])) {
-        const paintDiff = diff(this.props[paintProp], props[paintProp]);
+      if (!isEqual(prevProps[paintProp], this.props[paintProp])) {
+        const paintDiff = diff(prevProps[paintProp], this.props[paintProp]);
 
@@ -310,4 +310,4 @@ Object.keys(paintDiff).forEach(key => {
 
-      if (!isEqual(props[layoutProp], this.props[layoutProp])) {
-        const layoutDiff = diff(this.props[layoutProp], props[layoutProp]);
+      if (!isEqual(prevProps[layoutProp], this.props[layoutProp])) {
+        const layoutDiff = diff(prevProps[layoutProp], this.props[layoutProp]);
 
@@ -324,9 +324,9 @@ Object.keys(layoutDiff).forEach(key => {
 
-        if (props[prop] !== this.props[prop]) {
-          if (this.props[prop]) {
-            map.off(event, layerId, this.props[prop]);
+        if (prevProps[prop] !== this.props[prop]) {
+          if (prevProps[prop]) {
+            map.off(event, layerId, prevProps[prop]);
           }
 
-          if (props[prop]) {
-            map.on(event, layerId, props[prop]);
+          if (this.props[prop]) {
+            map.on(event, layerId, this.props[prop]);
           }
@@ -336,4 +336,4 @@ }
 
-      if (before !== props.before) {
-        map.moveLayer(layerId, props.before);
+      if (before !== this.props.before) {
+        map.moveLayer(layerId, this.props.before);
       }
@@ -340,0 +340,0 @@ });

src/layer.ts

@@ -247,3 +247,3 @@ import * as React from 'react';
 
-  public UNSAFE_componentWillMount() {
+  public componentDidMount() {
     const { map } = this.props;
@@ -292,8 +292,16 @@
 
-  public UNSAFE_componentWillReceiveProps(props: Props) {
-    const { paint, layout, before, filter, id, minZoom, maxZoom } = this.props;
-    const { map } = this.props;
+  public componentDidUpdate(prevProps: Props) {
+    const {
+      paint,
+      layout,
+      before,
+      filter,
+      id,
+      minZoom,
+      maxZoom,
+      map
+    } = prevProps;
 
-    if (!isEqual(props.paint, paint)) {
-      const paintDiff = diff(paint, props.paint);
+    if (!isEqual(this.props.paint, paint)) {
+      const paintDiff = diff(paint, this.props.paint);
 
@@ -305,4 +313,4 @@ Object.keys(paintDiff).forEach(key => {
 
-    if (!isEqual(props.layout, layout)) {
-      const layoutDiff = diff(layout, props.layout);
+    if (!isEqual(this.props.layout, layout)) {
+      const layoutDiff = diff(layout, this.props.layout);
 
@@ -314,13 +322,13 @@ Object.keys(layoutDiff).forEach(key => {
 
-    if (!isEqual(props.filter, filter)) {
-      map.setFilter(id, props.filter);
+    if (!isEqual(this.props.filter, filter)) {
+      map.setFilter(id, this.props.filter);
     }
 
-    if (before !== props.before) {
-      map.moveLayer(id, props.before);
+    if (before !== this.props.before) {
+      map.moveLayer(id, this.props.before);
     }
 
-    if (minZoom !== props.minZoom || maxZoom !== props.maxZoom) {
+    if (minZoom !== this.props.minZoom || maxZoom !== this.props.maxZoom) {
       // TODO: Fix when PR https://github.com/DefinitelyTyped/DefinitelyTyped/pull/22036 is merged
-      map.setLayerZoomRange(id, props.minZoom!, props.maxZoom!);
+      map.setLayerZoomRange(id, this.props.minZoom!, this.props.maxZoom!);
     }
@@ -331,4 +339,4 @@
     >).forEach(([event, propName]) => {
-      const oldHandler = this.props[propName];
-      const newHandler = props[propName];
+      const oldHandler = prevProps[propName];
+      const newHandler = this.props[propName];
 
@@ -335,0 +343,0 @@ if (oldHandler !== newHandler) {

src/source.ts

@@ -31,3 +31,3 @@ import * as React from 'react';
 
-  public UNSAFE_componentWillMount() {
+  public componentDidMount() {
     const { map } = this.props;
@@ -110,17 +110,17 @@
 
-  public UNSAFE_componentWillReceiveProps(props: Props) {
-    const { geoJsonSource, tileJsonSource, map } = this.props;
+  public componentDidUpdate(prevProps: Props) {
+    const { geoJsonSource, tileJsonSource, map } = prevProps;
 
     // Update tilesJsonSource
-    if (tileJsonSource && props.tileJsonSource) {
+    if (tileJsonSource && this.props.tileJsonSource) {
       const hasNewTilesSource =
-        tileJsonSource.url !== props.tileJsonSource.url ||
+        tileJsonSource.url !== this.props.tileJsonSource.url ||
         // Check for reference equality on tiles array
-        tileJsonSource.tiles !== props.tileJsonSource.tiles ||
-        tileJsonSource.minzoom !== props.tileJsonSource.minzoom ||
-        tileJsonSource.maxzoom !== props.tileJsonSource.maxzoom;
+        tileJsonSource.tiles !== this.props.tileJsonSource.tiles ||
+        tileJsonSource.minzoom !== this.props.tileJsonSource.minzoom ||
+        tileJsonSource.maxzoom !== this.props.tileJsonSource.maxzoom;
 
       if (hasNewTilesSource) {
         const layers = this.removeSource();
-        map.addSource(this.id, props.tileJsonSource);
+        map.addSource(this.id, this.props.tileJsonSource);
 
@@ -134,9 +134,9 @@ layers.forEach(layer => map.addLayer(layer, layer.before));
       geoJsonSource &&
-      props.geoJsonSource &&
-      props.geoJsonSource.data !== geoJsonSource.data &&
-      props.geoJsonSource.data &&
+      this.props.geoJsonSource &&
+      this.props.geoJsonSource.data !== geoJsonSource.data &&
+      this.props.geoJsonSource.data &&
       map.getSource(this.id)
     ) {
       const source = map.getSource(this.id) as GeoJSONSource;
-      source.setData(props.geoJsonSource.data);
+      source.setData(this.props.geoJsonSource.data);
     }
@@ -143,0 +143,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

491775

increased by0.58%

Lines of code

9578

increased by0.34%

Number of lines in readme file

115

increased by16.16%

No dependency changes