react-native-mappedin-sdk v1.0.0-beta.7

react-native-sdk

This is the repo for Mappedin's react native sdk, using the web sdk.

Creating a Map View

1. In order to create a Map View, you must first import the MPIMapView component from 'react-native-mappedin-sdk'

2. Create a React referenced which will be used as the "ref" value for the MPIMapView component

const mapView = React.useRef();

3. Create an instance of the MPIMapView component as return value of the App() function. Set the React reference you created above, as the "ref" of this component. Other properties such as style, zoom, backgroundColor, locationLabels, credentials and venue can also be set in this instance.

    <MPIMapView 
        ref={mapView}  
        style={{width: "100%",
                height: "100%",
                elevation: 0,
                top: 0,
                left: 0}} 
        zoom={8000}
        backgroundColor="black"
        locationLabels={{legacyLabel: true, color: "white"}}
        credentials={{key: "<YOUR KEY>", secret: "<YOUR SECRET>" }}
        venue="<YOUR VENUE SLUG>"
    />

4. The newly created Map View component should now appear in your application

Using Map View Property Callbacks

There currently exist 4 callback property methods in which you may utilize data that is sent from the web sdk: 1. onDataLoaded 2. onFirstMapLoaded 3. onMapChanged 4. onPolygonClicked

You have the freedom to create these methods. They are only called once the given event occurs:

• onDataLoaded is called when the map data has finished loading
• onFirstMapLoaded is called when the map has finished loading
• onPolygonClicked is called when a polygon is selected on the map

Example Usage

const onPolygonClicked = (polygon) => {
    console.log("Polygon selected: ", polygon);
}

<MPIMapView  
    // other properties defined as above
    onPolygonClicked={onPolygonClicked}
/>

Using Map View Methods

Avaiable methods to be used to manipulate the Map View Component:

• getDirections = (fromLocationId, toLocationId, isAccessible, cb)

  • fromLocationId: starting location id String
  • toLocationId: destination lcoation id String
  • isAccessible: whether or not the directions should be accessible Boolean
  • cb: Callback function

• drawPath(path, pathStyle = {})

  • path: path to destination from starting lcoation: MPIDirections.Path
  • pathStyle: object including style of path

• resetDirections()

• setMap(id)

  • id: Map id String

• incrementLevel()

• decrementLevel()

• getCurrentVenue(cb)

  • cb: Callback function

• getCurrentMap(cb)

  • cb: Callback function

• getLocationsForPolygonId(polygonId, cb)

  • polygonId: polygonId for which you want the locationString
  • cb: Callback function

• setPolygonColor(id, color, textColor)

  • id: Polygon id String
  • color: Color of polygon Integer
  • textColor: textColor of polygon Integer

• clearPolygonColor(id)

  • id: Polygon id String

• clearAllPolygonColors()

In order to access any of these methods, you must use the "current" attribute of the "mapView" reference that you created earlier.

Example Usage

mapView.current.getCurrentVenue((venue) => {
      console.log(venue)
});

or simply:

mapView.current.clearAllPolygonColors()

if the method does not require a callback.

Enabling Locations (Blue Dot)

Available Blue Dot Methods

• enableBlueDot(options)

  mapView.current.enableBlueDot({allowImplicitFloorLevel: true})

• disableBlueDot ()

  mapView.current.disableBlueDot()

For Android Devices Only

For Android devices, you will need to request access to utilize the location of a user. This may be done in the following way:

    const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: "React Native Location Permissions",
            message:
              "React Native app needs location permissions to display blue dot",
            buttonNeutral: "Ask Me Later",
            buttonNegative: "Cancel",
            buttonPositive: "OK"
          }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          mapView.current.enableBlueDot({allowImplicitFloorLevel: true})
        }
      } catch (err) {
        console.warn(err);
      }

Displaying the Mini Map

1. In order to create a Mini Map, you must first import the MPIMiniMap component from 'react-native-mappedin-sdk'

2. Create a React referenced which will be used as the "ref" value for the MPIMiniMap component

const miniMap = React.useRef();

3. Create an instance of the MPIMiniMap component as return value of the App() function. Set the React reference you created above, as the "ref" of this component. Other properties such as style, zoom, backgroundColor, locationLabels, credentials and venue can also be set in this instance.

    <MPIMiniMap 
        ref={miniMap}  
        style={{width: "100%",
                height: "100%",
                elevation: 0,
                top: 0,
                left: 0}} 
        credentials={{key: "<YOUR KEY>", secret: "<YOUR SECRET>" }}
        venue="<YOUR VENUE SLUG>"
        locationId="<YOUR LOCATION ID>"
    />

4. The newly created Mini Map component should now appear in your application

Handling User Tapping

There exists a method property on the MPIMiniMap component called "onTapped". This method is called once a user taps the mini map.

It can be used as shown below:

const onTapped = () => {
    console.log("User tapped screen!");
}

<MPIMiniMap  
    // other properties defined as above
    onTapped={onTapped}
/>