react-native-visioglobe

react native bridge for visioglobe sdk

Installation

Put your .tgz file next to the root of your React Native Project

Then navigate to the root of your project :

npm install ../react-native-visioglobe.tgz

Go to your app Android's Manifest and add

<manifest ... xmlns:tools="http://schemas.android.com/tools">
<application 
...
tools:replace="android:allowBackup" >

then in you app's settings.gradle add

include ':visio-sdk'
project(':visio-sdk').projectDir = new File('../node_modules/react-native-visioglobe/android/visio-sdk')

Usage

import React, { useState } from 'react';
import VisioMapView from 'react-native-visioglobe';

export default function App(){
  const ref = React.useRef<typeof VisioMapView>(null);
  const mapHash="mapHash"
  const mapPath="path"
  const mapSecret=0

 
  return (
      <VisioMapView
        style={{
          width:'100%',
          height:'100%',
        }}
        mapHash={mapHash}
        mapPath={mapPath}
        mapSecret={mapSecret}
        ref={ref}
        promptToDownload={true}
        listeners={["buildingListener","cameraListener","mapListener","locationtrackingmodeListener","poiListener"]}
      />
  );
};


App;

If you are using Visioglobe custom's enum such as : VMERouteRequestType, VMRouteDestinationsOrder, VMViewModeType, etc... you can import them from react-native-visioglobe/src/ :

import { VMViewModeType } from 'react-native-visioglobe/src/VisioTypes';

Contributing

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

License

MIT

Known Issue

In case of implicit declaration with ios : clean and build the app in xcode before calling yarn ios

HOW TO USE THIS BRIDGE

Each of the following functionalities is demonstrated in the code in the example section. You can go directly to the file with all the demo code by clicking here.

Sections

Display Props

This shows you the minimal props you need to have within the VisioMapView component.
If you have trouble getting any of them, please ask us in our help platform.

More specifically you have:

• Map Hash : A string to retrieve your map from our server. Using it will allows the map to be updated every time you are using your map is updated from our editor. Is mandatory if Path is not used.
• Map Secret Code : Your secret code to load the map.
• Map Path : A string if you want to use a local bundle, please indicate his path here. Note that using a local bundle means, updating it manually when the map is modified. Is mandatory if Hash is not used.
• Ref : a ref to the MapView, mandatory to use this bridge.

const ref = React.useRef<VisioMapView>(null);
<VisioMapView
        style={{
        style
        }}
        mapHash={"mapHash"}
        mapPath={"mapPath"}
        mapSecret={0}
        ref={ref}
      />

Unload Map View

If you want to hide the map, you can using unload map view. You do not need to provide any argument.

const unloadMapView = () => {
    if (ref.current) {
      ref.current.unloadMapView();
    }
  }

Then you can call it like in the example

Reload Map View

If you want to load the map after hiding it, you can with load map view. You do not need to provide any argument.

 const loadMapView = () => {
    if (ref.current) {
      ref.current.loadMapView();
    }
  } 

Then you can call it like in the example

Animate Camera

This allows you to define a camera movement for a duration you define according to your VMCameraUpdate.

VMCameraUpdate is a TSObject defined with :

• Heading : VMHeading object define as :
  • heading : string | number
  • current : if you want to use current heading
• paddingBottom : the property used to define the space between the camera and its bottom-borders.
• paddingLeft : the property used to define the space between the camera and its left-borders.
• paddingRight : the property used to define the space between the camera and its right-borders.
• paddingTop : the property used to define the space between the camera and its top-borders.
• pitch : pitch //COMING NEXT TO DOC.
• targets : the target you want to have at the camera (can be VMPosition or POIID (string))
• viewMode : an enum of type VMViewModeType:
  • floor
  • global
  • unkown

const animateCamera = (values: VMCameraUpdate) => {
    if (ref.current) {
      ref.current.animateCamera(values,3 //duration here fixed to 3
      );
    }
  };

//Then you can use it like :

  const heading : VMCameraHeading = {
          current: true
        }

        const pitch : VMCameraPitch = {
          type: pitchType.default,
        }

        const values : VMCameraUpdate = {
          heading : heading,
          paddingBottom: 50,
          paddingLeft: 50,
          paddingRight : 50,
          paddingTop : 50,
          pitch : pitch,
          targets : ["B2-UL00"],
          viewMode : VMViewModeType.floor,
        }

        animateCamera(values)

Update Camera

This allows you to define a camera movement instantly you define according to your VMCameraUpdate. Here we are playing with the pitch and we are using a VMLocation as a target.

const updateCamera = (values: VMCameraUpdate) => {
    if (ref.current) {
      ref.current.updateCamera(values);
    }
  };

const heading : VMCameraHeading = {
          current: true,
        }
        const pitch : VMCameraPitch = {
          pitch: -90,
        }
        const position : VMPosition = {
          altitude: 0.0,
          latitude: 45.74200,
          longitude: 4.88400
        }
        const values : VMCameraUpdate = {
          heading : heading,
          paddingBottom: 0,
          paddingLeft: 0,
          paddingRight : 0,
          paddingTop : 0,
          pitch : pitch,
          targets : [position],
          viewMode : VMViewModeType.floor,
        }
        updateCamera(values)

Simple Route

You have to use a VMRouteRequest and pass it to the computeRoute function. Only one route can be shown at a time. Here is the structure of this object:

type VMRouteRequest = {

• animateAllRoute: boolean if you want to animate the routing trace on the map.
• destinationsOrder: VMRouteDestinationsOrder enum used to define the order of reaching destinations if several are provided:
  • closest
  • inOrder,
  • optimal,
  • optimalFinishOnLast
• isAccessible: boolean to define if accessibility criteria must be matched (PMR user...)
• origin: VMPosition|String , can be a PoiID as a string or a VMPosition which define the beginning of the route.
• destinations : (VMPosition|String)[], can be a list of both PoiID as a string and VMPosition which define the destinations of the route.
• requestType: VMERouteRequestType :
  • fastest
  • shortest
    }

You can use it like this :

const computeRoute = (value : VMRouteRequest) => {
    if (ref.current) {
      ref.current.computeRoute(value);
    }
  }

A simple way to create a routing is to call our computeRoute() with simply defined object's VMRouteRequest like so :

const position: VMPosition = {
          altitude: 0.0,
          latitude: 45.7413,
          longitude: 4.88216
        }
        const value : VMRouteRequest = {
          animateAllRoute: false,
          destinationsOrder: VMRouteDestinationsOrder.closest,
          isAccessible: false,
          origin: position,
          destinations: ["B1-UL00-ID0034"],
          requestType: VMERouteRequestType.fatest
        }
        computeRoute(value);

You can find an implementation of it here

Accessible Route

To build an accessible route you will have to put accessible boolean to true in your VMRouteRequest like:

const value : VMRouteRequest = {
          animateAllRoute: false,
          destinationsOrder: VMRouteDestinationsOrder.closest,
          isAccessible: true,
          origin: "B3-UL01-ID-0013",
          destinations: ["B3-UL00-ID0073"],
          requestType: VMERouteRequestType.fatest
        }
        computeRoute(value);

The route will go from B3-UL01-ID-0013 to B3-UL00-ID0073 with only accessible section (no stairs,etc..).

It is implemented in the example.

Optimal and multi-destinations route