react-native-map4d-map-dtqg 0.1.0

package/src/components/MFMapView.js

@@ -0,0 +1,374 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {ViewPropTypes, ColorPropType} from 'deprecated-react-native-prop-types';
+import {
+  requireNativeComponent,
+  Platform,
+  NativeModules,
+  findNodeHandle
+} from 'react-native';
+
+const CameraShape = PropTypes.shape({
+  target: PropTypes.shape({
+    latitude: PropTypes.number.isRequired,
+    longitude: PropTypes.number.isRequired,
+  }),
+  zoom: PropTypes.number.isRequired,
+  bearing: PropTypes.number.isRequired,
+  tilt: PropTypes.number.isRequired,
+});
+
+// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
+const viewPropTypes = ViewPropTypes || View.propTypes;
+
+const propTypes = {
+  ...viewPropTypes,
+
+  /**
+   * An opaque identifier for a custom map configuration.
+   */
+  mapID: PropTypes.string,
+
+  /**
+   *  Map style by string for a custom map configuration.
+   */
+  mapStyle: PropTypes.string,
+
+  /**
+   * If `false` hide the button to move map to the current user's location.
+   * Default value is `false`.
+   */
+  showsMyLocationButton: PropTypes.bool,
+
+  /**
+   * If `true` the app will ask for the user's location.
+   * Default value is `false`.
+   */
+  showsMyLocation: PropTypes.bool,
+
+  /**
+   * A Boolean indicating whether the map displays buildings.
+   * Default value is `true`.
+   */
+  showsBuildings: PropTypes.bool,
+
+  /**
+   * A Boolean indicating whether the map displays POIs.
+   * Default value is `true`.
+   */
+  showsPOIs: PropTypes.bool,
+
+  /**
+   * If `false` the user won't be able to zoom the map.
+   * Default value is `true`.
+   */
+  zoomGesturesEnabled: PropTypes.bool,
+
+  /**
+   * If `false` the user won't be able to scroll the map.
+   * Default value is `true`.
+   */
+  scrollGesturesEnabled: PropTypes.bool,
+
+  /**
+   * If `false` the user won't be able to pinch/rotate the map.
+   * Default value is `true`.
+   */
+  rotateGesturesEnabled: PropTypes.bool,
+
+  /**
+   * If `false` the user won't be able to tilt the map.
+   * Default value is `true`.
+   */
+  tiltGesturesEnabled: PropTypes.bool,
+
+  /**
+   * The camera view position.
+   */
+  camera: CameraShape,
+
+  /**
+   * Type of map tiles to be rendered.
+   */
+  mapType: PropTypes.oneOf(['roadmap', 'satellite', 'hybrid']),
+
+  /**
+   * Callback that is called once the map is fully loaded.
+   * @platform android
+   */
+  onMapReady: PropTypes.func,
+
+  /**
+   * Callback that is called when user taps on the map.
+   */
+  onPress: PropTypes.func,
+
+  /**
+   * Callback that is called when user taps on the POIs
+   */
+  onPoiPress: PropTypes.func,
+
+  /**
+   * Callback that is called when user taps on the Buildings
+   */
+  onBuildingPress: PropTypes.func,
+
+  /**
+   * Callback that is called when user taps on the Places
+   */
+  onPlacePress: PropTypes.func,
+
+  /**
+   * Callback that is called when user taps on the Data Source Features
+   */
+  onDataSourceFeaturePress: PropTypes.func,
+
+  /**
+   * Callback that is called when moving camera
+   */
+  onCameraMove: PropTypes.func,
+
+  /**
+   * Callback that is called when camera start moving
+   */
+  onCameraMoveStart: PropTypes.func,
+
+  /**
+   * Callback that is called when camera idle
+   */
+  onCameraIdle: PropTypes.func,
+
+  /**
+   * Callback that is called when user taps on location Button
+   */
+  onMyLocationButtonPress: PropTypes.func,
+};
+
+
+class MFMapView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isReady: Platform.OS === 'ios',
+    };
+
+    this._onMapReady = this._onMapReady.bind(this);
+    this._ref = this._ref.bind(this);
+  }
+
+  _onMapReady() {
+    const { onMapReady } = this.props;
+    this.setState({ isReady: true }, () => {
+      if (onMapReady) {
+        onMapReady();
+      }
+    });
+  }
+
+  _ref(ref) {
+    this.map = ref;
+  }
+
+  getCamera() {
+    if (Platform.OS === 'android') {
+      return NativeModules.Map4dMap.getCamera(this._getHandle());
+    } else if (Platform.OS === 'ios') {
+      return this._runCommand('getCamera', []);
+    }
+    return Promise.reject('Function not supported on this platform');
+  }
+
+  getBounds() {
+    if (Platform.OS === 'android') {
+      return NativeModules.Map4dMap.getBounds(this._getHandle());
+    } else if (Platform.OS === 'ios') {
+      return this._runCommand('getBounds', []);
+    }
+    return Promise.reject('Function not supported on this platform');
+  }
+
+  getMyLocation() {
+    if (Platform.OS === 'android') {
+      return NativeModules.Map4dMap.getMyLocation(this._getHandle());
+    } else if (Platform.OS === 'ios') {
+      return this._runCommand('getMyLocation', []);
+    }
+    return Promise.reject('Function not supported on this platform');
+  }
+
+  animateCamera(camera) {
+    this._runCommand('animateCamera', [camera]);
+  }
+
+  moveCamera(camera) {
+    this._runCommand('moveCamera', [camera]);
+  }
+
+  setMyLocationEnabled(enable) {
+    this._runCommand('setMyLocationEnabled', [enable]);
+  }
+
+  showsMyLocationButton(enable) {
+    this._runCommand('showsMyLocationButton', [enable]);
+  }
+
+  setPOIsEnabled(enable) {
+    this._runCommand('setPOIsEnabled', [enable]);
+  }
+
+  setZoomGesturesEnabled(enable) {
+    this._runCommand('setZoomGesturesEnabled', [enable]);
+  }
+
+  setScrollGesturesEnabled(enable) {
+    this._runCommand('setScrollGesturesEnabled', [enable]);
+  }
+
+  setRotateGesturesEnabled(enable) {
+    this._runCommand('setRotateGesturesEnabled', [enable]);
+  }
+
+  setTiltGesturesEnabled(enable) {
+    this._runCommand('setTiltGesturesEnabled', [enable]);
+  }
+
+  setAllGesturesEnabled(enable) {
+    this._runCommand('setAllGesturesEnabled', [enable]);
+  }
+
+  setTime(time) {
+    let t = Date.parse(time)
+    if (isNaN(t)) {
+      console.log('time invalid')
+    }
+    else {
+      this._runCommand('setTime', [t]);
+    }
+  }
+
+  fitBounds(boundsData) {
+    this._runCommand("fitBounds", [boundsData])
+  }
+
+  cameraForBounds(boundsData) {
+    if (Platform.OS === 'android') {
+      return NativeModules.Map4dMap.cameraForBounds(
+        this._getHandle(),
+        boundsData
+      );
+    } else if (Platform.OS === 'ios') {
+      return this._runCommand('cameraForBounds', [boundsData]);
+    }
+    return Promise.reject('cameraForBounds not supported on this platform');
+  }
+
+
+  /**
+   * Convert a map coordinate to screen point
+   *
+   * @param coordinate Coordinate
+   * @param [coordinate.latitude] Latitude
+   * @param [coordinate.longitude] Longitude
+   *
+   * @return Promise Promise with the point ({ x: Number, y: Number })
+   */
+  pointForCoordinate(coordinate) {
+    if (Platform.OS === 'android') {
+      return NativeModules.Map4dMap.pointForCoordinate(
+        this._getHandle(),
+        coordinate
+      );
+    } else if (Platform.OS === 'ios') {
+      return this._runCommand('pointForCoordinate', [coordinate]);
+    }
+    return Promise.reject('pointForCoordinate not supported on this platform');
+  }
+
+  /**
+   * Convert a screen point to a map coordinate
+   *
+   * @param point Point
+   * @param [point.x] X
+   * @param [point.x] Y
+   *
+   * @return Promise Promise with the coordinate ({ latitude: Number, longitude: Number })
+   */
+  coordinateForPoint(point) {
+    if (Platform.OS === 'android') {
+      return NativeModules.Map4dMap.coordinateForPoint(
+        this._getHandle(),
+        point
+      );
+    } else if (Platform.OS === 'ios') {
+      return this._runCommand('coordinateForPoint', [point]);
+    }
+    return Promise.reject('coordinateForPoint not supported on this platform');
+  }
+
+  _getHandle() {
+    return findNodeHandle(this.map);
+  }
+
+  _runCommand(name, args) {
+    switch (Platform.OS) {
+      case 'android':
+        return NativeModules.UIManager.dispatchViewManagerCommand(
+          this._getHandle(),
+          this._uiManagerCommand(name),
+          args
+        );
+
+      case 'ios':
+        return this._mapManagerCommand(name)(this._getHandle(), ...args);
+
+      default:
+        return Promise.reject(`Invalid platform was passed: ${Platform.OS}`);
+    }
+  }
+
+  _uiManagerCommand(name) {
+    const UIManager = NativeModules.UIManager;
+    const componentName = "RMFMapView";
+
+    if (!UIManager.getViewManagerConfig) {
+      // RN < 0.58
+      return UIManager[componentName].Commands[name];
+    }
+
+    // RN >= 0.58        
+    return UIManager.getViewManagerConfig(componentName).Commands[name];
+  }
+
+  _mapManagerCommand(name) {
+    return NativeModules[`RMFMapView`][name];
+  }
+
+
+  render() {
+    let props;
+
+    if (this.state.isReady) {
+      props = {
+        style: this.props.style,
+        onMapReady: this._onMapReady,
+        ...this.props,
+      };
+    } else {
+      props = {
+        style: this.props.style,
+        onMapReady: this._onMapReady
+      };
+    }
+
+    return <RMFMapView
+      {...props}
+      ref={this._ref}
+    />;
+  }
+}
+
+MFMapView.propTypes = propTypes;
+var RMFMapView = requireNativeComponent(`RMFMapView`, MFMapView);
+
+
+export { MFMapView }

