visioreactnative

Bridge for VisioMoveEssential (using 2.4.3)

visioreactnative library - React Native Module & View

⚠️ Disclaimer: This library is currently in Alpha. It is still under active development, and not all native APIs are exposed yet. Expect potential issues, incomplete functionality, and breaking changes in future updates. Please proceed with caution when using this in production, and report any issues you encounter.

The RNVisioglobeLibraryModule offers a set of functionalities to manage map views, camera controls, routing, points of interest (POIs), and more in your React Native applications. Below is a detailed overview of the available functions.

Installation

npm install visioreactnative

Usage

RNVisioglobeLibraryView

The RNVisioglobeLibraryView is a React Native component that bridges the VisioGlobe native view into your JavaScript code. This allows you to display and interact with the map from the VisioGlobe SDK.

⚠️ Disclaimer: The RNVisioglobeLibraryView is part of an Alpha version of the bridge. Not all native functionalities may be available, and there may be issues when integrating this view in production environments. Use with caution and report any bugs you encounter.

Props

| Prop | Type | Description | | -------------- | ---------- | --------------------------------------------------------------------------- | | mapHash | string? | Optional hash string for the map, mandatory if no path | | mapPath | string? | Optional path for the map data, mandatory if no Hash | | mapSecretCode| number | Required secret code to access certain map functionalities. | | loaded | boolean | Indicates whether the map has finished loading. | | style | ViewStyle| Custom styling for the view. This is mandatory for rendering the component. |

Example Usage

To use the RNVisioglobeLibraryView, simply import and render it with the required props.

import { RNVisioglobeLibraryView } from 'visioreactnative';

const MyMapComponent = () => {
  return (
    <RNVisioglobeLibraryView
      mapHash = {"yourmaphash"}
      mapSecretCode={123456}
      loaded={true}
      style={{ width: '100%', height: '100%' }}
    />
  );
};

RNVisioglobeLibraryModule

1. getDataSdkVersion

Fetches the SDK Data version from the native module.

• Parameters:
  • callback: (version: string) => void – Receives the SDK Data version as a string.
• Example:

  RNVisioglobeLibraryModule.getDataSdkVersion((version) => {
    console.log('SDK Version:', version);
  });

2. getCameraContext

Gets the current camera context from the map view.

• Parameters:
  • callback: (context: VMCameraContext) => void – Receives the camera context.
• Example:

  RNVisioglobeLibraryModule.getCameraContext((context) => {
    console.log('Camera Context:', context);
  });

3. updateCamera

Updates the camera position without any animation.

• Parameters:
  • cameraUpdate: VMCameraUpdate – Specifies the next camera position.
• Example:

  RNVisioglobeLibraryModule.updateCamera(cameraUpdate);

4. animateCamera

Animates the camera to a new position.

• Parameters:
  • cameraUpdate: VMCameraUpdate – Specifies the new camera position to animate to.
• Example:

  RNVisioglobeLibraryModule.animateCamera(cameraUpdate);

5. computeRoute

Computes a route on the map based on the specified request.

• Parameters:
  • routeRequest: VMRouteRequest – Describes the route to compute.
  • successCallback: (routeResult: VMRouteResult) => void – Called with the generated route.
  • errorCallback: (error: string) => void – Called if there’s an error during route computation.
• Example:

  RNVisioglobeLibraryModule.computeRoute(routeRequest, (routeResult) => {
    console.log('Route computed:', routeResult);
  }, (error) => {
    console.log('Route computation failed:', error);
  });

6. setExcludedAttributes

Sets attributes to exclude from routing.

• Parameters:
  • attributes: string[] – List of attribute keys to exclude from routing.
• Example:

  RNVisioglobeLibraryModule.setExcludedAttributes(['stairs', 'elevator']);

7. setExcludedModalities

Excludes specific modalities from routing.

• Parameters:
  • modalities: string[] – List of modality keys to exclude.
• Example:

  RNVisioglobeLibraryModule.setExcludedModalities(['walking', 'wheelchair']);

8. getModalities

Retrieves available routing modalities.

• Parameters:
  • callback: (modalities: string[]) => void – Receives the list of modalities.
• Example:

  RNVisioglobeLibraryModule.getModalities((modalities) => {
    console.log('Available modalities:', modalities);
  });

9. getAttributes

Retrieves available attributes for routing.

