react-native-maps 0.31.0 → 1.0.0-beta.2

package/ios/AirMaps/AIRMapManager.m

@@ -28,8 +28,6 @@
 #import "AIRMapSnapshot.h"
 #import "RCTConvert+AirMap.h"
 #import "AIRMapOverlay.h"
-#import "AIRWeakTimerReference.h"
-#import "AIRWeakMapReference.h"
 #import <MapKit/MapKit.h>
 
 static NSString *const RCTMapViewKey = @"MapView";
@@ -278,31 +276,6 @@ RCT_EXPORT_METHOD(animateCamera:(nonnull NSNumber *)reactTag
     }];
 }
 
-
-RCT_EXPORT_METHOD(animateToNavigation:(nonnull NSNumber *)reactTag
-        withRegion:(MKCoordinateRegion)region
-        withBearing:(CGFloat)bearing
-        withAngle:(double)angle
-        withDuration:(CGFloat)duration)
-{
-    [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-        id view = viewRegistry[reactTag];
-        if (![view isKindOfClass:[AIRMap class]]) {
-            RCTLogError(@"Invalid view returned from registry, expecting AIRMap, got: %@", view);
-        } else {
-            AIRMap *mapView = (AIRMap *)view;
-            MKMapCamera *mapCamera = [[mapView camera] copy];
-             [mapCamera setPitch:angle];
-             [mapCamera setHeading:bearing];
-
-            [AIRMap animateWithDuration:duration/1000 animations:^{
-                [(AIRMap *)view setRegion:region animated:YES];
-                [mapView setCamera:mapCamera animated:YES];
-            }];
-        }
-    }];
-}
-
 RCT_EXPORT_METHOD(animateToRegion:(nonnull NSNumber *)reactTag
         withRegion:(MKCoordinateRegion)region
         withDuration:(CGFloat)duration)
@@ -319,68 +292,6 @@ RCT_EXPORT_METHOD(animateToRegion:(nonnull NSNumber *)reactTag
     }];
 }
 
-RCT_EXPORT_METHOD(animateToCoordinate:(nonnull NSNumber *)reactTag
-        withRegion:(CLLocationCoordinate2D)latlng
-        withDuration:(CGFloat)duration)
-{
-    [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-        id view = viewRegistry[reactTag];
-        if (![view isKindOfClass:[AIRMap class]]) {
-            RCTLogError(@"Invalid view returned from registry, expecting AIRMap, got: %@", view);
-        } else {
-            AIRMap *mapView = (AIRMap *)view;
-            MKCoordinateRegion region;
-            region.span = mapView.region.span;
-            region.center = latlng;
-            [AIRMap animateWithDuration:duration/1000 animations:^{
-                [mapView setRegion:region animated:YES];
-            }];
-        }
-    }];
-}
-
-RCT_EXPORT_METHOD(animateToViewingAngle:(nonnull NSNumber *)reactTag
-                  withAngle:(double)angle
-                  withDuration:(CGFloat)duration)
-{
-  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-      id view = viewRegistry[reactTag];
-      if (![view isKindOfClass:[AIRMap class]]) {
-          RCTLogError(@"Invalid view returned from registry, expecting AIRMap, got: %@", view);
-      } else {
-          AIRMap *mapView = (AIRMap *)view;
-
-          MKMapCamera *mapCamera = [[mapView camera] copy];
-          [mapCamera setPitch:angle];
-
-          [AIRMap animateWithDuration:duration/1000 animations:^{
-              [mapView setCamera:mapCamera animated:YES];
-          }];
-      }
-  }];
-}
-
-RCT_EXPORT_METHOD(animateToBearing:(nonnull NSNumber *)reactTag
-                  withBearing:(CGFloat)bearing
-                  withDuration:(CGFloat)duration)
-{
-  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-      id view = viewRegistry[reactTag];
-      if (![view isKindOfClass:[AIRMap class]]) {
-          RCTLogError(@"Invalid view returned from registry, expecting AIRMap, got: %@", view);
-      } else {
-          AIRMap *mapView = (AIRMap *)view;
-
-          MKMapCamera *mapCamera = [[mapView camera] copy];
-          [mapCamera setHeading:bearing];
-
-          [AIRMap animateWithDuration:duration/1000 animations:^{
-              [mapView setCamera:mapCamera animated:YES];
-          }];
-      }
-  }];
-}
-
 RCT_EXPORT_METHOD(fitToElements:(nonnull NSNumber *)reactTag
         edgePadding:(nonnull NSDictionary *)edgePadding
         animated:(BOOL)animated)
