@maplibre/maplibre-react-native 9.0.1 → 10.0.0-alpha.1

package/javascript/components/ShapeSource.tsx

@@ -0,0 +1,383 @@
+import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
+import {getFilter} from '../utils/filterUtils';
+import {
+  toJSONString,
+  cloneReactChildrenWithProps,
+  isFunction,
+  isAndroid,
+} from '../utils';
+import {copyPropertiesAsDeprecated} from '../utils/deprecation';
+import OnPressEvent from '../types/OnPressEvent';
+import BaseProps from '../types/BaseProps';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+import React, {Component, ReactElement} from 'react';
+import {
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from 'react-native';
+import {Feature, FeatureCollection} from '@turf/helpers';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
+
+interface ShapeSourceProps extends BaseProps {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle.
+   */
+  url?: string;
+  /**
+   * The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature colllection.
+   */
+  shape?:
+    | GeoJSON.GeometryCollection
+    | GeoJSON.Feature
+    | GeoJSON.FeatureCollection
+    | GeoJSON.Geometry;
+  /**
+   * Enables clustering on the source for point shapes.
+   */
+  cluster?: boolean;
+  /**
+   * Specifies the radius of each cluster if clustering is enabled.
+   * A value of 512 produces a radius equal to the width of a tile.
+   * The default value is 50.
+   */
+  clusterRadius?: number;
+  /**
+   * Specifies the maximum zoom level at which to cluster points if clustering is enabled.
+   * Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,
+   * the shapes are not clustered.
+   */
+  clusterMaxZoomLevel?: number;
+  /**
+   * Specifies custom properties on the generated clusters if clustering
+   * is enabled, aggregating values from clustered points.
+   *
+   * Has the form `{ "property_name": [operator, map_expression]}`, where
+   *  `operator` is a custom reduce expression that references a special `["accumulated"]` value -
+   *   it accumulates the property value from clusters/points the cluster contains
+   *  `map_expression` produces the value of a single point
+   *
+   * Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
+   *
+   */
+  clusterProperties?: {[propertyName: string]: ExpressionField};
+  /**
+   * Specifies the maximum zoom level at which to create vector tiles.
+   * A greater value produces greater detail at high zoom levels.
+   * The default value is 18.
+   */
+  maxZoomLevel?: number;
+  /**
+   * Specifies the size of the tile buffer on each side.
+   * A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.
+   * Larger values produce fewer rendering artifacts near tile edges and slower performance.
+   * The default value is 128.
+   */
+  buffer?: number;
+  /**
+   * Specifies the Douglas-Peucker simplification tolerance.
+   * A greater value produces simpler geometries and improves performance.
+   * The default value is 0.375.
+   */
+  tolerance?: number;
+  /**
+   * Whether to calculate line distance metrics.
+   * This is required for line layers that specify lineGradient values.
+   * The default value is false.
+   */
+  lineMetrics?: boolean;
+  /**
+   * Source press listener, gets called when a user presses one of the children layers only
+   * if that layer has a higher z-index than another source layers
+   *
+   * @param {Object} event
+   * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
+   * @param {Object} event.coordinates - the coordinates of the click
+   * @param {Object} event.point - the point of the click
+   * @return void
+   */
+  onPress?: (event: OnPressEvent) => void;
+  /**
+   * Overrides the default touch hitbox(44x44 pixels) for the source layers
+   */
+  hitbox?: {
+    /**
+     * `width` of hitbox
+     */
+    width: number;
+    /**
+     * `height` of hitbox
+     */
+    height: number;
+  };
+
+  children?: ReactElement | ReactElement[];
+}
+
+interface NativeProps {
+  shape?: string;
+}
+
+/**
+ * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
+ * The shape may be a url or a GeoJSON object
+ */
+class ShapeSource extends NativeBridgeComponent(
+  AbstractSource<ShapeSourceProps, NativeProps>,
+  NATIVE_MODULE_NAME,
+) {
+  static NATIVE_ASSETS_KEY = 'assets';
+
+  static defaultProps = {
+    id: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: ShapeSourceProps) {
+    super(props);
+  }
+
+  _setNativeRef(
+    nativeRef: Component<NativeProps> & Readonly<NativeMethods>,
+  ): void {
+    this.setNativeRef(nativeRef);
+    super._runPendingNativeCommands(nativeRef);
+  }
+
+  /**
+   * Returns all features from the source that match the query parameters regardless of whether or not the feature is
+   * currently rendered on the map.
+   *
+   * @example
+   * shapeSource.features()
+   *
+   * @param  {Array=} filter - an optional filter statement to filter the returned Features.
+   * @return {FeatureCollection}
+   */
+  async features(filter?: FilterExpression): Promise<FeatureCollection> {
+    const res: {data: string | FeatureCollection} =
+      await this._runNativeCommand('features', this._nativeRef, [
+        getFilter(filter),
+      ]);
+
+    if (isAndroid()) {
+      return JSON.parse(res.data as string);
+    }
+
+    return res.data as FeatureCollection;
+  }
+
+  /**
+   * Returns the zoom needed to expand the cluster.
+   *
+   * @example
+   * const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
+   *
+   * @param  {Feature} feature - The feature cluster to expand.
+   * @return {number}
+   */
+  async getClusterExpansionZoom(feature: Feature): Promise<number> {
+    if (typeof feature === 'number') {
+      console.warn(
+        'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
+      );
+      const res: {data: number} = await this._runNativeCommand(
+        'getClusterExpansionZoomById',
+        this._nativeRef,
+        [feature],
+      );
+      return res.data;
+    }
+
+    const res: {data: number} = await this._runNativeCommand(
+      'getClusterExpansionZoom',
+      this._nativeRef,
+      [JSON.stringify(feature)],
+    );
+    return res.data;
+  }
+
+  /**
+   * Returns the FeatureCollection from the cluster.
+   *
+   * @example
+   * const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
+   *
+   * @param  {Feature} feature - The feature cluster to expand.
+   * @param  {number} limit - The number of points to return.
+   * @param  {number} offset - The amount of points to skip (for pagination).
+   * @return {FeatureCollection}
+   */
+  async getClusterLeaves(
+    feature: Feature,
+    limit: number,
+    offset: number,
+  ): Promise<FeatureCollection> {
+    if (typeof feature === 'number') {
+      console.warn(
+        'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
+      );
+      const res: {data: string | FeatureCollection} =
+        await this._runNativeCommand('getClusterLeavesById', this._nativeRef, [
+          feature,
+          limit,
+          offset,
+        ]);
+
+      if (isAndroid()) {
+        return JSON.parse(res.data as string);
+      }
+
+      return res.data as FeatureCollection;
+    }
+
+    const res: {data: string | FeatureCollection} =
+      await this._runNativeCommand('getClusterLeaves', this._nativeRef, [
+        JSON.stringify(feature),
+        limit,
+        offset,
+      ]);
+
+    if (isAndroid()) {
+      return JSON.parse(res.data as string);
+    }
+
+    return res.data as FeatureCollection;
+  }
+
+  /**
+   * Returns the FeatureCollection from the cluster (on the next zoom level).
+   *
+   * @example
+   * const collection = await shapeSource.getClusterChildren(clusterId);
+   *
+   * @param  {Feature} feature - The feature cluster to expand.
+   * @return {FeatureCollection}
+   */
+  async getClusterChildren(feature: Feature): Promise<FeatureCollection> {
+    if (typeof feature === 'number') {
+      console.warn(
+        'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
+      );
+      const res: {data: string | FeatureCollection} =
+        await this._runNativeCommand(
+          'getClusterChildrenById',
+          this._nativeRef,
+          [feature],
+        );
+
+      if (isAndroid()) {
+        return JSON.parse(res.data as string);
+      }
+
+      return res.data as FeatureCollection;
+    }
+
+    const res: {data: string | FeatureCollection} =
+      await this._runNativeCommand('getClusterChildren', this._nativeRef, [
+        JSON.stringify(feature),
+      ]);
+
+    if (isAndroid()) {
+      return JSON.parse(res.data as string);
+    }
+
+    return res.data as FeatureCollection;
+  }
+
+  setNativeProps(props: NativeProps): void {
+    const shallowProps = Object.assign({}, props);
+
+    // Adds support for Animated
+    if (shallowProps.shape && typeof shallowProps !== 'string') {
+      shallowProps.shape = JSON.stringify(shallowProps.shape);
+    }
+
+    super.setNativeProps(shallowProps);
+  }
+
+  _getShape(): string | undefined {
+    if (!this.props.shape) {
+      return;
+    }
+    return toJSONString(this.props.shape);
+  }
+
+  onPress(event: NativeSyntheticEvent<{payload: OnPressEvent}>): void {
+    const {
+      nativeEvent: {
+        payload: {features, coordinates, point},
+      },
+    } = event;
+    let newEvent = {
+      features,
+      coordinates,
+      point,
+    };
+    newEvent = copyPropertiesAsDeprecated(
+      event,
+      newEvent,
+      (key: string): void => {
+        console.warn(
+          `event.${key} is deprecated on ShapeSource#onPress, please use event.features`,
+        );
+      },
+      {
+        nativeEvent: (
+          origNativeEvent: NativeSyntheticEvent<{payload: OnPressEvent}>,
+        ) => ({
+          ...origNativeEvent,
+          payload: features[0],
+        }),
+      },
+    );
+    if (this.props.onPress) {
+      this.props.onPress(newEvent);
+    }
+  }
+
+  render(): ReactElement {
+    const props = {
+      id: this.props.id,
+      url: this.props.url,
+      shape: this._getShape(),
+      hitbox: this.props.hitbox,
+      hasPressListener: isFunction(this.props.onPress),
+      onMapboxShapeSourcePress: this.onPress.bind(this),
+      cluster: this.props.cluster ? 1 : 0,
+      clusterRadius: this.props.clusterRadius,
+      clusterMaxZoomLevel: this.props.clusterMaxZoomLevel,
+      clusterProperties: this.props.clusterProperties,
+      maxZoomLevel: this.props.maxZoomLevel,
+      buffer: this.props.buffer,
+      tolerance: this.props.tolerance,
+      lineMetrics: this.props.lineMetrics,
+      onPress: undefined,
+      ref: this.setNativeRef,
+      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
+    };
+
+    return (
+      <RCTMGLShapeSource {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLShapeSource>
+    );
+  }
+}
+
+const RCTMGLShapeSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default ShapeSource;

package/javascript/components/{Style.js → Style.tsx}

@@ -1,3 +1,5 @@
+import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
+
 import CircleLayer from './CircleLayer';
 import RasterLayer from './RasterLayer';
 import SymbolLayer from './SymbolLayer';
@@ -10,11 +12,17 @@ import VectorSource from './VectorSource';
 import RasterSource from './RasterSource';
 import ImageSource from './ImageSource';
 import ShapeSource from './ShapeSource';
+import {BaseLayerProps} from './AbstractLayer';
 
-import PropTypes from 'prop-types';
-import React, {useMemo, useState, useEffect} from 'react';
+import React, {
+  useMemo,
+  useState,
+  useEffect,
+  ReactElement,
+  ComponentType,
+} from 'react';
 
-function toCamelCase(s) {
+function toCamelCase(s: string): string {
   return s.replace(/([-_][a-z])/gi, $1 => {
     return $1.toUpperCase().replace('-', '').replace('_', '');
   });
@@ -22,11 +30,13 @@ function toCamelCase(s) {
 
 // Patches the Mapbox Style Specification keys into the style props attributes:
 // icon-allow-overlap -> iconAllowOverlap
-function toCamelCaseKeys(oldObj) {
+function toCamelCaseKeys(
+  oldObj: Record<string, unknown>,
+): Record<string, unknown> {
   if (!oldObj) {
     return {};
   }
-  const newObj = {};
+  const newObj: Record<string, unknown> = {};
   Object.keys(oldObj).forEach(key => {
     const value = oldObj[key];
     if (key.includes('-')) {
@@ -38,7 +48,9 @@ function toCamelCaseKeys(oldObj) {
   return newObj;
 }
 
-function getLayerComponentType(layer) {
+function getLayerComponentType(
+  layer: MaplibreJSONLayer,
+): ComponentType<BaseLayerProps> | null {
   const {type} = layer;
 
   switch (type) {
@@ -65,8 +77,23 @@ function getLayerComponentType(layer) {
   return null;
 }
 
-function asLayerComponent(layer) {
+interface MaplibreJSONLayer {
+  type: string;
+  paint: {[k: string]: unknown};
+  layout: {[k: string]: unknown};
+  source?: string;
+  'source-layer'?: string;
+  minzoom?: number;
+  maxzoom?: number;
+  filter?: FilterExpression;
+  id: string;
+}
+
+function asLayerComponent(
+  layer: MaplibreJSONLayer,
+): ReactElement<BaseLayerProps> | null {
   const LayerComponent = getLayerComponentType(layer);
+
   if (!LayerComponent) {
     return null;
   }
@@ -76,7 +103,7 @@ function asLayerComponent(layer) {
     ...toCamelCaseKeys(layer.layout),
   };
 
-  const layerProps = {};
+  const layerProps: Partial<BaseLayerProps> = {};
 
   if (layer.source) {
     layerProps.sourceID = layer.source;
@@ -100,8 +127,46 @@ function asLayerComponent(layer) {
   return <LayerComponent key={layer.id} id={layer.id} {...layerProps} />;
 }
 
-function getTileSourceProps(source) {
-  const sourceProps = {};
+interface MaplibreJSONSource {
+  type: string;
+  url?: string;
+  tiles?: string[];
+  minzoom?: number;
+  maxzoom?: number;
+  attribution?: string;
+  scheme?: 'xyz' | 'tms';
+  bounds?: number[];
+  buffer?: number;
+  tileSize?: number;
+  coordinates?: [
+    [number, number],
+    [number, number],
+    [number, number],
+    [number, number],
+  ];
+  cluster?: boolean;
+  clusterMaxZoom?: number;
+  clusterMinPoints?: number;
+  clusterRadius?: number;
+  clusterProperties?: {[propertyName: string]: ExpressionField};
+  data?: string | object;
+  filter?: FilterExpression;
+  generateId?: boolean;
+  lineMetrics?: boolean;
+  tolerance?: number;
+}
+
+type SourceProps = {
+  url?: string;
+  tileUrlTemplates?: string[];
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+  attribution?: string;
+  tms?: boolean;
+};
+
+function getTileSourceProps(source: MaplibreJSONSource): SourceProps {
+  const sourceProps: Partial<SourceProps> = {};
   if (source.url) {
     sourceProps.url = source.url;
   }
@@ -123,20 +188,22 @@ function getTileSourceProps(source) {
   return sourceProps;
 }
 
-function getVectorSource(id, source) {
+function getVectorSource(id: string, source: MaplibreJSONSource): ReactElement {
   const sourceProps = {...getTileSourceProps(source)};
   return <VectorSource key={id} id={id} {...sourceProps} />;
 }
 
-function getRasterSource(id, source) {
-  const sourceProps = {...getTileSourceProps(source)};
+function getRasterSource(id: string, source: MaplibreJSONSource): ReactElement {
+  const sourceProps: SourceProps & {tileSize?: number} = {
+    ...getTileSourceProps(source),
+  };
   if (source.tileSize) {
     sourceProps.tileSize = source.tileSize;
   }
   return <RasterSource key={id} id={id} {...sourceProps} />;
 }
 
-function getImageSource(id, source) {
+function getImageSource(id: string, source: MaplibreJSONSource): ReactElement {
   const sourceProps = {
     url: source.url,
     coordinates: source.coordinates,
@@ -144,12 +211,23 @@ function getImageSource(id, source) {
   return <ImageSource key={id} id={id} {...sourceProps} />;
 }
 
-function getShapeSource(id, source) {
-  const sourceProps = {};
+type ShapeSourceShape = (typeof ShapeSource.prototype.props)['shape'];
+
+function getShapeSource(id: string, source: MaplibreJSONSource): ReactElement {
+  const sourceProps: SourceProps & {
+    shape?: ShapeSourceShape;
+    cluster?: boolean;
+    clusterRadius?: number;
+    clusterMaxZoomLevel?: number;
+    clusterProperties?: {[propertyName: string]: ExpressionField};
+    buffer?: number;
+    tolerance?: number;
+    lineMetrics?: boolean;
+  } = {};
   if (source.data && typeof source.data === 'string') {
     sourceProps.url = source.data;
   } else if (source.data && typeof source.data === 'object') {
-    sourceProps.shape = source.data;
+    sourceProps.shape = source.data as ShapeSourceShape;
   }
   if (source.cluster !== undefined) {
     sourceProps.cluster = source.cluster;
@@ -163,6 +241,9 @@ function getShapeSource(id, source) {
   if (source.clusterMaxZoom !== undefined) {
     sourceProps.clusterMaxZoomLevel = source.clusterMaxZoom;
   }
+  if (source.clusterProperties !== undefined) {
+    sourceProps.clusterProperties = source.clusterProperties;
+  }
   if (source.buffer !== undefined) {
     sourceProps.buffer = source.buffer;
   }
@@ -175,7 +256,10 @@ function getShapeSource(id, source) {
   return <ShapeSource key={id} id={id} {...sourceProps} />;
 }
 
-function asSourceComponent(id, source) {
+function asSourceComponent(
+  id: string,
+  source: MaplibreJSONSource,
+): ReactElement | null {
   switch (source.type) {
     case 'vector':
       return getVectorSource(id, source);
@@ -187,11 +271,23 @@ function asSourceComponent(id, source) {
       return getShapeSource(id, source);
   }
 
-  console.warn(`Mapbox source type '${source.type}' is not supported/`);
+  console.warn(`Maplibre source type '${source.type}' is not supported`);
 
   return null;
 }
 
+interface MaplibreJSON {
+  layers?: MaplibreJSONLayer[];
+  sources?: {[key: string]: MaplibreJSONSource};
+}
+
+interface StyleProps {
+  /**
+   * A JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON.
+   */
+  json?: MaplibreJSON | URL;
+}
+
 /**
  * Style is a component that automatically adds sources / layers to the map using MapLibre Style Spec.
  * Only [`sources`](https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/) & [`layers`](https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/) are supported.
@@ -199,21 +295,23 @@ function asSourceComponent(id, source) {
  *
  * TODO: Maintainer forking this project does not understand the above comment regarding what is supported.
  */
-const Style = props => {
+const Style = (props: StyleProps): ReactElement => {
   const [fetchedJson, setFetchedJson] = useState({});
-  const json = typeof props.json === 'object' ? props.json : fetchedJson;
+  const json: MaplibreJSON =
+    typeof props.json === 'object' ? props.json : fetchedJson;
 
   // Fetch style when props.json is a URL
   useEffect(() => {
     const abortController = new AbortController();
-    const fetchStyleJson = async () => {
+    const fetchStyleJson = async (url: string): Promise<void> => {
       try {
-        const response = await fetch(props.json, {
+        const response = await fetch(url, {
           signal: abortController.signal,
         });
         const responseJson = await response.json();
         setFetchedJson(responseJson);
-      } catch (e) {
+      } catch (error: unknown) {
+        const e = error as {name?: string};
         if (e.name === 'AbortError') {
           return;
         }
@@ -221,9 +319,9 @@ const Style = props => {
       }
     };
     if (typeof props.json === 'string') {
-      fetchStyleJson();
+      fetchStyleJson(props.json);
     }
-    return function cleanup() {
+    return function cleanup(): void {
       abortController.abort();
     };
   }, [props.json]);
@@ -233,18 +331,21 @@ const Style = props => {
     if (!json.layers) {
       return [];
     }
-    return json.layers.map(asLayerComponent).filter(x => !!x);
+    return json.layers
+      .map(asLayerComponent)
+      .filter((x: ReactElement | null) => !!x);
   }, [json.layers]);
 
   // Extract source components from json
   const sourceComponents = useMemo(() => {
-    if (!json.sources || !Object.keys(json.sources)) {
+    const {sources} = json;
+    if (!sources || !Object.keys(sources)) {
       return [];
     }
-    return Object.keys(json.sources)
-      .map(id => asSourceComponent(id, json.sources[id]))
+    return Object.keys(sources)
+      .map(id => asSourceComponent(id, sources[id]))
       .filter(x => !!x);
-  }, [json.sources]);
+  }, [json]);
 
   return (
     <>
@@ -254,11 +355,4 @@ const Style = props => {
   );
 };
 
-Style.propTypes = {
-  /**
-   * A JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON.
-   */
-  json: PropTypes.any,
-};
-
 export default Style;