• Parameters:
  • callback: (attributes: string[]) => void – Receives the list of attributes.
• Example:

  RNVisioglobeLibraryModule.getAttributes((attributes) => {
    console.log('Available attributes:', attributes);
  });

10. setPois

Sets Points of Interest (POIs) on the map.

• Parameters:
  • data: string – The data specifying the POIs.
  • callback: (result: Map<string, string>) => void – Called with the result of setting POIs.
• Example:

  RNVisioglobeLibraryModule.setPois('POIData', (result) => {
    console.log('POIs set:', result);
  });

11. getLocationTrackingMode

Gets the current location tracking mode.

• Parameters:
  • callback: (trackingMode: VMLocationTrackingMode) => void – Receives the tracking mode.
• Example:

  RNVisioglobeLibraryModule.getLocationTrackingMode((mode) => {
    console.log('Tracking mode:', mode);
  });

12. setLocationTrackingMode

Sets the location tracking mode.

• Parameters:
  • trackingMode: VMLocationTrackingMode – The tracking mode to set.
• Example:

  RNVisioglobeLibraryModule.setLocationTrackingMode(newMode);

13. updateLocation

Updates the user's location on the map.

• Parameters:
  • update: VMLocation – New location data to set.
• Example:

  RNVisioglobeLibraryModule.updateLocation(newLocation);

14. getNavigationHeaderViewVisible

Gets the visibility status of the navigation header view.

• Parameters:
  • callback: (viewVisible: boolean) => void – Receives whether the view is visible.
• Example:

  RNVisioglobeLibraryModule.getNavigationHeaderViewVisible((isVisible) => {
    console.log('Header view visible:', isVisible);
  });

15. setNavigationHeaderViewVisible

Sets the visibility of the navigation header view.

• Parameters:
  • viewVisible: boolean – Whether to show or hide the navigation header view.
• Example:

  RNVisioglobeLibraryModule.setNavigationHeaderViewVisible(true);

16. getCompassHeadingMarkerVisible

Gets the visibility of the compass heading marker.

• Parameters:
  • callback: (markerVisible: boolean) => void – Receives the marker visibility status.
• Example:

  RNVisioglobeLibraryModule.getCompassHeadingMarkerVisible((isVisible) => {
    console.log('Compass heading marker visible:', isVisible);
  });

17. setCompassHeadingMarkerVisible

Sets the visibility of the compass heading marker.

• Parameters:
  • markerVisible: boolean – Whether to show or hide the compass heading marker.
• Example:

  RNVisioglobeLibraryModule.setCompassHeadingMarkerVisible(true);

18. showSearchViewWithTitle

Displays a search view with a custom title.

• Parameters:
  • title: string – Title to display in the search view.
  • searchViewDidSelectPoiIDCallback: (poiID: string) => void – Called when a POI is selected.
• Example:

  RNVisioglobeLibraryModule.showSearchViewWithTitle('Search Places', (poiID) => {
    console.log('Selected POI:', poiID);
  });

19. showPoiInfo

Shows information about a specific POI.

• Parameters:
  • poiID: string – The ID of the POI to show.
• Example:

  RNVisioglobeLibraryModule.showPoiInfo('POI-ID');

20. getPoi

Fetches detailed information about a POI.

• Parameters:
  • poiID: string – The POI identifier.
  • callbackPoi: (poi: VMPoi) => void – Called with the POI details.
• Example:

  RNVisioglobeLibraryModule.getPoi('POI-ID', (poi) => {
    console.log('POI Info:', poi);
  });

21. getPoiPosition

Retrieves the position of a POI on the map.

• Parameters:
  • poiID: string – The POI identifier.
  • callback: (position: VMPosition) => void – Receives the POI's position.
• Example:

  RNVisioglobeLibraryModule.getPoiPosition('POI-ID', (position) => {
    console.log('POI Position:', position);
  });

22. setCompass

Sets the visibility of the compass on the map.

• Parameters:
  • value: boolean – Whether to show or hide the compass.
• Example:

  RNVisioglobeLibraryModule.setCompass(true);

23. setCategories

Updates the categories to filter displayed points of interest.

• Parameters:
  • `data: string

` – The category data to set.

• Example:

  RNVisioglobeLibraryModule.setCategories(categoryData);

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

VIEW LICENSE FILE

Made with create-react-native-library