react-native-maps 0.29.4 → 0.30.0

package/lib/components/AnimatedRegion.js

@@ -8,37 +8,46 @@ if (__DEV__) {
     );
   }
 }
-// const __Animated = Object.getPrototypeOf(AnimatedWithChildren);
-// if (__Animated.name !== 'Animated') console.error('AnimatedRegion could not obtain Animated base class');
 
-var _uniqueId = 1;
+const configTypes = [
+  'latitude',
+  'longitude',
+  'latitudeDelta',
+  'longitudeDelta',
+];
+
+const defaultValues = {
+  // probably want to come up with better defaults
+  latitude: 0,
+  longitude: 0,
+  latitudeDelta: 0,
+  longitudeDelta: 0,
+};
+
+let _uniqueId = 1;
+
+const getAnimatedValue = (valueIn, fallback) => {
+  return valueIn instanceof Animated.Value
+    ? valueIn
+    : new Animated.Value(fallback);
+};
 
 export default class AnimatedMapRegion extends AnimatedWithChildren {
-  constructor(valueIn) {
+  constructor(valueIn = {}) {
     super();
-    var value = valueIn || {
-      // probably want to come up with better defaults
-      latitude: 0,
-      longitude: 0,
-      latitudeDelta: 0,
-      longitudeDelta: 0,
-    };
-    this.latitude =
-      value.latitude instanceof Animated.Value
-        ? value.latitude
-        : new Animated.Value(value.latitude);
-    this.longitude =
-      value.longitude instanceof Animated.Value
-        ? value.longitude
-        : new Animated.Value(value.longitude);
-    this.latitudeDelta =
-      value.latitudeDelta instanceof Animated.Value
-        ? value.latitudeDelta
-        : new Animated.Value(value.latitudeDelta);
-    this.longitudeDelta =
-      value.longitudeDelta instanceof Animated.Value
-        ? value.longitudeDelta
-        : new Animated.Value(value.longitudeDelta);
+    this.latitude = getAnimatedValue(valueIn.latitude, defaultValues.latitude);
+    this.longitude = getAnimatedValue(
+      valueIn.longitude,
+      defaultValues.longitude
+    );
+    this.latitudeDelta = getAnimatedValue(
+      valueIn.latitudeDelta,
+      defaultValues.latitudeDelta
+    );
+    this.longitudeDelta = getAnimatedValue(
+      valueIn.longitudeDelta,
+      defaultValues.longitudeDelta
+    );
     this._regionListeners = {};
   }
 
@@ -95,10 +104,8 @@ export default class AnimatedMapRegion extends AnimatedWithChildren {
   }
 
   addListener(callback) {
-    var id = String(_uniqueId++);
-    var jointCallback = (/*{value}*/) => {
-      callback(this.__getValue());
-    };
+    const id = String(_uniqueId++);
+    const jointCallback = () => /*{value}*/ callback(this.__getValue());
     this._regionListeners[id] = {
       latitude: this.latitude.addListener(jointCallback),
       longitude: this.longitude.addListener(jointCallback),
@@ -119,80 +126,36 @@ export default class AnimatedMapRegion extends AnimatedWithChildren {
   }
 
   spring(config) {
-    var animations = [];
-    config.hasOwnProperty('latitude') &&
-      animations.push(
-        Animated.spring(this.latitude, {
-          ...config,
-          toValue: config.latitude,
-        })
-      );
-
-    config.hasOwnProperty('longitude') &&
-      animations.push(
-        Animated.spring(this.longitude, {
-          ...config,
-          toValue: config.longitude,
-        })
-      );
-
-    config.hasOwnProperty('latitudeDelta') &&
-      animations.push(
-        Animated.spring(this.latitudeDelta, {
-          ...config,
-          toValue: config.latitudeDelta,
-        })
-      );
-
-    config.hasOwnProperty('longitudeDelta') &&
-      animations.push(
-        Animated.spring(this.longitudeDelta, {
-          ...config,
-          toValue: config.longitudeDelta,
-        })
-      );
-
+    const animations = [];
+    for (const type of configTypes) {
+      if (config.hasOwnProperty(type)) {
+        animations.push(
+          Animated.spring(this[type], {
+            ...config,
+            toValue: config[type],
+            // may help to eliminate some dev warnings and perf issues
+            useNativeDriver: !!config?.useNativeDriver,
+          })
+        );
+      }
+    }
     return Animated.parallel(animations);
   }
 
   timing(config) {
-    var animations = [];
-    config.hasOwnProperty('latitude') &&
-      animations.push(
-        Animated.timing(this.latitude, {
-          ...config,
-          toValue: config.latitude,
-          useNativeDriver: false,
-        })
-      );
-
-    config.hasOwnProperty('longitude') &&
-      animations.push(
-        Animated.timing(this.longitude, {
-          ...config,
-          toValue: config.longitude,
-          useNativeDriver: false,
-        })
-      );
-
-    config.hasOwnProperty('latitudeDelta') &&
-      animations.push(
-        Animated.timing(this.latitudeDelta, {
-          ...config,
-          toValue: config.latitudeDelta,
-          useNativeDriver: false,
-        })
-      );
-
-    config.hasOwnProperty('longitudeDelta') &&
-      animations.push(
-        Animated.timing(this.longitudeDelta, {
-          ...config,
-          toValue: config.longitudeDelta,
-          useNativeDriver: false,
-        })
-      );
-
+    const animations = [];
+    for (const type of configTypes) {
+      if (config.hasOwnProperty(type)) {
+        animations.push(
+          Animated.timing(this[type], {
+            ...config,
+            toValue: config[type],
+            // may help to eliminate some dev warnings and perf issues
+            useNativeDriver: !!config?.useNativeDriver,
+          })
+        );
+      }
+    }
     return Animated.parallel(animations);
   }
 }

package/lib/components/Geojson.js

@@ -39,6 +39,12 @@ const propTypes = {
    */
   lineDashPhase: PropTypes.number,
 
+  /**
+   * Make the `Polygon` or `Polyline` tappable
+   *
+   */
+  tappable: PropTypes.boolean,
+
   /**
    * An array of numbers specifying the dash pattern to use for the path.
    *
@@ -100,9 +106,29 @@ const propTypes = {
    *
    */
   markerComponent: PropTypes.node,
+
+  /**
+   * The title of the marker. This is only used if the <Marker /> component has no children that
+   * are a `<Callout />`, in which case the default callout behavior will be used, which
+   * will show both the `title` and the `description`, if provided.
+   */
+  title: PropTypes.string,
 };
 
-const Geojson = props => {
+const Geojson = (props) => {
+  const {
+    title,
+    image,
+    zIndex,
+    onPress,
+    lineCap,
+    lineJoin,
+    tappable,
+    miterLimit,
+    lineDashPhase,
+    lineDashPattern,
+    markerComponent,
+  } = props;
   const overlays = makeOverlays(props.geojson.features);
   return (
     <React.Fragment>
@@ -116,12 +142,13 @@ const Geojson = props => {
             <Marker
               key={index}
               coordinate={overlay.coordinates}
-              image={props.image}
+              image={image}
+              title={title}
               pinColor={markerColor}
-              zIndex={props.zIndex}
-              onPress={() => props.onPress && props.onPress(overlay)}
+              zIndex={zIndex}
+              onPress={() => onPress && onPress(overlay)}
             >
-              {props.markerComponent}
+              {markerComponent}
             </Marker>
           );
         }
@@ -134,9 +161,9 @@ const Geojson = props => {
               strokeColor={strokeColor}
               fillColor={fillColor}
               strokeWidth={strokeWidth}
-              tappable={props.tappable}
-              onPress={() => props.onPress && props.onPress(overlay)}
-              zIndex={props.zIndex}
+              tappable={tappable}
+              onPress={() => onPress && onPress(overlay)}
+              zIndex={zIndex}
             />
           );
         }
@@ -147,14 +174,14 @@ const Geojson = props => {
               coordinates={overlay.coordinates}
               strokeColor={strokeColor}
               strokeWidth={strokeWidth}
-              lineDashPhase={props.lineDashPhase}
-              lineDashPattern={props.lineDashPattern}
-              lineCap={props.lineCap}
-              lineJoin={props.lineJoin}
-              miterLimit={props.miterLimit}
-              zIndex={props.zIndex}
-              tappable={props.tappable}
-              onPress={() => props.onPress && props.onPress(overlay)}
+              lineDashPhase={lineDashPhase}
+              lineDashPattern={lineDashPattern}
+              lineCap={lineCap}
+              lineJoin={lineJoin}
+              miterLimit={miterLimit}
+              zIndex={zIndex}
+              tappable={tappable}
+              onPress={() => onPress && onPress(overlay)}
             />
           );
         }
@@ -167,51 +194,51 @@ Geojson.propTypes = propTypes;
 
 export default Geojson;
 
-export const makeOverlays = features => {
+export const makeOverlays = (features) => {
   const points = features
     .filter(
-      f =>
+      (f) =>
         f.geometry &&
         (f.geometry.type === 'Point' || f.geometry.type === 'MultiPoint')
     )
-    .map(feature =>
-      makeCoordinates(feature).map(coordinates =>
+    .map((feature) =>
+      makeCoordinates(feature).map((coordinates) =>
         makeOverlay(coordinates, feature)
       )
     )
     .reduce(flatten, [])
-    .map(overlay => ({ ...overlay, type: 'point' }));
+    .map((overlay) => ({ ...overlay, type: 'point' }));
 
   const lines = features
     .filter(
-      f =>
+      (f) =>
         f.geometry &&
         (f.geometry.type === 'LineString' ||
           f.geometry.type === 'MultiLineString')
     )
-    .map(feature =>
-      makeCoordinates(feature).map(coordinates =>
+    .map((feature) =>
+      makeCoordinates(feature).map((coordinates) =>
         makeOverlay(coordinates, feature)
       )
     )
     .reduce(flatten, [])
-    .map(overlay => ({ ...overlay, type: 'polyline' }));
+    .map((overlay) => ({ ...overlay, type: 'polyline' }));
 
   const multipolygons = features
-    .filter(f => f.geometry && f.geometry.type === 'MultiPolygon')
-    .map(feature =>
-      makeCoordinates(feature).map(coordinates =>
+    .filter((f) => f.geometry && f.geometry.type === 'MultiPolygon')
+    .map((feature) =>
+      makeCoordinates(feature).map((coordinates) =>
         makeOverlay(coordinates, feature)
       )
     )
     .reduce(flatten, []);
 
   const polygons = features
-    .filter(f => f.geometry && f.geometry.type === 'Polygon')
-    .map(feature => makeOverlay(makeCoordinates(feature), feature))
+    .filter((f) => f.geometry && f.geometry.type === 'Polygon')
+    .map((feature) => makeOverlay(makeCoordinates(feature), feature))
     .reduce(flatten, [])
     .concat(multipolygons)
-    .map(overlay => ({ ...overlay, type: 'polygon' }));
+    .map((overlay) => ({ ...overlay, type: 'polygon' }));
 
   return points.concat(lines).concat(polygons);
 };
@@ -236,11 +263,11 @@ const makeOverlay = (coordinates, feature) => {
   return overlay;
 };
 
-const makePoint = c => ({ latitude: c[1], longitude: c[0] });
+const makePoint = (c) => ({ latitude: c[1], longitude: c[0] });
 
-const makeLine = l => l.map(makePoint);
+const makeLine = (l) => l.map(makePoint);
 
-const makeCoordinates = feature => {
+const makeCoordinates = (feature) => {
   const g = feature.geometry;
   if (g.type === 'Point') {
     return [makePoint(g.coordinates)];
@@ -253,7 +280,7 @@ const makeCoordinates = feature => {
   } else if (g.type === 'Polygon') {
     return g.coordinates.map(makeLine);
   } else if (g.type === 'MultiPolygon') {
-    return g.coordinates.map(p => p.map(makeLine));
+    return g.coordinates.map((p) => p.map(makeLine));
   } else {
     return [];
   }
@@ -271,7 +298,7 @@ const doesOverlayContainProperty = (overlay, property) => {
 };
 
 const getRgbaFromHex = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
   return `rgba(${r},${g},${b},${alpha})`;
 };
 
@@ -293,15 +320,15 @@ const getColor = (props, overlay, colorType, overrideColorProp) => {
     }
     return color;
   }
-  return null;
+  return;
 };
 
 const getStrokeWidth = (props, overlay) => {
   if (props.hasOwnProperty('strokeWidth')) {
-    return props['strokeWidth'];
+    return props.strokeWidth;
   }
   if (doesOverlayContainProperty(overlay, 'stroke-width')) {
     return overlay.feature.properties['stroke-width'];
   }
-  return 0;
+  return;
 };

package/lib/components/MapCircle.js

@@ -128,7 +128,7 @@ class MapCircle extends React.Component {
     return (
       <AIRMapCircle
         {...this.props}
-        ref={ref => {
+        ref={(ref) => {
           this.circle = ref;
         }}
       />

package/lib/components/MapHeatmap.js

@@ -73,13 +73,13 @@ class MapHeatmap extends React.Component {
     let gradient;
     if (this.props.gradient) {
       gradient = Object.assign({}, this.props.gradient);
-      gradient.colors = gradient.colors.map(c => processColor(c));
+      gradient.colors = gradient.colors.map((c) => processColor(c));
     }
     return (
       <AIRMapHeatmap
         {...this.props}
         gradient={gradient}
-        ref={ref => {
+        ref={(ref) => {
           this.heatmap = ref;
         }}
       />

package/lib/components/MapMarker.js

@@ -189,6 +189,8 @@ const propTypes = {
 
   draggable: PropTypes.bool,
 
+  tappable: PropTypes.bool,
+
   /**
    * Sets whether this marker should track view changes true.
    */
@@ -333,14 +335,14 @@ class MapMarker extends React.Component {
 
     return (
       <AIRMapMarker
-        ref={ref => {
+        ref={(ref) => {
           this.marker = ref;
         }}
         {...this.props}
         image={image}
         icon={icon}
         style={[styles.marker, this.props.style]}
-        onPress={event => {
+        onPress={(event) => {
           if (this.props.stopPropagation) {
             event.stopPropagation();
           }

package/lib/components/MapPolygon.js

@@ -175,7 +175,7 @@ class MapPolygon extends React.Component {
     return (
       <AIRMapPolygon
         {...this.props}
-        ref={ref => {
+        ref={(ref) => {
           this.polygon = ref;
         }}
         onLayout={

package/lib/components/MapPolyline.js

@@ -147,7 +147,7 @@ class MapPolyline extends React.Component {
     return (
       <AIRMapPolyline
         {...this.props}
-        ref={ref => {
+        ref={(ref) => {
           this.polyline = ref;
         }}
       />

package/lib/components/MapUrlTile.js

@@ -28,12 +28,20 @@ const propTypes = {
    * @platform android
    */
   zIndex: PropTypes.number,
+
   /**
    * The maximum zoom level for this tile overlay.
    *
    */
   maximumZ: PropTypes.number,
 
+  /**
+   * (Optional) The maximum native zoom level for this tile overlay. Tiles are auto-scaled for higher
+   * zoom levels.
+   *
+   */
+  maximumNativeZ: PropTypes.number,
+
   /**
    * The minimum zoom level for this tile overlay.
    *
@@ -48,12 +56,20 @@ const propTypes = {
   shouldReplaceMapContent: PropTypes.bool,
 
   /**
-   * (Optional) Tile size for iOS only, default size is 256 * 256.
+   * (Optional) Tile size only, default size is 256 (for tiles of 256 * 256 pixels)
    *
-   * @platform ios
    */
   tileSize: PropTypes.number,
 
+  /**
+   * (Optional) Doubles tile size from 256 to 512 utilising higher zoom levels i.e.
+   * loading 4 higher zoom level tiles and combining them for one high-resolution
+   * tile. iOS does this automatically, even if it is not desirable always.
+   *
+   *  @platform android
+   */
+  doubleTileSize: PropTypes.bool,
+
   /**
    *
    * Allow tiles using the TMS coordinate system (origin bottom left)
@@ -61,6 +77,42 @@ const propTypes = {
    *
    */
   flipY: PropTypes.bool,
+
+  /**
+   *
+   * (Optional) Enable caching of tiles in the specified directory. Directory
+   * can be specified either as a normal path or in URL format (file://). Tiles
+   * are stored in tileCachePath directory as follows "/{z}/{x}/{y}" i.e. in
+   * sub-directories 2-levels deep, filename tile y-coordinate without any
+   * filetype-extension.
+   * NB! All cache management needs to be implemented by client e.g. deleting tiles
+   * to manage use of storage space etc.
+   *
+   */
+  tileCachePath: PropTypes.string,
+
+  /**
+   * (Optional) Defines how maximum age in seconds for cached tile before they
+   * are refreshed. NB! Refresh logic is "serve-stale-while-refresh" i.e. to
+   * ensure map availability a stale (over max age) tile is served while a tile
+   * refresh process is started in the background.
+   */
+  tileCacheMaxAge: PropTypes.number,
+
+  /**
+   * (Optional) Sets offline-mode. In offline-mode tiles are not fetched from
+   * the tile servers, rather only tiles stored in the cache directory are used.
+   * Furthermore automated tile scaling is activated: if tile at a desired zoom
+   * level is not found from the cache directory, then lower zoom level tile is
+   * used (until minimumZ) and scaled.
+   */
+  offlineMode: PropTypes.bool,
+
+  /**
+   * (Optional) Map layer opacity. Value between 0 - 1, with 0 meaning fully
+   * transparent.
+   */
+  opacity: PropTypes.number,
 };
 
 class MapUrlTile extends React.Component {

package/lib/components/MapView.js

@@ -1042,7 +1042,7 @@ class MapView extends React.Component {
     if (Platform.OS === 'android' && this.props.liteMode) {
       return (
         <AIRMapLite
-          ref={ref => {
+          ref={(ref) => {
             this.map = ref;
           }}
           {...props}
@@ -1054,7 +1054,7 @@ class MapView extends React.Component {
 
     return (
       <AIRMap
-        ref={ref => {
+        ref={(ref) => {
           this.map = ref;
         }}
         {...props}
@@ -1069,7 +1069,7 @@ MapView.childContextTypes = childContextTypes;
 
 MapView.MAP_TYPES = MAP_TYPES;
 
-const nativeComponent = Component =>
+const nativeComponent = (Component) =>
   requireNativeComponent(Component, MapView, {
     nativeOnly: {
       onChange: true,
@@ -1090,7 +1090,7 @@ if (Platform.OS === 'android') {
         'react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.'
       );
 }
-const getAirMapComponent = provider => airMaps[provider || 'default'];
+const getAirMapComponent = (provider) => airMaps[provider || 'default'];
 
 let AIRMapLite;
 if (!NativeModules.UIManager.getViewManagerConfig) {

package/lib/components/MapWMSTile.js

@@ -29,12 +29,20 @@ const propTypes = {
    * @platform android
    */
   zIndex: PropTypes.number,
+
   /**
    * The maximum zoom level for this tile overlay.
    *
    */
   maximumZ: PropTypes.number,
 
+  /**
+   * (Optional) The maximum native zoom level for this tile overlay. Tiles are auto-scaled for higher
+   * zoom levels.
+   *
+   */
+  maximumNativeZ: PropTypes.number,
+
   /**
    * The minimum zoom level for this tile overlay.
    *
@@ -47,15 +55,54 @@ const propTypes = {
    * @platform ios
    */
   shouldReplaceMapContent: PropTypes.bool,
+
   /**
-   * tileSize.
+   * (Optional) Tile size only, default size is 256 (for tiles of 256 * 256 pixels)
    *
    */
   tileSize: PropTypes.number,
 
   /**
-   * opacity. between 0 - 1
    *
+   * Allow tiles using the TMS coordinate system (origin bottom left)
+   * to be used, and displayed at their correct coordinates
+   *
+   */
+  flipY: PropTypes.bool,
+
+  /**
+   *
+   * (Optional) Enable caching of tiles in the specified directory. Directory
+   * can be specified either as a normal path or in URL format (file://). Tiles
+   * are stored in tileCachePath directory as follows "/{z}/{x}/{y}" i.e. in
+   * sub-directories 2-levels deep, filename tile y-coordinate without any
+   * filetype-extension.
+   * NB! All cache management needs to be implemented by client e.g. deleting tiles
+   * to manage use of storage space etc.
+   *
+   */
+  tileCachePath: PropTypes.string,
+
+  /**
+   * (Optional) Defines how maximum age in seconds for cached tile before they
+   * are refreshed. NB! Refresh logic is "serve-stale-while-refresh" i.e. to
+   * ensure map availability a stale (over max age) tile is served while a tile
+   * refresh process is started in the background.
+   */
+  tileCacheMaxAge: PropTypes.number,
+
+  /**
+   * (Optional) Sets offline-mode. In offline-mode tiles are not fetched from
+   * the tile servers, rather only tiles stored in the cache directory are used.
+   * Furthermore automated tile scaling is activated: if tile at a desired zoom
+   * level is not found from the cache directory, then lower zoom level tile is
+   * used (until minimumZ) and scaled.
+   */
+  offlineMode: PropTypes.bool,
+
+  /**
+   * (Optional) Map layer opacity. Value between 0 - 1, with 0 meaning fully
+   * transparent.
    */
   opacity: PropTypes.number,
 };

package/lib/components/decorateMapComponent.js

@@ -24,7 +24,7 @@ export const contextTypes = {
   provider: PropTypes.string,
 };
 
-export const createNotSupportedComponent = message => () => {
+export const createNotSupportedComponent = (message) => () => {
   console.error(message);
   return null;
 };