@maplibre/maplibre-react-native 8.6.0-beta.0

package/javascript/components/ShapeSource.js

@@ -0,0 +1,357 @@
+import {getFilter} from '../utils/filterUtils';
+import {
+  toJSONString,
+  cloneReactChildrenWithProps,
+  viewPropTypes,
+  isFunction,
+  isAndroid,
+} from '../utils';
+import {copyPropertiesAsDeprecated} from '../utils/deprecation';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
+
+/**
+ * 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) {
+  static NATIVE_ASSETS_KEY = 'assets';
+
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * A string that uniquely identifies the source.
+     */
+    id: PropTypes.string.isRequired,
+
+    /**
+     * An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle.
+     */
+    url: PropTypes.string,
+
+    /**
+     * The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature colllection.
+     */
+    shape: PropTypes.object,
+
+    /**
+     * Enables clustering on the source for point shapes.
+     */
+    cluster: PropTypes.bool,
+
+    /**
+     * 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: PropTypes.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: PropTypes.number,
+
+    /**
+     * 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: PropTypes.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: PropTypes.number,
+
+    /**
+     * Specifies the Douglas-Peucker simplification tolerance.
+     * A greater value produces simpler geometries and improves performance.
+     * The default value is 0.375.
+     */
+    tolerance: PropTypes.number,
+
+    /**
+     * Whether to calculate line distance metrics.
+     * This is required for line layers that specify lineGradient values.
+     * The default value is false.
+     */
+    lineMetrics: PropTypes.bool,
+
+    /**
+     * 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: PropTypes.func,
+
+    /**
+     * Overrides the default touch hitbox(44x44 pixels) for the source layers
+     */
+    hitbox: PropTypes.shape({
+      /**
+       * `width` of hitbox
+       */
+      width: PropTypes.number.isRequired,
+      /**
+       * `height` of hitbox
+       */
+      height: PropTypes.number.isRequired,
+    }),
+  };
+
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props) {
+    super(props, NATIVE_MODULE_NAME);
+  }
+
+  _setNativeRef(nativeRef) {
+    this._nativeRef = 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 = []) {
+    const res = await this._runNativeCommand('features', this._nativeRef, [
+      getFilter(filter),
+    ]);
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  /**
+   * 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) {
+    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 = await this._runNativeCommand(
+        'getClusterExpansionZoomById',
+        this._nativeRef,
+        [feature],
+      );
+      return res.data;
+    }
+
+    const res = 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, limit, offset) {
+    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 = await this._runNativeCommand(
+        'getClusterLeavesById',
+        this._nativeRef,
+        [feature, limit, offset],
+      );
+
+      if (isAndroid()) {
+        return JSON.parse(res.data);
+      }
+
+      return res.data;
+    }
+
+    const res = await this._runNativeCommand(
+      'getClusterLeaves',
+      this._nativeRef,
+      [JSON.stringify(feature), limit, offset],
+    );
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  /**
+   * 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) {
+    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 = await this._runNativeCommand(
+        'getClusterChildrenById',
+        this._nativeRef,
+        [feature],
+      );
+
+      if (isAndroid()) {
+        return JSON.parse(res.data);
+      }
+
+      return res.data;
+    }
+
+    const res = await this._runNativeCommand(
+      'getClusterChildren',
+      this._nativeRef,
+      [JSON.stringify(feature)],
+    );
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  setNativeProps(props) {
+    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() {
+    if (!this.props.shape) {
+      return;
+    }
+    return toJSONString(this.props.shape);
+  }
+
+  onPress(event) {
+    const {
+      nativeEvent: {
+        payload: {features, coordinates, point},
+      },
+    } = event;
+    let newEvent = {
+      features,
+      coordinates,
+      point,
+    };
+    newEvent = copyPropertiesAsDeprecated(
+      event,
+      newEvent,
+      key => {
+        console.warn(
+          `event.${key} is deprecated on ShapeSource#onPress, please use event.features`,
+        );
+      },
+      {
+        nativeEvent: origNativeEvent => ({
+          ...origNativeEvent,
+          payload: features[0],
+        }),
+      },
+    );
+    this.props.onPress(newEvent);
+  }
+
+  render() {
+    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,
+      maxZoomLevel: this.props.maxZoomLevel,
+      buffer: this.props.buffer,
+      tolerance: this.props.tolerance,
+      lineMetrics: this.props.lineMetrics,
+      onPress: undefined,
+      ref: nativeRef => this._setNativeRef(nativeRef),
+      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
+    };
+
+    return (
+      <RCTMGLShapeSource {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLShapeSource>
+    );
+  }
+}
+
+const RCTMGLShapeSource = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  ShapeSource,
+  {
+    nativeOnly: {
+      hasPressListener: true,
+      onMapboxShapeSourcePress: true,
+    },
+  },
+);
+
+export default ShapeSource;

package/javascript/components/Style.js

@@ -0,0 +1,264 @@
+import CircleLayer from './CircleLayer';
+import RasterLayer from './RasterLayer';
+import SymbolLayer from './SymbolLayer';
+import LineLayer from './LineLayer';
+import FillLayer from './FillLayer';
+import FillExtrusionLayer from './FillExtrusionLayer';
+import BackgroundLayer from './BackgroundLayer';
+import HeatmapLayer from './HeatmapLayer';
+import VectorSource from './VectorSource';
+import RasterSource from './RasterSource';
+import ImageSource from './ImageSource';
+import ShapeSource from './ShapeSource';
+
+import PropTypes from 'prop-types';
+import React, {useMemo, useState, useEffect} from 'react';
+
+function toCamelCase(s) {
+  return s.replace(/([-_][a-z])/gi, $1 => {
+    return $1.toUpperCase().replace('-', '').replace('_', '');
+  });
+}
+
+// Patches the Mapbox Style Specification keys into the style props attributes:
+// icon-allow-overlap -> iconAllowOverlap
+function toCamelCaseKeys(oldObj) {
+  if (!oldObj) {
+    return {};
+  }
+  const newObj = {};
+  Object.keys(oldObj).forEach(key => {
+    const value = oldObj[key];
+    if (key.includes('-')) {
+      newObj[toCamelCase(key)] = value;
+    } else {
+      newObj[key] = value;
+    }
+  });
+  return newObj;
+}
+
+function getLayerComponentType(layer) {
+  const {type} = layer;
+
+  switch (type) {
+    case 'circle':
+      return CircleLayer;
+    case 'symbol':
+      return SymbolLayer;
+    case 'raster':
+      return RasterLayer;
+    case 'line':
+      return LineLayer;
+    case 'fill':
+      return FillLayer;
+    case 'fill-extrusion':
+      return FillExtrusionLayer;
+    case 'background':
+      return BackgroundLayer;
+    case 'heatmap':
+      return HeatmapLayer;
+  }
+
+  console.warn(`Mapbox layer type '${type}' is not supported/`);
+
+  return null;
+}
+
+function asLayerComponent(layer) {
+  const LayerComponent = getLayerComponentType(layer);
+  if (!LayerComponent) {
+    return null;
+  }
+
+  const style = {
+    ...toCamelCaseKeys(layer.paint),
+    ...toCamelCaseKeys(layer.layout),
+  };
+
+  const layerProps = {};
+
+  if (layer.source) {
+    layerProps.sourceID = layer.source;
+  }
+  if (layer['source-layer']) {
+    layerProps.sourceLayerID = layer['source-layer'];
+  }
+  if (layer.minzoom) {
+    layerProps.minZoomLevel = layer.minzoom;
+  }
+  if (layer.maxzoom) {
+    layerProps.maxZoomLevel = layer.maxzoom;
+  }
+  if (layer.filter) {
+    layerProps.filter = layer.filter;
+  }
+  if (Object.keys(style).length) {
+    layerProps.style = style;
+  }
+
+  return <LayerComponent key={layer.id} id={layer.id} {...layerProps} />;
+}
+
+function getTileSourceProps(source) {
+  const sourceProps = {};
+  if (source.url) {
+    sourceProps.url = source.url;
+  }
+  if (source.tiles) {
+    sourceProps.tileUrlTemplates = source.tiles;
+  }
+  if (source.minzoom !== undefined) {
+    sourceProps.minZoomLevel = source.minzoom;
+  }
+  if (source.maxzoom !== undefined) {
+    sourceProps.maxZoomLevel = source.maxzoom;
+  }
+  if (source.attribution) {
+    sourceProps.attribution = source.attribution;
+  }
+  if (source.scheme && source.scheme === 'tms') {
+    sourceProps.tms = true;
+  }
+  return sourceProps;
+}
+
+function getVectorSource(id, source) {
+  const sourceProps = {...getTileSourceProps(source)};
+  return <VectorSource key={id} id={id} {...sourceProps} />;
+}
+
+function getRasterSource(id, source) {
+  const sourceProps = {...getTileSourceProps(source)};
+  if (source.tileSize) {
+    sourceProps.tileSize = source.tileSize;
+  }
+  return <RasterSource key={id} id={id} {...sourceProps} />;
+}
+
+function getImageSource(id, source) {
+  const sourceProps = {
+    url: source.url,
+    coordinates: source.coordinates,
+  };
+  return <ImageSource key={id} id={id} {...sourceProps} />;
+}
+
+function getShapeSource(id, source) {
+  const sourceProps = {};
+  if (source.data && typeof source.data === 'string') {
+    sourceProps.url = source.data;
+  } else if (source.data && typeof source.data === 'object') {
+    sourceProps.shape = source.data;
+  }
+  if (source.cluster !== undefined) {
+    sourceProps.cluster = source.cluster;
+  }
+  if (source.clusterRadius !== undefined) {
+    sourceProps.clusterRadius = source.clusterRadius;
+  }
+  if (source.maxzoom !== undefined) {
+    sourceProps.maxZoomLevel = source.maxzoom;
+  }
+  if (source.clusterMaxZoom !== undefined) {
+    sourceProps.clusterMaxZoomLevel = source.clusterMaxZoom;
+  }
+  if (source.buffer !== undefined) {
+    sourceProps.buffer = source.buffer;
+  }
+  if (source.tolerance !== undefined) {
+    sourceProps.tolerance = source.tolerance;
+  }
+  if (source.lineMetrics !== undefined) {
+    sourceProps.lineMetrics = source.lineMetrics;
+  }
+  return <ShapeSource key={id} id={id} {...sourceProps} />;
+}
+
+function asSourceComponent(id, source) {
+  switch (source.type) {
+    case 'vector':
+      return getVectorSource(id, source);
+    case 'raster':
+      return getRasterSource(id, source);
+    case 'image':
+      return getImageSource(id, source);
+    case 'geojson':
+      return getShapeSource(id, source);
+  }
+
+  console.warn(`Mapbox source type '${source.type}' is not supported/`);
+
+  return null;
+}
+
+/**
+ * Style is a component that automatically adds sources / layers to the map using Mapbox GL Style Spec.
+ * Only [`sources`](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources) & [`layers`](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) are supported.
+ * Other fields such as `sprites`, `glyphs` etc. will be ignored. Not all layer / source attributes from the style spec are supported, in general the supported attributes will be mentioned under https://github.com/maplibre/maplibre-react-native/tree/main/docs.
+ *
+ * TODO: Maintainer forking this project does not understand the above comment regarding what is supported.
+ */
+const Style = props => {
+  const [fetchedJson, setFetchedJson] = useState({});
+  const json = typeof props.json === 'object' ? props.json : fetchedJson;
+
+  // Fetch style when props.json is a URL
+  useEffect(() => {
+    const abortController = new AbortController();
+    const fetchStyleJson = async () => {
+      try {
+        const response = await fetch(props.json, {
+          signal: abortController.signal,
+        });
+        const responseJson = await response.json();
+        setFetchedJson(responseJson);
+      } catch (e) {
+        if (e.name === 'AbortError') {
+          return;
+        }
+        throw e;
+      }
+    };
+    if (typeof props.json === 'string') {
+      fetchStyleJson();
+    }
+    return function cleanup() {
+      abortController.abort();
+    };
+  }, [props.json]);
+
+  // Extract layer components from json
+  const layerComponents = useMemo(() => {
+    if (!json.layers) {
+      return [];
+    }
+    return json.layers.map(asLayerComponent).filter(x => !!x);
+  }, [json.layers]);
+
+  // Extract source components from json
+  const sourceComponents = useMemo(() => {
+    if (!json.sources || !Object.keys(json.sources)) {
+      return [];
+    }
+    return Object.keys(json.sources)
+      .map(id => asSourceComponent(id, json.sources[id]))
+      .filter(x => !!x);
+  }, [json.sources]);
+
+  return (
+    <>
+      {sourceComponents}
+      {layerComponents}
+    </>
+  );
+};
+
+Style.propTypes = {
+  /**
+   * A JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON.
+   */
+  json: PropTypes.any,
+};
+
+export default Style;