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

package/javascript/components/CircleLayer.js

@@ -0,0 +1,101 @@
+import {viewPropTypes} from '../utils';
+import {CircleLayerStyleProp} from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
+
+/**
+ * CircleLayer is a style layer that renders one or more filled circles on the map.
+ */
+class CircleLayer 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([
+      CircleLayerStyleProp,
+      PropTypes.arrayOf(CircleLayerStyleProp),
+    ]),
+  };
+
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    return (
+      <RCTMGLCircleLayer
+        testID="rctmglCircleLayer"
+        ref="nativeLayer"
+        {...this.baseProps}
+      />
+    );
+  }
+}
+
+const RCTMGLCircleLayer = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  CircleLayer,
+  {
+    nativeOnly: {reactStyle: true},
+  },
+);
+
+export default CircleLayer;

package/javascript/components/FillExtrusionLayer.js

@@ -0,0 +1,98 @@
+import {viewPropTypes} from '../utils';
+import {FillExtrusionLayerStyleProp} from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
+
+/**
+ * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
+ */
+class FillExtrusionLayer 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([
+      FillExtrusionLayerStyleProp,
+      PropTypes.arrayOf(FillExtrusionLayerStyleProp),
+    ]),
+  };
+
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillExtrusionLayer ref="nativeLayer" {...props} />;
+  }
+}
+
+const RCTMGLFillExtrusionLayer = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  FillExtrusionLayer,
+  {
+    nativeOnly: {reactStyle: true},
+  },
+);
+
+export default FillExtrusionLayer;

package/javascript/components/FillLayer.js

@@ -0,0 +1,94 @@
+import {viewPropTypes} from '../utils';
+import {FillLayerStyleProp} from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
+
+/**
+ * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
+ */
+class FillLayer 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([
+      FillLayerStyleProp,
+      PropTypes.arrayOf(FillLayerStyleProp),
+    ]),
+  };
+
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillLayer ref="nativeLayer" {...props} />;
+  }
+}
+
+const RCTMGLFillLayer = requireNativeComponent(NATIVE_MODULE_NAME, FillLayer, {
+  nativeOnly: {reactStyle: true},
+});
+
+export default FillLayer;

package/javascript/components/HeadingIndicator.js

@@ -0,0 +1,31 @@
+import headingIcon from '../../assets/heading.png';
+
+import SymbolLayer from './SymbolLayer';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const style = {
+  iconImage: headingIcon,
+  iconAllowOverlap: true,
+  iconPitchAlignment: 'map',
+  iconRotationAlignment: 'map',
+};
+
+const HeadingIndicator = heading => (
+  <SymbolLayer
+    key="mapboxUserLocationHeadingIndicator"
+    id="mapboxUserLocationHeadingIndicator"
+    belowLayerID="mapboxUserLocationWhiteCircle"
+    style={{
+      iconRotate: heading,
+      ...style,
+    }}
+  />
+);
+
+HeadingIndicator.propTypes = {
+  heading: PropTypes.number,
+};
+
+export default HeadingIndicator;

package/javascript/components/HeatmapLayer.js

@@ -0,0 +1,99 @@
+import {viewPropTypes} from '../utils';
+import {HeatmapLayerStyleProp} from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
+
+/**
+ * HeatmapLayer is a style layer that renders one or more filled circles on the map.
+ */
+class HeatmapLayer 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([
+      HeatmapLayerStyleProp,
+      PropTypes.arrayOf(HeatmapLayerStyleProp),
+    ]),
+  };
+
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLHeatmapLayer ref="nativeLayer" {...props} />;
+  }
+}
+
+const RCTMGLHeatmapLayer = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  HeatmapLayer,
+  {
+    nativeOnly: {reactStyle: true},
+  },
+);
+
+export default HeatmapLayer;

package/javascript/components/ImageSource.js

@@ -0,0 +1,82 @@
+import {
+  cloneReactChildrenWithProps,
+  viewPropTypes,
+  isNumber,
+  resolveImagePath,
+} from '../utils';
+
+import AbstractSource from './AbstractSource';
+
+import PropTypes from 'prop-types';
+import {requireNativeComponent} from 'react-native';
+import React from 'react';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImageSource';
+
+/**
+ * ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.
+ * The georeferenced image scales and rotates as the user zooms and rotates the map
+ */
+class ImageSource extends AbstractSource {
+  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 to the source image.
+     * Gifs are currently not supported.
+     */
+    url: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+    /**
+     * The top left, top right, bottom right, and bottom left coordinates for the image.
+     */
+    coordinates: PropTypes.arrayOf(
+      PropTypes.arrayOf(PropTypes.number).isRequired,
+    ).isRequired,
+  };
+
+  _getURL() {
+    let {url} = this.props;
+
+    if (isNumber(this.props.url)) {
+      url = resolveImagePath(this.props.url);
+    }
+
+    return url;
+  }
+
+  render() {
+    if (
+      !this.props.url ||
+      !this.props.coordinates ||
+      !this.props.coordinates.length
+    ) {
+      return null;
+    }
+
+    const props = {
+      ...this.props,
+      url: this._getURL(),
+    };
+
+    return (
+      <RCTMGLImageSource ref="nativeSource" {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLImageSource>
+    );
+  }
+}
+
+const RCTMGLImageSource = requireNativeComponent(
+  NATIVE_MODULE_NAME,
+  ImageSource,
+);
+
+export default ImageSource;

