@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.10

package/javascript/components/ShapeSource.js

@@ -1,372 +0,0 @@
-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 MapLibreGL = 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 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: PropTypes.object,
-
-    /**
-     * 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: MapLibreGL.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,
-      clusterProperties: this.props.clusterProperties,
-      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

@@ -1,267 +0,0 @@
-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.clusterProperties !== undefined) {
-    sourceProps.clusterProperties = source.clusterProperties;
-  }
-  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 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.
- * 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 MapLibre Style Specification, or a URL to such JSON.
-   */
-  json: PropTypes.any,
-};
-
-export default Style;