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

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;

package/javascript/components/UserLocation.js

@@ -1,275 +0,0 @@
-import locationManager from '../modules/location/locationManager';
-
-import Annotation from './annotations/Annotation';
-import CircleLayer from './CircleLayer';
-import HeadingIndicator from './HeadingIndicator';
-import NativeUserLocation from './NativeUserLocation';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const mapboxBlue = 'rgba(51, 181, 229, 100)';
-
-const layerStyles = {
-  normal: {
-    pluse: {
-      circleRadius: 15,
-      circleColor: mapboxBlue,
-      circleOpacity: 0.2,
-      circlePitchAlignment: 'map',
-    },
-    background: {
-      circleRadius: 9,
-      circleColor: '#fff',
-      circlePitchAlignment: 'map',
-    },
-    foreground: {
-      circleRadius: 6,
-      circleColor: mapboxBlue,
-      circlePitchAlignment: 'map',
-    },
-  },
-};
-
-export const normalIcon = (showsUserHeadingIndicator, heading) => [
-  <CircleLayer
-    key="mapboxUserLocationPluseCircle"
-    id="mapboxUserLocationPluseCircle"
-    style={layerStyles.normal.pluse}
-  />,
-  <CircleLayer
-    key="mapboxUserLocationWhiteCircle"
-    id="mapboxUserLocationWhiteCircle"
-    style={layerStyles.normal.background}
-  />,
-  <CircleLayer
-    key="mapboxUserLocationBlueCicle"
-    id="mapboxUserLocationBlueCicle"
-    aboveLayerID="mapboxUserLocationWhiteCircle"
-    style={layerStyles.normal.foreground}
-  />,
-  ...(showsUserHeadingIndicator && heading !== null
-    ? [HeadingIndicator(heading)]
-    : []),
-];
-
-class UserLocation extends React.Component {
-  static propTypes = {
-    /**
-     * Whether location icon is animated between updates
-     */
-    animated: PropTypes.bool,
-
-    /**
-     * Which render mode to use.
-     * Can either be `normal` or `native`
-     */
-    renderMode: PropTypes.oneOf(['normal', 'native']),
-
-    /**
-     * native/android only render mode
-     *
-     *  - normal: just a circle
-     *  - compass: triangle with heading
-     *  - gps: large arrow
-     *
-     * @platform android
-     */
-    androidRenderMode: PropTypes.oneOf(['normal', 'compass', 'gps']),
-
-    /**
-     * Whether location icon is visible
-     */
-    visible: PropTypes.bool,
-
-    /**
-     * Callback that is triggered on location icon press
-     */
-    onPress: PropTypes.func,
-
-    /**
-     * Callback that is triggered on location update
-     */
-    onUpdate: PropTypes.func,
-
-    /**
-     * Show or hide small arrow which indicates direction the device is pointing relative to north.
-     */
-    showsUserHeadingIndicator: PropTypes.bool,
-
-    /**
-     * Minimum amount of movement before GPS location is updated in meters
-     */
-    minDisplacement: PropTypes.number,
-
-    /**
-     * Custom location icon of type mapbox-gl-native components
-     *
-     * NOTE: Forking maintainer does not understand the above comment.
-     */
-    children: PropTypes.any,
-  };
-
-  static defaultProps = {
-    animated: true,
-    visible: true,
-    showsUserHeadingIndicator: false,
-    minDisplacement: 0,
-    renderMode: 'normal',
-  };
-
-  static RenderMode = {
-    Native: 'native',
-    Normal: 'normal',
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      shouldShowUserLocation: false,
-      coordinates: null,
-      heading: null,
-    };
-
-    this._onLocationUpdate = this._onLocationUpdate.bind(this);
-  }
-
-  // required as #setLocationManager attempts to setState
-  // after component unmount
-  _isMounted = null;
-
-  locationManagerRunning = false;
-
-  async componentDidMount() {
-    this._isMounted = true;
-
-    await this.setLocationManager({
-      running: this.needsLocationManagerRunning(),
-    });
-
-    if (this.renderMode === UserLocation.RenderMode.Native) {
-      return;
-    }
-
-    locationManager.setMinDisplacement(this.props.minDisplacement);
-  }
-
-  async componentDidUpdate(prevProps) {
-    await this.setLocationManager({
-      running: this.needsLocationManagerRunning(),
-    });
-
-    if (this.props.minDisplacement !== prevProps.minDisplacement) {
-      locationManager.setMinDisplacement(this.props.minDisplacement);
-    }
-  }
-
-  async componentWillUnmount() {
-    this._isMounted = false;
-    await this.setLocationManager({running: false});
-  }
-
-  /**
-   * Whether to start or stop listening to the locationManager
-   *
-   * Notice, that listening will start automatically when
-   * either `onUpdate` or `visible` are set
-   *
-   * @async
-   * @param {Object} running - Object with key `running` and `boolean` value
-   * @return {Promise<void>}
-   */
-  async setLocationManager({running}) {
-    if (this.locationManagerRunning !== running) {
-      this.locationManagerRunning = running;
-      if (running) {
-        locationManager.addListener(this._onLocationUpdate);
-        const location = await locationManager.getLastKnownLocation();
-        this._onLocationUpdate(location);
-      } else {
-        locationManager.removeListener(this._onLocationUpdate);
-      }
-    }
-  }
-
-  /**
-   *
-   * If locationManager should be running
-   *
-   * @return {boolean}
-   */
-  needsLocationManagerRunning() {
-    return (
-      !!this.props.onUpdate ||
-      (this.props.renderMode === UserLocation.RenderMode.Normal &&
-        this.props.visible)
-    );
-  }
-
-  _onLocationUpdate(location) {
-    if (!this._isMounted || !location) {
-      return;
-    }
-    let coordinates = null;
-    let heading = null;
-
-    if (location && location.coords) {
-      const {longitude, latitude} = location.coords;
-      ({heading} = location.coords);
-      coordinates = [longitude, latitude];
-    }
-
-    this.setState({
-      coordinates,
-      heading,
-    });
-
-    if (this.props.onUpdate) {
-      this.props.onUpdate(location);
-    }
-  }
-
-  _renderNative() {
-    const {androidRenderMode, showsUserHeadingIndicator} = this.props;
-
-    let props = {
-      androidRenderMode,
-      iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
-    };
-    return <NativeUserLocation {...props} />;
-  }
-
-  render() {
-    const {heading, coordinates} = this.state;
-    const {children, visible, showsUserHeadingIndicator, onPress, animated} =
-      this.props;
-
-    if (!visible) {
-      return null;
-    }
-
-    if (this.props.renderMode === UserLocation.RenderMode.Native) {
-      return this._renderNative();
-    }
-
-    if (!coordinates) {
-      return null;
-    }
-
-    return (
-      <Annotation
-        animated={animated}
-        id="mapboxUserLocation"
-        onPress={onPress}
-        coordinates={coordinates}
-        style={{
-          iconRotate: heading,
-        }}>
-        {children || normalIcon(showsUserHeadingIndicator, heading)}
-      </Annotation>
-    );
-  }
-}
-
-export default UserLocation;

