react-mapbox-gl - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0

lib-esm/geojson-layer.js

@@ -65,5 +65,4 @@ var __extends = (this && this.__extends) || (function () {
             };
-            map.addLayer(__assign({ id: layerId, source: _this.id, type: type,
-                paint: paint,
-                layout: layout }, layerOptions), before);
+            var layer = __assign({ id: layerId, source: _this.id, type: type, paint: paint, layout: layout }, layerOptions);
+            map.addLayer(layer, before);
             _this.mapLayerMouseHandlers(type);
@@ -70,0 +69,0 @@ };

lib-esm/source.d.ts

@@ -12,5 +12,5 @@ import * as React from 'react';
 }
-export interface LayerWithBefore extends Layer {
+export declare type LayerWithBefore = Layer & {
     before?: string;
-}
+};
 export declare class Source extends React.Component<Props> {
@@ -17,0 +17,0 @@ private id;

lib-esm/source.js

@@ -103,5 +103,22 @@ var __extends = (this && this.__extends) || (function () {
         var geoJsonSource = prevProps.geoJsonSource, tileJsonSource = prevProps.tileJsonSource, map = prevProps.map;
+        var source = map.getSource(this.id);
         if (tileJsonSource && this.props.tileJsonSource) {
-            var hasNewTilesSource = tileJsonSource.url !== this.props.tileJsonSource.url ||
-                tileJsonSource.tiles !== this.props.tileJsonSource.tiles ||
+            var urlUpdated = false;
+            var tilesUpdated = false;
+            if (source && source.type === 'vector') {
+                var hasNewSourceUrl = tileJsonSource.url !== this.props.tileJsonSource.url;
+                if (hasNewSourceUrl && this.props.tileJsonSource.url !== undefined) {
+                    source.setUrl(this.props.tileJsonSource.url);
+                    urlUpdated = true;
+                }
+                var hasNewSourceTiles = tileJsonSource.tiles !== this.props.tileJsonSource.tiles;
+                if (hasNewSourceTiles &&
+                    this.props.tileJsonSource.tiles !== undefined) {
+                    source.setTiles(this.props.tileJsonSource.tiles);
+                    tilesUpdated = true;
+                }
+            }
+            var hasNewTilesSource = (!urlUpdated && tileJsonSource.url !== this.props.tileJsonSource.url) ||
+                (!tilesUpdated &&
+                    tileJsonSource.tiles !== this.props.tileJsonSource.tiles) ||
                 tileJsonSource.minzoom !== this.props.tileJsonSource.minzoom ||
@@ -119,4 +136,4 @@ tileJsonSource.maxzoom !== this.props.tileJsonSource.maxzoom;
             this.props.geoJsonSource.data &&
-            map.getSource(this.id)) {
-            var source = map.getSource(this.id);
+            source &&
+            source.type === 'geojson') {
             source.setData(this.props.geoJsonSource.data);
@@ -123,0 +140,0 @@ }

lib/geojson-layer.js

@@ -77,5 +77,4 @@ "use strict";
             };
-            map.addLayer(__assign({ id: layerId, source: _this.id, type: type,
-                paint: paint,
-                layout: layout }, layerOptions), before);
+            var layer = __assign({ id: layerId, source: _this.id, type: type, paint: paint, layout: layout }, layerOptions);
+            map.addLayer(layer, before);
             _this.mapLayerMouseHandlers(type);
@@ -82,0 +81,0 @@ };

lib/source.d.ts

@@ -12,5 +12,5 @@ import * as React from 'react';
 }
