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

package/javascript/components/RasterSource.js

@@ -1,124 +0,0 @@
-import {cloneReactChildrenWithProps, viewPropTypes} from '../utils';
-
-import AbstractSource from './AbstractSource';
-
-import PropTypes from 'prop-types';
-import {NativeModules, requireNativeComponent} from 'react-native';
-import React from 'react';
-
-const MapLibreGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterSource';
-
-const isTileTemplateUrl = url =>
-  url &&
-  (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
-
-/**
- * RasterSource is a map content source that supplies raster image tiles to be shown on the map.
- * The location of and metadata about the tiles are defined either by an option dictionary
- * or by an external file that conforms to the TileJSON specification.
- */
-class RasterSource extends AbstractSource {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the source.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
-     */
-    url: PropTypes.string,
-
-    /**
-     * An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
-     * Example: https://example.com/raster-tiles/{z}/{x}/{y}.png
-     */
-    tileUrlTemplates: PropTypes.arrayOf(PropTypes.string),
-
-    /**
-     * An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
-     * The value should be between 0 and 22, inclusive, and less than
-     * maxZoomLevel, if specified. The default value for this option is 0.
-     */
-    minZoomLevel: PropTypes.number,
-
-    /**
-     * An unsigned integer that specifies the maximum zoom level at which to display tiles from the source.
-     * The value should be between 0 and 22, inclusive, and less than
-     * minZoomLevel, if specified. The default value for this option is 22.
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Size of the map tiles.
-     * Mapbox urls default to 256, all others default to 512.
-     */
-    tileSize: PropTypes.number,
-
-    /**
-     * Influences the y direction of the tile coordinates. (tms inverts y axis)
-     */
-    tms: PropTypes.bool,
-
-    /**
-     * An HTML or literal text string defining the buttons to be displayed in an action sheet when the
-     * source is part of a map view’s style and the map view’s attribution button is pressed.
-     */
-    attribution: PropTypes.string,
-  };
-
-  static defaultProps = {
-    id: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  constructor(props) {
-    super(props);
-    if (isTileTemplateUrl(props.url)) {
-      console.warn(
-        `RasterSource 'url' property contains a Tile URL Template, but is intended for a StyleJSON URL. Please migrate your VectorSource to use: \`tileUrlTemplates=["${props.url}"]\` instead.`,
-      );
-    }
-  }
-
-  render() {
-    let {url} = this.props;
-    let {tileUrlTemplates} = this.props;
-
-    // Swapping url for tileUrlTemplates to provide backward compatiblity
-    // when RasterSource supported only tile url as url prop
-    if (isTileTemplateUrl(url)) {
-      tileUrlTemplates = [url];
-      url = undefined;
-    }
-
-    const props = {
-      ...this.props,
-      id: this.props.id,
-      url,
-      tileUrlTemplates,
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      tileSize: this.props.tileSize,
-      tms: this.props.tms,
-      attribution: this.props.attribution,
-    };
-    return (
-      <RCTMGLRasterSource ref="nativeSource" {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMGLRasterSource>
-    );
-  }
-}
-
-const RCTMGLRasterSource = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  RasterSource,
-);
-
-export default RasterSource;

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/SymbolLayer.js

@@ -1,120 +0,0 @@
-import {viewPropTypes} from '../utils';
-import {SymbolLayerStyleProp} from '../utils/styleMap';
-
-import AbstractLayer from './AbstractLayer';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View, NativeModules, requireNativeComponent} from 'react-native';
-
-const MapLibreGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
-
-/**
- * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
- */
-class SymbolLayer extends AbstractLayer {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the source in the style to which it is added.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * The source from which to obtain the data to style.
-     * If the source has not yet been added to the current style, the behavior is undefined.
-     * Inferred from parent source only if the layer is a direct child to it.
-     */
-    sourceID: PropTypes.string,
-
-    /**
-     * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
-     */
-    sourceLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer above aboveLayerID.
-     */
-    aboveLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer below belowLayerID
-     */
-    belowLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer at a specified index
-     */
-    layerIndex: PropTypes.number,
-
-    /**
-     *  Filter only the features in the source layer that satisfy a condition that you define
-     */
-    filter: PropTypes.array,
-
-    /**
-     * The minimum zoom level at which the layer gets parsed and appears.
-     */
-    minZoomLevel: PropTypes.number,
-
-    /**
-     * The maximum zoom level at which the layer gets parsed and appears.
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Customizable style attributes
-     */
-    style: PropTypes.oneOfType([
-      SymbolLayerStyleProp,
-      PropTypes.arrayOf(SymbolLayerStyleProp),
-    ]),
-  };
-
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  _shouldSnapshot() {
-    let isSnapshot = false;
-
-    if (React.Children.count(this.props.children) <= 0) {
-      return isSnapshot;
-    }
-
-    React.Children.forEach(this.props.children, child => {
-      if (child.type === View) {
-        isSnapshot = true;
-      }
-    });
-
-    return isSnapshot;
-  }
-
-  render() {
-    const props = {
-      ...this.baseProps,
-      snapshot: this._shouldSnapshot(),
-      sourceLayerID: this.props.sourceLayerID,
-    };
-
-    return (
-      <RCTMGLSymbolLayer ref="nativeLayer" {...props}>
-        {this.props.children}
-      </RCTMGLSymbolLayer>
-    );
-  }
-}
-
-const RCTMGLSymbolLayer = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  SymbolLayer,
-  {
-    nativeOnly: {reactStyle: true, snapshot: true},
-  },
-);
-
-export default SymbolLayer;