package/javascript/components/VectorSource.js

@@ -1,200 +0,0 @@
-import {
-  cloneReactChildrenWithProps,
-  viewPropTypes,
-  isFunction,
-  isAndroid,
-} from '../utils';
-import {getFilter} from '../utils/filterUtils';
-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 = 'RCTMGLVectorSource';
-
-/**
- * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format 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 VectorSource extends NativeBridgeComponent(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/vector-tiles/{z}/{x}/{y}.pbf
-     */
-    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,
-
-    /**
-     * 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,
-
-    /**
-     * 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
-     */
-    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 that match the query parameters regardless of whether or not the feature is
-   * currently rendered on the map. The domain of the query includes all currently-loaded vector tiles
-   * and GeoJSON source tiles. This function does not check tiles outside of the visible viewport.
-   *
-   * @example
-   * vectorSource.features(['id1', 'id2'])
-   *
-   * @param  {Array=} layerIDs - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
-   * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-   * @return {FeatureCollection}
-   */
-  async features(layerIDs = [], filter = []) {
-    const res = await this._runNativeCommand('features', this._nativeRef, [
-      layerIDs,
-      getFilter(filter),
-    ]);
-
-    if (isAndroid()) {
-      return JSON.parse(res.data);
-    }
-
-    return res.data;
-  }
-
-  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 VectorSource#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,
-      tileUrlTemplates: this.props.tileUrlTemplates,
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      tms: this.props.tms,
-      attribution: this.props.attribution,
-      hitbox: this.props.hitbox,
-      hasPressListener: isFunction(this.props.onPress),
-      onMapboxVectorSourcePress: this.onPress.bind(this),
-      onPress: undefined,
-      ref: nativeRef => this._setNativeRef(nativeRef),
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
-    };
-    return (
-      <RCTMGLVectorSource ref="nativeSource" {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMGLVectorSource>
-    );
-  }
-}
-
-const RCTMGLVectorSource = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  VectorSource,
-  {
-    nativeOnly: {
-      hasPressListener: true,
-      onMapboxVectorSourcePress: true,
-    },
-  },
-);
-
-export default VectorSource;

