react-native-map4d-map-dtqg 0.1.0

package/src/components/MFPOI.js

@@ -0,0 +1,184 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {ViewPropTypes, ColorPropType} from 'deprecated-react-native-prop-types';
+import {
+  requireNativeComponent,
+  Platform,
+  Image,
+  NativeModules,
+  findNodeHandle,
+  processColor
+} from 'react-native';
+
+// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
+const viewPropTypes = ViewPropTypes || View.propTypes;
+
+const propTypes = {
+  ...viewPropTypes,
+
+    /**
+   * The coordinate for the POI.
+   */
+  coordinate: PropTypes.shape({
+    latitude: PropTypes.number.isRequired,
+    longitude: PropTypes.number.isRequired,
+  }).isRequired,
+
+  /**
+   * The title of the POI.
+   */
+  title: PropTypes.string,
+
+  /**
+   * The color of the title.
+   */
+  titleColor: ColorPropType,
+
+  /**
+   * The subtile of the POI.
+   */
+  subtitle: PropTypes.string,
+
+  /**
+   * The type of POI
+   */
+  //poiType: PropTypes.oneOf(['cafe', 'atm', 'bank']),
+  poiType: PropTypes.string,
+
+  /**
+   * POI icon to render.
+   */
+  icon: PropTypes.shape({
+    uri: PropTypes.any.isRequired
+  }),
+
+  /**
+   * zIndex
+   */
+  zIndex: PropTypes.number,
+
+  /**
+   * visible
+   */
+  //TODO
+  // visible: PropTypes.bool,
+
+  /**
+   * userData
+   */
+  userData:PropTypes.object,
+
+  /**
+   * Callback that is called when the user presses on the POI
+   */
+  onPress: PropTypes.func,
+};
+
+class MFPOI extends React.Component {
+  constructor(props) {
+    super(props);
+    this._onPress = this._onPress.bind(this)
+    this._ref = this._ref.bind(this)
+  }
+
+  _onPress(event) {
+    event.stopPropagation();
+      if (this.props.onPress) {
+        this.props.onPress(event);
+    }
+  }
+
+  _ref(ref) {
+    this.poi = ref;
+  }
+
+  setCoordinate(coordinate) {
+    this._runCommand("setCoordinate", [coordinate])
+  }
+  setTitle(title) {
+    this._runCommand("setTitle", [title])
+  }
+  setTitleColor(color) {
+    this._runCommand("setTitleColor", [processColor(color)])
+  }
+  setSubTitle(subtitle) {
+    this._runCommand("setSubTitle", [subtitle])
+  }
+  setPoiType(type) {
+    this._runCommand("setPoiType", [type])
+  }
+  setIcon(icon) {
+    let uri = Image.resolveAssetSource(icon.uri) || { uri: icon.uri }
+    this._runCommand("setIcon", [ { uri: uri.uri } ])
+  }
+  setZIndex(zIndex) {
+    this._runCommand("setZIndex", [zIndex])
+  }
+  // setVisible(visible) {
+  //   this._runCommand("setVisible", [visible])
+  // }
+  setUserData(userData) {
+    this._runCommand("setUserData", [userData])
+  }
+
+  _getHandle() {
+    return findNodeHandle(this.poi);
+  }
+
+
+  _runCommand(name, args) {
+    switch (Platform.OS) {
+      case 'android':
+        NativeModules.UIManager.dispatchViewManagerCommand(
+          this._getHandle(),
+          this._uiManagerCommand(name),
+          args
+        );
+        break;
+
+      case 'ios':
+        this._mapManagerCommand(name)(this._getHandle(), ...args);
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  _uiManagerCommand(name) {
+    const UIManager = NativeModules.UIManager;
+    const componentName = "RMFPOI";
+
+    if (!UIManager.getViewManagerConfig) {
+      // RN < 0.58
+      return UIManager[componentName].Commands[name];
+    }
+
+    // RN >= 0.58        
+    return UIManager.getViewManagerConfig(componentName).Commands[name];
+  }
+  
+  _mapManagerCommand(name) {
+    return NativeModules[`RMFPOI`][name];
+  }
+
+  render() {
+    let icon = {}
+    if (this.props.icon) {
+      let uri = Image.resolveAssetSource(this.props.icon.uri) || {uri: this.props.icon.uri}
+      icon = { uri: uri.uri }
+    }
+    return <RMFPOI
+      {...this.props}
+      icon={icon}
+      ref={this._ref}
+      onPress={this._onPress}
+    />;
+  }
+}
+
+MFPOI.propTypes = propTypes;
+
+var RMFPOI = requireNativeComponent(`RMFPOI`, MFPOI);
+
+export {MFPOI}

package/src/components/MFPolygon.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {ViewPropTypes, ColorPropType} from 'deprecated-react-native-prop-types';
+import {
+  requireNativeComponent,
+  Platform,
+  NativeModules,
+  findNodeHandle,
+  processColor
+} from 'react-native';
+
+// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
+const viewPropTypes = ViewPropTypes || View.propTypes;
+
+const propTypes = {
+  ...viewPropTypes,
+
+  /**
+   * An array of coordinates to describe the polygon
+   */
+  coordinates: PropTypes.arrayOf(
+    PropTypes.shape({
+      /**
+       * Latitude/Longitude coordinates
+       */
+      latitude: PropTypes.number.isRequired,
+      longitude: PropTypes.number.isRequired,
+    })
+  ),
+
+  /**
+   * An array of array of coordinates to describe the polygon holes
+   */
+  holes: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        /**
+         * Latitude/Longitude coordinates
+         */
+        latitude: PropTypes.number.isRequired,
+        longitude: PropTypes.number.isRequired,
+      })
+    )
+  ),
+
+  /**
+   * The color to use for the polygon.
+   */
+  fillColor: ColorPropType,
+
+  /**
+   * The color to use for the polygon stroke.
+   */
+  strokeColor: ColorPropType,
+
+  /**
+   * The stroke width to use for the polygon.
+   */
+  strokeWidth: PropTypes.number,
+
+  /**
+   * zIndex
+   */
+  zIndex: PropTypes.number,
+
+  /**
+   * visible
+   */
+  visible: PropTypes.bool,
+
+  /**
+   * userData
+   */
+  userData:PropTypes.object,
+
+  /**
+   * Callback that is called when the user presses on the polygon
+   */
+  onPress: PropTypes.func,
+};
+
+
+class MFPolygon extends React.Component {
+  constructor(props) {
+    super(props);
+    this._onPress = this._onPress.bind(this)
+    this._ref = this._ref.bind(this)
+  }
+
+  _onPress(event) {
+    event.stopPropagation();
+      if (this.props.onPress) {
+        this.props.onPress(event);
+    }
+  }
+
+  _ref(ref) {
+    this.polygon = ref;
+  }
+
+  setCoordinates(coordinates) {
+    this._runCommand("setCoordinates", [coordinates])
+  }
+
+  setHoles(holes) {
+    this._runCommand("setHoles", [holes])
+  }
+
+  setFillColor(color) {
+    this._runCommand("setFillColor", [processColor(color)])
+  }
+
+  setStrokeColor(color) {
+    this._runCommand("setStrokeColor", [processColor(color)])
+  }
+
+  setStrokeWidth(width) {
+    this._runCommand("setStrokeWidth", [width])
+  }
+
+  setVisible(visible) {
+    this._runCommand("setVisible", [visible])
+  }
+
+  setZIndex(zIndex) {
+    this._runCommand("setZIndex", [zIndex])
+  }
+
+  setUserData(userData) {
+    this._runCommand("setUserData", [userData])
+  }
+
+  _getHandle() {
+    return findNodeHandle(this.polygon);
+  }
+
+  _runCommand(name, args) {
+    switch (Platform.OS) {
+      case 'android':
+        NativeModules.UIManager.dispatchViewManagerCommand(
+          this._getHandle(),
+          this._uiManagerCommand(name),
+          args
+        );
+        break;
+
+      case 'ios':
+        this._mapManagerCommand(name)(this._getHandle(), ...args);
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  _uiManagerCommand(name) {
+    const UIManager = NativeModules.UIManager;
+    const componentName = "RMFPolygon";
+
+    if (!UIManager.getViewManagerConfig) {
+      // RN < 0.58
+      return UIManager[componentName].Commands[name];
+    }
+
+    // RN >= 0.58        
+    return UIManager.getViewManagerConfig(componentName).Commands[name];
+  }
+
+  _mapManagerCommand(name) {
+    return NativeModules[`RMFPolygon`][name];
+  }
+
+  render() {
+    return <RMFPolygon
+      {...this.props}
+      ref={this._ref}
+      onPress={this._onPress}
+    />;
+  }
+}
+
+MFPolygon.propTypes = propTypes;
+
+var RMFPolygon = requireNativeComponent(`RMFPolygon`, MFPolygon);
+
+export { MFPolygon }

package/src/components/MFPolyline.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {ViewPropTypes, ColorPropType} from 'deprecated-react-native-prop-types';
+import {
+  requireNativeComponent,
+  Platform,
+  NativeModules,
+  findNodeHandle,
+  processColor
+} from 'react-native';
+
+// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
+const viewPropTypes = ViewPropTypes || View.propTypes;
+
+const propTypes = {
+  ...viewPropTypes,
+
+  /**
+   * An array of coordinates to describe the polyline
+   */
+  coordinates: PropTypes.arrayOf(
+    PropTypes.shape({
+      /**
+       * Latitude/Longitude coordinates
+       */
+      latitude: PropTypes.number.isRequired,
+      longitude: PropTypes.number.isRequired,
+    })
+  ),
+
+  /**
+   * The color to use for the path.
+   */
+  color: ColorPropType,
+
+  /**
+   * The stroke width to use for the path.
+   */
+  width: PropTypes.number,
+
+  /**
+   * The default style is `solid`.
+   */
+  lineStyle: PropTypes.oneOf(['solid', 'dotted']),
+
+  /**
+   * zIndex
+   */
+  zIndex: PropTypes.number,
+
+  /**
+   * visible
+   */
+  visible: PropTypes.bool,
+
+  /**
+   * userData
+   */
+  userData:PropTypes.object,
+
+  /**
+   * Callback that is called when the user presses on the polyline
+   */
+  onPress: PropTypes.func,
+};
+
+
+class MFPolyline extends React.Component {
+  constructor(props) {
+    super(props);
+    this._onPress = this._onPress.bind(this)
+    this._ref = this._ref.bind(this)
+  }
+
+  _onPress(event) {
+    event.stopPropagation();
+      if (this.props.onPress) {
+        this.props.onPress(event);
+    }
+  }
+
+  _ref(ref) {
+    this.polyline = ref;
+  }
+
+  // TODO - bug
+  setCoordinates(coordinates) {
+    this._runCommand("setCoordinates", [coordinates])
+  }
+
+  setWidth(width) {
+    this._runCommand("setWidth", [width])
+  }
+
+  setColor(color) {
+    this._runCommand("setColor", [processColor(color)])
+  }
+
+  setVisible(visible) {
+    this._runCommand("setVisible", [visible])
+  }
+
+  setTouchable(touchable) {
+    this._runCommand("setTouchable", [touchable])
+  }
+
+  setZIndex(zIndex) {
+    this._runCommand("setZIndex", [zIndex])
+  }
+
+  setLineStyle(style) {
+    this._runCommand("setLineStyle", [style])
+  }
+
+  setUserData(userData) {
+    this._runCommand("setUserData", [userData])
+  }
+
+  _getHandle() {
+    return findNodeHandle(this.polyline);
+  }
+
+  _runCommand(name, args) {
+    switch (Platform.OS) {
+      case 'android':
+        NativeModules.UIManager.dispatchViewManagerCommand(
+          this._getHandle(),
+          this._uiManagerCommand(name),
+          args
+        );
+        break;
+
+      case 'ios':
+        this._mapManagerCommand(name)(this._getHandle(), ...args);
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  _uiManagerCommand(name) {
+    const UIManager = NativeModules.UIManager;
+    const componentName = "RMFPolyline";
+
+    if (!UIManager.getViewManagerConfig) {
+      // RN < 0.58
+      return UIManager[componentName].Commands[name];
+    }
+
+    // RN >= 0.58        
+    return UIManager.getViewManagerConfig(componentName).Commands[name];
+  }
+
+  _mapManagerCommand(name) {
+    return NativeModules[`RMFPolyline`][name];
+  }
+
+  render() {
+    return <RMFPolyline
+      {...this.props}
+      ref={this._ref}
+      onPress={this._onPress}
+    />;
+  }
+}
+
+MFPolyline.propTypes = propTypes;
+
+var RMFPolyline = requireNativeComponent(`RMFPolyline`, MFPolyline);
+
+export { MFPolyline }

package/src/components/MFTileOverlay.js

@@ -0,0 +1,45 @@
+import PropTypes from "prop-types";
+import React from 'react';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
+import {
+  requireNativeComponent,
+  View,
+} from 'react-native';
+
+// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
+const viewPropTypes = ViewPropTypes || View.propTypes;
+const propTypes = {
+  ...viewPropTypes,
+
+  /**
+   * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
+   * For example, https://tile.openstreetmap.de/{z}/{x}/{y}.png
+   */
+  urlTemplate: PropTypes.string.isRequired,
+
+  /**
+   * visible
+   */
+  visible: PropTypes.bool,
+
+  /**
+   * The order in which this tile overlay is drawn with respect to other overlays. An overlay
+   * with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays
+   * with the same z-index is arbitrary. The default zIndex is 0.
+   */
+  zIndex: PropTypes.number,
+};
+
+class MFTileOverlay extends React.Component {
+  render() {
+    return <RMFTileOverlay
+      {...this.props}
+    />;
+  }
+}
+
+MFTileOverlay.propTypes = propTypes;
+
+var RMFTileOverlay = requireNativeComponent(`RMFTileOverlay`, MFTileOverlay);
+
+export { MFTileOverlay }

package/src/components/Map4dMapView.tsx

@@ -0,0 +1,27 @@
+import {
+    requireNativeComponent,
+    UIManager,
+    Platform,
+    ViewStyle,
+  } from 'react-native';
+  
+  const LINKING_ERROR =
+    `The package 'react-native-map4d-map' doesn't seem to be linked. Make sure: \n\n` +
+    Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+    '- You rebuilt the app after installing the package\n' +
+    '- You are not using Expo managed workflow\n';
+  
+  type Map4dMapProps = {
+    color: string;
+    style: ViewStyle;
+  };
+  
+  const ComponentName = 'Map4dMapView';
+  
+  export const Map4dMapView =
+    UIManager.getViewManagerConfig(ComponentName) != null
+      ? requireNativeComponent<Map4dMapProps>(ComponentName)
+      : () => {
+          throw new Error(LINKING_ERROR);
+        };
+  

package/src/index.js

@@ -0,0 +1,21 @@
+import {MFMapView} from './components/MFMapView'
+import {MFMarker} from './components/MFMarker'
+import {MFCircle} from './components/MFCircle'
+import {MFPolyline} from './components/MFPolyline'
+import {MFPolygon} from './components/MFPolygon'
+import {MFPOI} from './components/MFPOI'
+import {MFDirectionsRenderer} from './components/MFDirectionsRenderer'
+import {MFTileOverlay} from './components/MFTileOverlay'
+import {MFBuilding} from './components/MFBuilding'
+
+export {
+  MFMapView,
+  MFMarker,
+  MFCircle,
+  MFPolyline,
+  MFPolygon,
+  MFPOI,
+  MFDirectionsRenderer,
+  MFTileOverlay,
+  MFBuilding,
+};