@@ -677,24 +588,6 @@ RCT_EXPORT_METHOD(getAddressFromCoordinates:(nonnull NSNumber *)reactTag
                       else if ([result isEqualToString:@"base64"]) {
                           callback(@[[NSNull null], [data base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithCarriageReturn]]);
                       }
-                      else if ([result isEqualToString:@"legacy"]) {
-
-                          // In the initial (iOS only) implementation of takeSnapshot,
-                          // both the uri and the base64 encoded string were returned.
-                          // Returning both is rarely useful and in fact causes a
-                          // performance penalty when only the file URI is desired.
-                          // In that case the base64 encoded string was always marshalled
-                          // over the JS-bridge (which is quite slow).
-                          // A new more flexible API was created to cover this.
-                          // This code should be removed in a future release when the
-                          // old API is fully deprecated.
-                          [data writeToFile:filePath atomically:YES];
-                          NSDictionary *snapshotData = @{
-                                                         @"uri": filePath,
-                                                         @"data": [data base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithCarriageReturn]
-                                                         };
-                          callback(@[[NSNull null], snapshotData]);
-                      }
                   }
                   UIGraphicsEndImageContext();
               }];
@@ -1048,30 +941,14 @@ static int kDragCenterContext;
     
 }
 
-- (void)mapView:(AIRMap *)mapView regionWillChangeAnimated:(__unused BOOL)animated
+- (void)mapViewDidChangeVisibleRegion:(AIRMap *)mapView
 {
-    // Don't send region did change events until map has
-    // started rendering, as these won't represent the final location
-    if(mapView.hasStartedRendering){
-        [self _regionChanged:mapView];
-    }
-
-    AIRWeakTimerReference *weakTarget = [[AIRWeakTimerReference alloc] initWithTarget:self andSelector:@selector(_onTick:)];
-    
-    mapView.regionChangeObserveTimer = [NSTimer timerWithTimeInterval:AIRMapRegionChangeObserveInterval
-                                                               target:weakTarget
-                                                             selector:@selector(timerDidFire:)
-                                                             userInfo:@{ RCTMapViewKey: [[AIRWeakMapReference alloc] initWithMapView: mapView] }
-                                                              repeats:YES];
-
-    [[NSRunLoop mainRunLoop] addTimer:mapView.regionChangeObserveTimer forMode:NSRunLoopCommonModes];
+    [self _regionChanged:mapView];
 }
 
 - (void)mapView:(AIRMap *)mapView regionDidChangeAnimated:(__unused BOOL)animated
 {
     CGFloat zoomLevel = [self zoomLevel:mapView];
-    [mapView.regionChangeObserveTimer invalidate];
-    mapView.regionChangeObserveTimer = nil;
 
     // Don't send region did change events until map has
     // started rendering, as these won't represent the final location
@@ -1103,7 +980,6 @@ static int kDragCenterContext;
       mapView.hasStartedRendering = YES;
     }
     [mapView beginLoading];
-    [self _emitRegionChangeEvent:mapView continuous:NO];
 }
 
 - (void)mapViewDidFinishRenderingMap:(AIRMap *)mapView fullyRendered:(BOOL)fullyRendered
@@ -1113,12 +989,6 @@ static int kDragCenterContext;
 
 #pragma mark Private
 
