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

package/javascript/components/AbstractLayer.js

@@ -1,75 +0,0 @@
-/* eslint react/prop-types:0  */
-import {getFilter} from '../utils/filterUtils';
-import {getStyleType} from '../utils/styleMap';
-import BridgeValue from '../utils/BridgeValue';
-
-import React from 'react';
-import {processColor} from 'react-native';
-import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
-
-class AbstractLayer extends React.PureComponent {
-  get baseProps() {
-    return {
-      ...this.props,
-      id: this.props.id,
-      sourceID: this.props.sourceID,
-      reactStyle: this.getStyle(),
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      aboveLayerID: this.props.aboveLayerID,
-      belowLayerID: this.props.belowLayerID,
-      layerIndex: this.props.layerIndex,
-      filter: getFilter(this.props.filter),
-      style: undefined,
-    };
-  }
-
-  getStyleTypeFormatter(styleType) {
-    if (styleType === 'color') {
-      return processColor;
-    }
-  }
-
-  _getStyle(style) {
-    if (!style) {
-      return;
-    }
-
-    const nativeStyle = {};
-    const styleProps = Object.keys(style);
-    for (const styleProp of styleProps) {
-      const styleType = getStyleType(styleProp);
-      let rawStyle = style[styleProp];
-
-      if (styleType === 'color' && typeof rawStyle === 'string') {
-        rawStyle = processColor(rawStyle);
-      } else if (styleType === 'image' && typeof rawStyle === 'number') {
-        rawStyle = resolveAssetSource(rawStyle) || {};
-      }
-
-      const bridgeValue = new BridgeValue(rawStyle);
-      nativeStyle[styleProp] = {
-        styletype: styleType,
-        stylevalue: bridgeValue.toJSON(),
-      };
-    }
-
-    return nativeStyle;
-  }
-
-  getStyle() {
-    return this._getStyle(this.props.style);
-  }
-
-  setNativeProps(props) {
-    if (this.refs.nativeLayer) {
-      let propsToPass = props;
-      if (props.style) {
-        propsToPass = {...props, reactStyle: this._getStyle(props.style)};
-      }
-      this.refs.nativeLayer.setNativeProps(propsToPass);
-    }
-  }
-}
-
-export default AbstractLayer;

package/javascript/components/AbstractSource.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-class AbstractSource extends React.PureComponent {
-  setNativeProps(props) {
-    if (this._nativeRef) {
-      this._nativeRef.setNativeProps(props);
-    } else {
-      if (this.refs.nativeSource) {
-        this.refs.nativeSource.setNativeProps(props);
-      }
-    }
-  }
-}
-
-export default AbstractSource;

package/javascript/components/BackgroundLayer.js

@@ -1,97 +0,0 @@
-import {viewPropTypes} from '../utils';
-import {BackgroundLayerStyleProp} from '../utils/styleMap';
-
-import AbstractLayer from './AbstractLayer';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
-
-const MapLibreGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
-
-class BackgroundLayer 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([
-      BackgroundLayerStyleProp,
-      PropTypes.arrayOf(BackgroundLayerStyleProp),
-    ]),
-  };
-
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  render() {
-    return (
-      <RCTMGLBackgroundLayer
-        testID="rctmglBackgroundLayer"
-        ref="nativeLayer"
-        {...this.baseProps}
-      />
-    );
-  }
-}
-
-const RCTMGLBackgroundLayer = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  BackgroundLayer,
-  {
-    nativeOnly: {reactStyle: true},
-  },
-);
-
-export default BackgroundLayer;

package/javascript/components/CircleLayer.js

@@ -1,101 +0,0 @@
-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 MapLibreGL = 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: MapLibreGL.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

@@ -1,98 +0,0 @@
-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 MapLibreGL = 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: MapLibreGL.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

@@ -1,94 +0,0 @@
-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 MapLibreGL = 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: MapLibreGL.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/HeatmapLayer.js

@@ -1,99 +0,0 @@
-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 MapLibreGL = 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: MapLibreGL.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

@@ -1,82 +0,0 @@
-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;