package/javascript/components/annotations/Annotation.js

@@ -1,122 +0,0 @@
-import SymbolLayer from '../SymbolLayer';
-import Animated from '../../utils/animated/Animated';
-import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {Easing} from 'react-native';
-
-class Annotation extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    animated: PropTypes.bool,
-    animationDuration: PropTypes.number,
-    animationEasingFunction: PropTypes.func,
-    coordinates: PropTypes.arrayOf(PropTypes.number),
-    onPress: PropTypes.func,
-    children: PropTypes.any,
-    style: PropTypes.any,
-    icon: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-    ]),
-  };
-
-  static defaultProps = {
-    animated: false,
-    animationDuration: 1000,
-    animationEasingFunction: Easing.linear,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const shape = this._getShapeFromProps(props);
-
-    this.state = {
-      shape: props.animated ? new AnimatedMapPoint(shape) : shape,
-    };
-
-    this.onPress = this.onPress.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!Array.isArray(this.props.coordinates)) {
-      this.setState({shape: null});
-      return;
-    }
-
-    const hasCoordChanged =
-      prevProps.coordinates[0] !== this.props.coordinates[0] ||
-      prevProps.coordinates[1] !== this.props.coordinates[1];
-
-    if (!hasCoordChanged) {
-      return;
-    }
-
-    if (this.props.animated && this.state.shape) {
-      // flush current animations
-      this.state.shape.stopAnimation();
-
-      this.state.shape
-        .timing({
-          coordinates: this.props.coordinates,
-          easing: this.props.animationEasingFunction,
-          duration: this.props.animationDuration,
-        })
-        .start();
-    } else if (!this.state.shape || !this.props.animated) {
-      const shape = this._getShapeFromProps(this.props);
-
-      this.setState({
-        shape: this.props.animated ? new AnimatedMapPoint(shape) : shape,
-      });
-    }
-  }
-
-  onPress() {
-    if (this.props.onPress) {
-      this.props.onPress();
-    }
-  }
-
-  _getShapeFromProps(props = {}) {
-    const lng = props.coordinates[0] || 0;
-    const lat = props.coordinates[1] || 0;
-    return {type: 'Point', coordinates: [lng, lat]};
-  }
-
-  get symbolStyle() {
-    if (!this.props.icon) {
-      return undefined;
-    }
-    return Object.assign({}, this.props.style, {
-      iconImage: this.props.icon,
-    });
-  }
-
-  render() {
-    if (!this.props.coordinates) {
-      return null;
-    }
-
-    return (
-      <Animated.ShapeSource
-        id={this.props.id}
-        ref="source"
-        onPress={this.onPress}
-        shape={this.state.shape}>
-        {this.symbolStyle && (
-          <SymbolLayer
-            id={`${this.props.id}-symbol`}
-            style={this.symbolStyle}
-          />
-        )}
-        {this.props.children}
-      </Animated.ShapeSource>
-    );
-  }
-}
-
-export default Annotation;