-- (void)_onTick:(NSTimer *)timer
-{
-    AIRWeakMapReference *weakRef = timer.userInfo[RCTMapViewKey];
-    [self _regionChanged:weakRef.mapView];
-}
-
 - (void)_regionChanged:(AIRMap *)mapView
 {
     BOOL needZoom = NO;

package/lib/AnimatedRegion.d.ts

@@ -0,0 +1,19 @@
+import { Animated } from 'react-native';
+import { Region } from './sharedTypes';
+declare const AnimatedWithChildren: any;
+declare type Props = Partial<Region> | undefined;
+export default class AnimatedMapRegion extends AnimatedWithChildren {
+    constructor(valueIn?: Props);
+    setValue(value: Region): void;
+    setOffset(offset: Region): void;
+    flattenOffset(): void;
+    private __getValue;
+    private __attach;
+    private __detach;
+    stopAnimation(callback: (region: Region) => void): void;
+    addListener(callback: (region: Region) => void): string;
+    removeListener(id: string): void;
+    spring(config: Animated.SpringAnimationConfig & Region): Animated.CompositeAnimation;
+    timing(config: Animated.TimingAnimationConfig & Region): Animated.CompositeAnimation;
+}
+export {};

package/lib/AnimatedRegion.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+const AnimatedWithChildren = Object.getPrototypeOf(react_native_1.Animated.ValueXY);
+if (__DEV__) {
+    if (AnimatedWithChildren.name !== 'AnimatedWithChildren') {
+        console.error('AnimatedRegion could not obtain AnimatedWithChildren base class');
+    }
+}
+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) => {
+    if (valueIn instanceof react_native_1.Animated.Value) {
+        return valueIn;
+    }
+    else if (typeof valueIn === 'number') {
+        return new react_native_1.Animated.Value(valueIn);
+    }
+    return new react_native_1.Animated.Value(fallback);
+};
+class AnimatedMapRegion extends AnimatedWithChildren {
+    constructor(valueIn = {}) {
+        super();
+        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 = {};
+    }
+    setValue(value) {
+        this.latitude._value = value.latitude;
+        this.longitude._value = value.longitude;
+        this.latitudeDelta._value = value.latitudeDelta;
+        this.longitudeDelta._value = value.longitudeDelta;
+    }
+    setOffset(offset) {
+        this.latitude.setOffset(offset.latitude);
+        this.longitude.setOffset(offset.longitude);
+        this.latitudeDelta.setOffset(offset.latitudeDelta);
+        this.longitudeDelta.setOffset(offset.longitudeDelta);
+    }
+    flattenOffset() {
+        this.latitude.flattenOffset();
+        this.longitude.flattenOffset();
+        this.latitudeDelta.flattenOffset();
+        this.longitudeDelta.flattenOffset();
+    }
+    __getValue() {
+        return {
+            latitude: this.latitude.__getValue(),
+            longitude: this.longitude.__getValue(),
+            latitudeDelta: this.latitudeDelta.__getValue(),
+            longitudeDelta: this.longitudeDelta.__getValue(),
+        };
+    }
+    __attach() {
+        this.latitude.__addChild(this);
+        this.longitude.__addChild(this);
+        this.latitudeDelta.__addChild(this);
+        this.longitudeDelta.__addChild(this);
+    }
+    __detach() {
+        this.latitude.__removeChild(this);
+        this.longitude.__removeChild(this);
+        this.latitudeDelta.__removeChild(this);
+        this.longitudeDelta.__removeChild(this);
+    }
+    stopAnimation(callback) {
+        this.latitude.stopAnimation();
+        this.longitude.stopAnimation();
+        this.latitudeDelta.stopAnimation();
+        this.longitudeDelta.stopAnimation();
+        callback && callback(this.__getValue());
+    }
+    addListener(callback) {
+        const id = String(_uniqueId++);
+        const jointCallback = () => /*{value}*/ callback(this.__getValue());
+        this._regionListeners[id] = {
+            latitude: this.latitude.addListener(jointCallback),
+            longitude: this.longitude.addListener(jointCallback),
+            latitudeDelta: this.latitudeDelta.addListener(jointCallback),
+            longitudeDelta: this.longitudeDelta.addListener(jointCallback),
+        };
+        return id;
+    }
+    removeListener(id) {
+        this.latitude.removeListener(this._regionListeners[id].latitude);
+        this.longitude.removeListener(this._regionListeners[id].longitude);
+        this.latitudeDelta.removeListener(this._regionListeners[id].latitudeDelta);
+        this.longitudeDelta.removeListener(this._regionListeners[id].longitudeDelta);
+        delete this._regionListeners[id];
+    }
+    spring(config) {
+        const animations = [];
+        for (const type of configTypes) {
+            if (config.hasOwnProperty(type)) {
+                animations.push(react_native_1.Animated.spring(this[type], {
+                    ...config,
+                    toValue: config[type],
+                    // may help to eliminate some dev warnings and perf issues
+                    useNativeDriver: !!config?.useNativeDriver,
+                }));
+            }
+        }
+        return react_native_1.Animated.parallel(animations);
+    }
+    timing(config) {
+        const animations = [];
+        for (const type of configTypes) {
+            if (config.hasOwnProperty(type)) {
+                animations.push(react_native_1.Animated.timing(this[type], {
+                    ...config,
+                    toValue: config[type],
+                    // may help to eliminate some dev warnings and perf issues
+                    useNativeDriver: !!config?.useNativeDriver,
+                }));
+            }
+        }
+        return react_native_1.Animated.parallel(animations);
+    }
+}
+exports.default = AnimatedMapRegion;