-export interface LayerWithBefore extends Layer {
+export declare type LayerWithBefore = Layer & {
     before?: string;
-}
+};
 export declare class Source extends React.Component<Props> {
@@ -17,0 +17,0 @@ private id;

lib/source.js

@@ -112,5 +112,22 @@ "use strict";
         var geoJsonSource = prevProps.geoJsonSource, tileJsonSource = prevProps.tileJsonSource, map = prevProps.map;
+        var source = map.getSource(this.id);
         if (tileJsonSource && this.props.tileJsonSource) {
-            var hasNewTilesSource = tileJsonSource.url !== this.props.tileJsonSource.url ||
-                tileJsonSource.tiles !== this.props.tileJsonSource.tiles ||
+            var urlUpdated = false;
+            var tilesUpdated = false;
+            if (source && source.type === 'vector') {
+                var hasNewSourceUrl = tileJsonSource.url !== this.props.tileJsonSource.url;
+                if (hasNewSourceUrl && this.props.tileJsonSource.url !== undefined) {
+                    source.setUrl(this.props.tileJsonSource.url);
+                    urlUpdated = true;
+                }
+                var hasNewSourceTiles = tileJsonSource.tiles !== this.props.tileJsonSource.tiles;
+                if (hasNewSourceTiles &&
+                    this.props.tileJsonSource.tiles !== undefined) {
+                    source.setTiles(this.props.tileJsonSource.tiles);
+                    tilesUpdated = true;
+                }
+            }
+            var hasNewTilesSource = (!urlUpdated && tileJsonSource.url !== this.props.tileJsonSource.url) ||
+                (!tilesUpdated &&
+                    tileJsonSource.tiles !== this.props.tileJsonSource.tiles) ||
                 tileJsonSource.minzoom !== this.props.tileJsonSource.minzoom ||
@@ -128,4 +145,4 @@ tileJsonSource.maxzoom !== this.props.tileJsonSource.maxzoom;
             this.props.geoJsonSource.data &&
-            map.getSource(this.id)) {
-            var source = map.getSource(this.id);
+            source &&
+            source.type === 'geojson') {
             source.setData(this.props.geoJsonSource.data);
@@ -132,0 +149,0 @@ }

package.json

 {
   "name": "react-mapbox-gl",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "A React binding of mapbox-gl-js",
@@ -75,3 +75,3 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "mapbox-gl": "^1.10.1",
+    "mapbox-gl": "^1.12.0",
     "prop-types": "^15.6.2",
@@ -88,3 +88,3 @@ "react": "^16.11.0",
     "@types/jest": "24.0.19",
-    "@types/mapbox-gl": "^1.10.2",
+    "@types/mapbox-gl": "^1.12.8",
     "@types/node": "8.0.29",
@@ -100,3 +100,3 @@ "@types/prettier": "1.10.0",
     "jest": "24.9.0",
-    "mapbox-gl": "^1.10.1",
+    "mapbox-gl": "^1.12.0",
     "prettier": "1.10.2",
@@ -103,0 +103,0 @@ "prop-types": "15.6.2",

src/geojson-layer.ts

@@ -151,14 +151,17 @@ import * as React from 'react';
 
-    map.addLayer(
-      {
-        id: layerId,
-        source: this.id,
-        type,
-        paint,
-        layout,
-        ...layerOptions
-      },
-      before
-    );
+    const layer: MapboxGL.Layer = {
+      id: layerId,
+      source: this.id,
+      // TODO: Fix mapbox-gl types
+      // tslint:disable-next-line:no-any
+      type: type as any,
+      // TODO: Fix mapbox-gl types
+      // tslint:disable-next-line:no-any
+      paint: paint as any,
+      layout,
+      ...layerOptions
+    };
 
+    map.addLayer(layer, before);
+
     this.mapLayerMouseHandlers(type);
@@ -165,0 +168,0 @@ };

src/layer.ts

@@ -191,3 +191,5 @@ import * as React from 'react';
       layout,
-      paint,
+      // TODO: Fix mapbox-gl types
+      // tslint:disable-next-line:no-any
+      paint: paint as any,
       metadata
@@ -194,0 +196,0 @@ };

src/source.ts

@@ -15,5 +15,3 @@ import * as React from 'react';
 
-export interface LayerWithBefore extends Layer {
-  before?: string;
-}
+export type LayerWithBefore = Layer & { before?: string };
 
@@ -83,3 +81,3 @@ export class Source extends React.Component<Props> {
       layers = layers
-        .map((layer, idx) => {
+        .map((layer, idx): LayerWithBefore => {
           const { id: before } = layers[idx + 1] || { id: undefined };
@@ -113,9 +111,37 @@ return { ...layer, before };
     const { geoJsonSource, tileJsonSource, map } = prevProps;
+    const source = map.getSource(this.id);
 
     // Update tilesJsonSource
     if (tileJsonSource && this.props.tileJsonSource) {
+      let urlUpdated = false;
+      let tilesUpdated = false;
+
+      if (source && source.type === 'vector') {
+        const hasNewSourceUrl =
+          tileJsonSource.url !== this.props.tileJsonSource.url;
+
+        if (hasNewSourceUrl && this.props.tileJsonSource.url !== undefined) {
+          source.setUrl(this.props.tileJsonSource.url);
+          urlUpdated = true;
+        }
+
+        const hasNewSourceTiles =
+          tileJsonSource.tiles !== this.props.tileJsonSource.tiles;
+
+        if (
+          hasNewSourceTiles &&
+          this.props.tileJsonSource.tiles !== undefined
+        ) {
+          source.setTiles(this.props.tileJsonSource.tiles);
+          tilesUpdated = true;
+        }
+      }
+
+      // Prefer the more targetted updates, but fallback to swapping out the entire source
+      // This applies to raster tile sources, for example
       const hasNewTilesSource =
-        tileJsonSource.url !== this.props.tileJsonSource.url ||
+        (!urlUpdated && tileJsonSource.url !== this.props.tileJsonSource.url) ||
         // Check for reference equality on tiles array
-        tileJsonSource.tiles !== this.props.tileJsonSource.tiles ||
+        (!tilesUpdated &&
+          tileJsonSource.tiles !== this.props.tileJsonSource.tiles) ||
         tileJsonSource.minzoom !== this.props.tileJsonSource.minzoom ||
@@ -138,5 +164,5 @@ tileJsonSource.maxzoom !== this.props.tileJsonSource.maxzoom;
       this.props.geoJsonSource.data &&
-      map.getSource(this.id)
+      source &&
+      source.type === 'geojson'
     ) {
-      const source = map.getSource(this.id) as GeoJSONSource;
       source.setData(this.props.geoJsonSource.data);
@@ -143,0 +169,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

496156

increased by0.89%

Lines of code

9635

increased by0.6%

No dependency changes