package/src/components/MFMarker.js

@@ -0,0 +1,246 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
+import {
+  requireNativeComponent,
+  StyleSheet,
+  Platform,
+  Image,
+  NativeModules,
+  findNodeHandle
+} 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 marker.
+   */
+  coordinate: PropTypes.shape({
+    latitude: PropTypes.number.isRequired,
+    longitude: PropTypes.number.isRequired,
+  }).isRequired,
+
+  /**
+   * Default value is `false`
+   */
+  draggable: PropTypes.bool,
+
+  /**
+   * Sets the ground anchor point for the marker.
+   */
+  anchor: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+  }),
+
+  /**
+   * 
+   */
+  elevation: PropTypes.number,
+
+  /**
+   * 
+   */
+  rotation: PropTypes.number,
+
+  /**
+   * Sets the infor window anchor point for the marker.
+   */
+  infoWindowAnchor: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+  }),
+
+  /**
+   * The title of the marker.
+   */
+  title: PropTypes.string,
+
+  /**
+   * The snippet of the marker.
+   */
+  snippet: PropTypes.string,
+
+  /**
+   * Marker icon to render.
+   */
+  icon: PropTypes.shape({
+    uri: PropTypes.any.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+  }),
+
+
+  /**
+   * zIndex
+   */
+  zIndex: PropTypes.number,
+
+  /**
+   * visible
+   */
+  visible: PropTypes.bool,
+
+  /**
+   * userData
+   */
+  userData:PropTypes.object,
+
+  /**
+   * Callback that is called when the user presses on the marker
+   */
+  onPress: PropTypes.func,
+
+  /**
+   * Callback that is called when the user presses on the info window
+   */
+  onPressInfoWindow: PropTypes.func,
+
+  /**
+   * Callback that is called when the user initiates a drag on this marker (if it is draggable)
+   */
+  onDragStart: PropTypes.func,
+
+  /**
+   * Callback called continuously as the marker is dragged
+   */
+  onDrag: PropTypes.func,
+
+  /**
+   * Callback that is called when a drag on this marker finishes. This is usually the point you
+   * will want to setState on the marker's coordinate again
+   */
+  onDragEnd: PropTypes.func,
+};
+
+
+class MFMarker extends React.Component {
+    constructor(props) {
+      super(props);      
+      this._onPress = this._onPress.bind(this)
+      this._ref = this._ref.bind(this)
+    }
+
+    setCoordinate(location) {
+        this._runCommand("setCoordinate", [location])
+    }
+
+    setRotation(rotation) {
+      this._runCommand("setRotation", [rotation])
+    }
+
+    setTitle(title) {
+      this._runCommand("setTitle", [title])
+    }
+
+    setSnippet(snippet) {
+      this._runCommand("setSnippet", [snippet])
+    }
+
+    setDraggable(draggable) {
+      this._runCommand("setDraggable", [draggable])
+    }
+
+    setZIndex(zIndex) {
+      this._runCommand("setZIndex", [zIndex])
+    }
+
+    setVisible(visible) {
+      this._runCommand("setVisible", [visible])
+    }
+
+    setInfoWindowAnchor(anchor) {
+      this._runCommand("setInfoWindowAnchor", [anchor])
+    }
+
+    setElevation(elevation) {
+      this._runCommand("setElevation", [elevation])
+    }
+
+    setUserData(userData) {
+      this._runCommand("setUserData", [userData])
+    }
+
+    _getHandle() {
+        return findNodeHandle(this.marker);
+      }
+
+
+    _runCommand(name, args) {
+        switch (Platform.OS) {
+          case 'android':
+            NativeModules.UIManager.dispatchViewManagerCommand(
+              this._getHandle(),
+              this._uiManagerCommand(name),
+              args
+            );
+            break;
+    
+          case 'ios':
+            //this.getMapManagerCommand(name)(this._getHandle(), ...args);
+            this._mapManagerCommand(name)(this._getHandle(), ...args);
+            break;
+    
+          default:
+            break;
+        }
+      }
+
+      _uiManagerCommand(name) {
+        const UIManager = NativeModules.UIManager;
+        const componentName = "RMFMarker";
+    
+        if (!UIManager.getViewManagerConfig) {
+          // RN < 0.58
+          return UIManager[componentName].Commands[name];
+        }
+    
+        // RN >= 0.58        
+        return UIManager.getViewManagerConfig(componentName).Commands[name];
+      }
+      
+      _mapManagerCommand(name) {
+        return NativeModules[`RMFMarker`][name];
+      }
+
+      _onPress(event) {
+        event.stopPropagation();
+          if (this.props.onPress) {
+            this.props.onPress(event);
+        }
+      }
+
+      _ref(ref) {
+        this.marker = ref;
+      }
+
+      render() {
+        let icon = {};
+        if (this.props.icon) {
+          let uri = Image.resolveAssetSource(this.props.icon.uri) || {uri: this.props.icon.uri};
+          icon = {uri: uri.uri, width: this.props.icon.width, height: this.props.icon.height}
+        }
+        return <RMFMarker
+          {...this.props}
+          icon={icon}
+          ref={this._ref}
+          style={[styles.marker, this.props.style]}
+          onPress={this._onPress}
+        />;
+      }
+}
+
+MFMarker.propTypes = propTypes;
+var RMFMarker = requireNativeComponent(`RMFMarker`, MFMarker);
+
+const styles = StyleSheet.create({
+  marker: {
+    position: 'absolute'
+  },
+});
+
+export {MFMarker}