package/lib/Geojson.d.ts

@@ -0,0 +1,166 @@
+/// <reference types="react" />
+import { Feature, FeatureCollection, Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon } from 'geojson';
+import { Props as MarkerProps } from './MapMarker';
+import { Props as PolygonProps } from './MapPolygon';
+import { Props as PolylineProps } from './MapPolyline';
+import { LatLng } from './sharedTypes';
+declare type Props = {
+    /**
+     * The pincolor used on markers
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    color?: MarkerProps['pinColor'];
+    /**
+     * The fill color to use for the path.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    fillColor?: PolygonProps['fillColor'];
+    /**
+     * [Geojson](https://geojson.org/) description of object.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    geojson: FeatureCollection;
+    /**
+     * A custom image to be used as the marker's icon. Only local image resources are allowed to be
+     * used.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    image?: MarkerProps['image'];
+    /**
+     * The line cap style to apply to the open ends of the path.
+     * The default style is `round`.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Supported
+     */
+    lineCap?: PolylineProps['lineCap'];
+    /**
+     * An array of numbers specifying the dash pattern to use for the path.
+     *
+     * The array contains one or more numbers that indicate the lengths (measured in points) of the
+     * line segments and gaps in the pattern. The values in the array alternate, starting with the
+     * first line segment length, followed by the first gap length, followed by the second line
+     * segment length, and so on.
+     *
+     * This property is set to `null` by default, which indicates no line dash pattern.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    lineDashPattern?: PolylineProps['lineDashPattern'];
+    /**
+     * The offset (in points) at which to start drawing the dash pattern.
+     *
+     * Use this property to start drawing a dashed line partway through a segment or gap. For
+     * example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the
+     * middle of the first gap.
+     *
+     * The default value of this property is 0.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineDashPhase?: PolylineProps['lineDashPhase'];
+    /**
+     * The line join style to apply to corners of the path.
+     * The default style is `round`.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineJoin?: PolylineProps['lineJoin'];
+    /**
+     * Component to render in place of the default marker when the overlay type is a `point`
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    markerComponent?: MarkerProps['children'];
+    /**
+     * The limiting value that helps avoid spikes at junctions between connected line segments.
+     * The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If
+     * the ratio of the miter length—that is, the diagonal length of the miter join—to the line
+     * thickness exceeds the miter limit, the joint is converted to a bevel join. The default
+     * miter limit is 10, which results in the conversion of miters whose angle at the joint
+     * is less than 11 degrees.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    miterLimit?: PolylineProps['miterLimit'];
+    /**
+     * Callback that is called when the user presses any of the overlays
+     */
+    onPress?: (event: OverlayPressEvent) => void;
+    /**
+     * The stroke color to use for the path.
+     *
+     * @platform — iOS: Supported
+     * @platform — Android: Supported
+     */
+    strokeColor?: PolygonProps['strokeColor'] | PolylineProps['strokeColor'];
+    /**
+     * The stroke width to use for the path.
+     *
+     * @platform — iOS: Supported
+     * @platform — Android: Supported
+     */
+    strokeWidth?: PolygonProps['strokeWidth'] | PolylineProps['strokeWidth'];
+    /**
+     * Make the `Polygon` or `Polyline` tappable
+     *
+     * @platform — iOS: Google Maps only
+     * @platform — Android: Supported
+     */
+    tappable?: PolygonProps['tappable'] | PolylineProps['tappable'];
+    /**
+     * 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.
+     *
+     * @platform — iOS: Supported
+     * @platform — Android: Supported
+     */
+    title?: MarkerProps['title'];
+    /**
+     * The order in which this tile overlay is drawn with respect to other overlays. An overlay
+     * with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays
+     * with the same z-index is arbitrary. The default zIndex is 0.
+     *
+     * @platform iOS: Apple Maps: [Marker], Google Maps: [Marker, Polygon, Polyline]
+     * @platform Android: Supported
+     */
+    zIndex?: MarkerProps['zIndex'] | PolygonProps['zIndex'] | PolylineProps['zIndex'];
+};
+declare const Geojson: (props: Props) => JSX.Element;
+export default Geojson;
+declare type OverlayPressEvent = {
+    type: AnyPointOverlay['type'] | AnyLineStringOverlay['type'] | AnyPolygonOverlay['type'];
+    feature: AnyPointOverlay['feature'] | AnyLineStringOverlay['feature'] | AnyPolygonOverlay['feature'];
+    coordinates: AnyPointOverlay['coordinates'] | AnyLineStringOverlay['coordinates'] | AnyPolygonOverlay['coordinates'];
+    holes?: AnyPolygonOverlay['holes'];
+};
+declare type AnyPointOverlay = {
+    type: 'point';
+    feature: Feature<Point | MultiPoint>;
+    coordinates: LatLng;
+};
+declare type AnyLineStringOverlay = {
+    type: 'polyline';
+    feature: Feature<LineString | MultiLineString>;
+    coordinates: LatLng[];
+};
+declare type AnyPolygonOverlay = {
+    type: 'polygon';
+    feature: Feature<Polygon | MultiPolygon>;
+    coordinates: LatLng[];
+    holes?: LatLng[][];
+};