package/javascript/components/Images.js

@@ -0,0 +1,119 @@
+import {viewPropTypes} from '../utils';
+
+import ShapeSource from './ShapeSource';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {requireNativeComponent} from 'react-native';
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImages';
+
+function _isUrlOrPath(value) {
+  return (
+    (typeof value === 'string' || value instanceof String) &&
+    (value.startsWith('file://') ||
+      value.startsWith('http://') ||
+      value.startsWith('https://') ||
+      value.startsWith('data:') ||
+      value.startsWith('asset://') ||
+      value.startsWith('/'))
+  );
+}
+
+/**
+ * Images defines the images used in Symbol etc layers
+ */
+class Images extends React.Component {
+  static NATIVE_ASSETS_KEY = 'assets';
+
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * Specifies the external images in key-value pairs required for the shape source.
+     * Keys are names - see iconImage expressions, values can be either urls-s objects
+     * with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
+     */
+    images: PropTypes.object,
+
+    /**
+     * If you have an asset under Image.xcassets on iOS and the drawables directory on android
+     * you can specify an array of string names with assets as the key `['pin']`.
+     */
+    nativeAssetImages: PropTypes.arrayOf(PropTypes.string),
+
+    /**
+     * Gets called when a Layer is trying to render an image whose key is not present in
+     * any of the `Images` component of the Map.
+     */
+    onImageMissing: PropTypes.func,
+  };
+
+  _getImages() {
+    if (!this.props.images && !this.props.nativeAssetImages) {
+      return {};
+    }
+
+    const images = {};
+    let nativeImages = [];
+
+    if (this.props.images) {
+      const imageNames = Object.keys(this.props.images);
+      for (const imageName of imageNames) {
+        const value = this.props.images[imageName];
+        if (
+          imageName === ShapeSource.NATIVE_ASSETS_KEY &&
+          Array.isArray(value)
+        ) {
+          console.warn(
+            `Use of ${ShapeSource.NATIVE_ASSETS_KEY} in Images#images is deprecated please use Images#nativeAssetImages`,
+          );
+          nativeImages = value;
+        } else if (_isUrlOrPath(value)) {
+          images[imageName] = value;
+        } else {
+          const res = resolveAssetSource(value);
+          if (res && res.uri) {
+            images[imageName] = res;
+          }
+        }
+      }
+    }
+
+    if (this.props.nativeAssetImages) {
+      nativeImages = this.props.nativeAssetImages;
+    }
+
+    return {
+      images,
+      nativeImages,
+    };
+  }
+
+  _onImageMissing(event) {
+    if (this.props.onImageMissing) {
+      this.props.onImageMissing(event.nativeEvent.payload.imageKey);
+    }
+  }
+
+  render() {
+    const props = {
+      id: this.props.id,
+      hasOnImageMissing: !!this.props.onImageMissing,
+      onImageMissing: this._onImageMissing.bind(this),
+      ...this._getImages(),
+    };
+
+    return <RCTMGLImages {...props}>{this.props.children}</RCTMGLImages>;
+  }
+}
+
+const RCTMGLImages = requireNativeComponent(NATIVE_MODULE_NAME, Images, {
+  nativeOnly: {
+    nativeImages: true,
+    onImageMissing: true,
+  },
+});
+
+export default Images;

package/javascript/components/Light.js

@@ -0,0 +1,47 @@
+import {viewPropTypes} from '../utils';
+import {LightLayerStyleProp} from '../utils/styleMap';
+
+import AbstractLayer from './AbstractLayer';
+
+import React from 'react';
+import {requireNativeComponent} from 'react-native';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLLight';
+
+/**
+ * Light represents the light source for extruded geometries
+ */
+class Light extends AbstractLayer {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * Customizable style attributes
+     */
+    style: LightLayerStyleProp,
+  };
+
+  setNativeProps(props) {
+    if (this.refs.nativeLight) {
+      this.refs.nativeLight.setNativeProps(props);
+    }
+  }
+
+  render() {
+    return (
+      <RCTMGLLight
+        ref="nativeLight"
+        testID="rctmglLight"
+        {...this.props}
+        style={undefined}
+        reactStyle={this.getStyle()}
+      />
+    );
+  }
+}
+
+const RCTMGLLight = requireNativeComponent(NATIVE_MODULE_NAME, Light, {
+  nativeOnly: {reactStyle: true},
+});
+
+export default Light;