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

package/ios/install.md

@@ -0,0 +1,44 @@
+# iOS Installation
+
+The following assumes, that you're using autolinking and installed
+
+
+`@maplibre/maplibre-react-native` via `npm` or `yarn`.
+
+Add the following to your `ios/Podfile`:
+
+```ruby
+  post_install do |installer|
+    $RNMBGL.post_install(installer)
+    ... other post install hooks
+  end
+```
+
+Running `pod install` will add version `5.12.2` of the MapLibre SDK.
+
+```sh
+# Go to the ios folder
+cd ios
+
+# Run Pod Install
+pod install
+```
+
+You are good to go!
+
+## Installing a specific version
+
+The current default MapLibre version is `5.12.2`.
+If you want to install a different version, you can override as follows in
+your `Podfile`:
+
+```ruby
+$RNMBGL_Use_SPM = {
+  url: "https://github.com/maplibre/maplibre-gl-native-distribution",
+  requirement: {
+    kind: "upToNextMajorVersion",
+    minimumVersion: "5.12.2"
+  },
+  product_name: "Mapbox"
+}
+```

package/javascript/components/AbstractLayer.js

@@ -0,0 +1,75 @@
+/* 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

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

@@ -0,0 +1,97 @@
+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 MapboxGL = 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: MapboxGL.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/Callout.js

@@ -0,0 +1,139 @@
+import {viewPropTypes} from '../utils';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  View,
+  Text,
+  Animated,
+  requireNativeComponent,
+  StyleSheet,
+} from 'react-native';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 180,
+    zIndex: 9999999,
+  },
+  tip: {
+    zIndex: 1000,
+    marginTop: -2,
+    elevation: 0,
+    backgroundColor: 'transparent',
+    borderTopWidth: 16,
+    borderRightWidth: 8,
+    borderBottomWidth: 0,
+    borderLeftWidth: 8,
+    borderTopColor: 'white',
+    borderRightColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: 'transparent',
+  },
+  content: {
+    position: 'relative',
+    padding: 8,
+    flex: 1,
+    borderRadius: 3,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.2)',
+    backgroundColor: 'white',
+  },
+  title: {
+    color: 'black',
+    textAlign: 'center',
+  },
+});
+
+/**
+ *  Callout that displays information about a selected annotation near the annotation.
+ */
+class Callout extends React.PureComponent {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * String that get's displayed in the default callout.
+     */
+    title: PropTypes.string,
+
+    /**
+     * Style property for the Animated.View wrapper, apply animations to this
+     */
+    style: PropTypes.any,
+
+    /**
+     * Style property for the native RCTMGLCallout container, set at your own risk.
+     */
+    containerStyle: PropTypes.any,
+
+    /**
+     * Style property for the content bubble.
+     */
+    contentStyle: PropTypes.any,
+
+    /**
+     * Style property for the triangle tip under the content.
+     */
+    tipStyle: PropTypes.any,
+
+    /**
+     * Style property for the title in the content bubble.
+     */
+    textStyle: PropTypes.any,
+  };
+
+  get _containerStyle() {
+    return [
+      {
+        position: 'absolute',
+        zIndex: 999,
+        backgroundColor: 'transparent',
+      },
+      this.props.containerStyle,
+    ];
+  }
+
+  get _hasChildren() {
+    return React.Children.count(this.props.children) > 0;
+  }
+
+  _renderDefaultCallout() {
+    return (
+      <Animated.View style={[styles.container, this.props.style]}>
+        <View style={[styles.content, this.props.contentStyle]}>
+          <Text style={[styles.title, this.props.textStyle]}>
+            {this.props.title}
+          </Text>
+        </View>
+        <View style={[styles.tip, this.props.tipStyle]} />
+      </Animated.View>
+    );
+  }
+
+  _renderCustomCallout() {
+    return (
+      <Animated.View {...this.props} style={this.props.style}>
+        {this.props.children}
+      </Animated.View>
+    );
+  }
+
+  render() {
+    const calloutContent = this._hasChildren
+      ? this._renderCustomCallout()
+      : this._renderDefaultCallout();
+    return (
+      <RCTMGLCallout style={this._containerStyle}>
+        {calloutContent}
+      </RCTMGLCallout>
+    );
+  }
+}
+
+const RCTMGLCallout = requireNativeComponent(NATIVE_MODULE_NAME, Callout);
+
+export default Callout;