package/lib/Geojson.js

@@ -0,0 +1,165 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const MapMarker_1 = __importDefault(require("./MapMarker"));
+const MapPolyline_1 = __importDefault(require("./MapPolyline"));
+const MapPolygon_1 = __importDefault(require("./MapPolygon"));
+const Geojson = (props) => {
+    const { geojson, strokeColor, fillColor, strokeWidth, color, title, image, zIndex, onPress, lineCap, lineJoin, tappable, miterLimit, lineDashPhase, lineDashPattern, markerComponent, } = props;
+    const pointOverlays = makePointOverlays(geojson.features);
+    const lineOverlays = makeLineOverlays(geojson.features);
+    const polygonOverlays = makePolygonOverlays(geojson.features);
+    return (<React.Fragment>
+      {pointOverlays.map((overlay, index) => {
+            const markerColor = getColor(color, overlay, 'marker-color');
+            return (<MapMarker_1.default key={index} coordinate={overlay.coordinates} image={image} title={title} pinColor={markerColor} zIndex={zIndex} onPress={() => onPress && onPress(overlay)}>
+            {markerComponent}
+          </MapMarker_1.default>);
+        })}
+      {lineOverlays.map((overlay, index) => {
+            const lineStrokeColor = getColor(strokeColor, overlay, 'stroke');
+            const lineStrokeWidth = getStrokeWidth(strokeWidth, overlay);
+            return (<MapPolyline_1.default key={index} coordinates={overlay.coordinates} strokeColor={lineStrokeColor} strokeWidth={lineStrokeWidth} lineDashPhase={lineDashPhase} lineDashPattern={lineDashPattern} lineCap={lineCap} lineJoin={lineJoin} miterLimit={miterLimit} zIndex={zIndex} tappable={tappable} onPress={() => onPress && onPress(overlay)}/>);
+        })}
+      {polygonOverlays.map((overlay, index) => {
+            const polygonFillColor = getColor(fillColor, overlay, 'fill');
+            const lineStrokeColor = getColor(strokeColor, overlay, 'stroke');
+            const lineStrokeWidth = getStrokeWidth(strokeWidth, overlay);
+            return (<MapPolygon_1.default key={index} coordinates={overlay.coordinates} holes={overlay.holes} strokeColor={lineStrokeColor} fillColor={polygonFillColor} strokeWidth={lineStrokeWidth} tappable={tappable} onPress={() => onPress && onPress(overlay)} zIndex={zIndex}/>);
+        })}
+    </React.Fragment>);
+};
+exports.default = Geojson;
+const makePointOverlays = (features) => {
+    return features
+        .filter(isAnyPointFeature)
+        .map(feature => makeCoordinatesForAnyPoint(feature.geometry).map(coordinates => makeOverlayForAnyPoint(coordinates, feature)))
+        .reduce((prev, curr) => prev.concat(curr), [])
+        .map(overlay => ({ ...overlay, type: 'point' }));
+};
+const makeLineOverlays = (features) => {
+    return features
+        .filter(isAnyLineStringFeature)
+        .map(feature => makeCoordinatesForAnyLine(feature.geometry).map(coordinates => makeOverlayForAnyLine(coordinates, feature)))
+        .reduce((prev, curr) => prev.concat(curr), [])
+        .map(overlay => ({ ...overlay, type: 'polyline' }));
+};
+const makePolygonOverlays = (features) => {
+    const multipolygons = features
+        .filter(isMultiPolygonFeature)
+        .map(feature => makeCoordinatesForMultiPolygon(feature.geometry).map(coordinates => makeOverlayForAnyPolygon(coordinates, feature)))
+        .reduce((prev, curr) => prev.concat(curr), [])
+        .map(overlay => ({ ...overlay, type: 'polygon' }));
+    const polygons = features
+        .filter(isPolygonFeature)
+        .map(feature => makeOverlayForAnyPolygon(makeCoordinatesForPolygon(feature.geometry), feature))
+        .reduce((prev, curr) => prev.concat(curr), [])
+        .map(overlay => ({ ...overlay, type: 'polygon' }));
+    return polygons.concat(multipolygons);
+};
+const makeOverlayForAnyPoint = (coordinates, feature) => {
+    return { feature, coordinates };
+};
+const makeOverlayForAnyLine = (coordinates, feature) => {
+    return { feature, coordinates };
+};
+const makeOverlayForAnyPolygon = (coordinates, feature) => {
+    return {
+        feature,
+        coordinates: coordinates[0],
+        holes: coordinates.length > 1 ? coordinates.slice(1) : undefined,
+    };
+};
+const makePoint = (c) => ({
+    latitude: c[1],
+    longitude: c[0],
+});
+const makeLine = (l) => l.map(makePoint);
+const makeCoordinatesForAnyPoint = (geometry) => {
+    if (geometry.type === 'Point') {
+        return [makePoint(geometry.coordinates)];
+    }
+    return geometry.coordinates.map(makePoint);
+};
+const makeCoordinatesForAnyLine = (geometry) => {
+    if (geometry.type === 'LineString') {
+        return [makeLine(geometry.coordinates)];
+    }
+    return geometry.coordinates.map(makeLine);
+};
+const makeCoordinatesForPolygon = (geometry) => {
+    return geometry.coordinates.map(makeLine);
+};
+const makeCoordinatesForMultiPolygon = (geometry) => {
+    return geometry.coordinates.map(p => p.map(makeLine));
+};
+const getRgbaFromHex = (hex, alpha = 1) => {
+    const matchArray = hex.match(/\w\w/g);
+    if (!matchArray || matchArray.length < 3) {
+        throw new Error('Invalid hex string');
+    }
+    const [r, g, b] = matchArray.map(x => {
+        const subColor = parseInt(x, 16);
+        if (Number.isNaN(subColor)) {
+            throw new Error('Invalid hex string');
+        }
+        return subColor;
+    });
+    return `rgba(${r},${g},${b},${alpha})`;
+};
+const getColor = (prop, overlay, colorType) => {
+    if (prop) {
+        return prop;
+    }
+    let color = overlay.feature.properties?.[colorType];
+    if (color) {
+        const opacityProperty = colorType + '-opacity';
+        const alpha = overlay.feature.properties?.[opacityProperty];
+        if (alpha && alpha !== '0' && color[0] === '#') {
+            color = getRgbaFromHex(color, alpha);
+        }
+        return color;
+    }
+    return undefined;
+};
+const getStrokeWidth = (prop, overlay) => {
+    if (prop) {
+        return prop;
+    }
+    return overlay.feature.properties?.['stroke-width'];
+};
+// GeoJSON.Feature type-guards
+const isPointFeature = (feature) => feature.geometry.type === 'Point';
+const isMultiPointFeature = (feature) => feature.geometry.type === 'MultiPoint';
+const isAnyPointFeature = (feature) => isPointFeature(feature) || isMultiPointFeature(feature);
+const isLineStringFeature = (feature) => feature.geometry.type === 'LineString';
+const isMultiLineStringFeature = (feature) => feature.geometry.type === 'MultiLineString';
+const isAnyLineStringFeature = (feature) => isLineStringFeature(feature) || isMultiLineStringFeature(feature);
+const isPolygonFeature = (feature) => feature.geometry.type === 'Polygon';
+const isMultiPolygonFeature = (feature) => feature.geometry.type === 'MultiPolygon';