@mappedin/react-native-sdk 5.0.0-beta.8 → 5.0.0

package/README.md

@@ -2,10 +2,10 @@
 
 ## Resources
 - [Mappedin Developer Portal](https://developer.mappedin.com)
-- [React Native SDK V4 guides](https://developer.mappedin.com/guides/react-native/)
-- [Release notes](https://developer.mappedin.com/blog/2021-11-26-react-native-sdk-v4-release-notes/)
-- [Migration guide to V4](https://developer.mappedin.com/blog/2021-11-04-react-native-sdk-v4-migration-guide/)
-- [API Reference](https://developer.mappedin.com/docs/react-native/latest)
+- [React Native SDK V5 guides](https://developer.mappedin.com/react-native-sdk/v5/)
+- [Release notes](https://developer.mappedin.com/react-native-sdk/v5/release-notes)
+- [Migration guide to V5](https://developer.mappedin.com/react-native-sdk/v5/migration-guide)
+- [API Reference](https://developer.mappedin.com/react-native-sdk-api/v5/latest)
 - [Trial Keys](https://developer.mappedin.com/guides/api-keys)
 
 ## Installation
@@ -90,314 +90,7 @@ const App = () => {
 };
 ```
 
-### Fetching venue data outside of the MiMapView component
-
-It is possible to fetch venue data (locations, maps, etc), outside of the MiMapView component. This can be helpful for cases where a map isn't always needed or there is a need to fetch the data first, and render the map later.
-
-```tsx
-
-import { getVenue, MiMapView } from '@mappedin/react-native-sdk';
-
-const options = {
-  clientId: '****',
-  clientSecret: '***',
-  venue: 'venue-slug',
-  perspective: 'Website',
-};
-
-const App = () => {
-  const [venueData, setVenueData] = React.useState<Mappedin>({});
-
-  useEffect(() => {
-    async function init() {
-      const venueData = await getVenue(options);
-      console.log(venueData.locations);
-      setVenueData(venueData);
-    }
-  }, []);
-
-  return (
-    {venueData != null &&
-      <MiMapView
-        style={{ flex: 1 }}
-        options={options}
-        // pass venueData in
-        venueData={venueData}
-      />
-    }
-  );
-};
-```
-
-### Listen to polygon clicks
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type { MappedinLocation, Mappedin } from '@mappedin/react-native-sdk';
-
-const App = () => {
-  const [venueData, setVenueData] = React.useState<Mappedin>({});
-  const [
-    selectedLocation,
-    setSelectedLocation,
-  ] = React.useState<MappedinLocation>({});
-
-  return (
-    <MiMapView
-      style={{ flex: 1 }}
-      options={options}
-      onDataLoaded={({ venueData: Mappedin }) => {
-        setVenueData(venueData);
-      }}
-      onPolygonClicked={({ polygon }) => {
-        setSelectedLocation(polygon.locations[0]);
-      }}
-    />
-  );
-};
-```
-
-### Rotate the map
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type { MapViewStore } from '@mappedin/react-native-sdk';
-
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-
-const App = () => {
-  return (
-    <MiMapView
-      style={{ flex: 1 }}
-      ref={mapView}
-      options={options}
-      onFirstMapLoaded={() => {
-        mapView.current!.Camera.set({ positionOptions: { rotation: 90 });
-      }}
-    />
-  );
-};
-```
-
-### Focus on the polygon and highlight it
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type {
-  MappedinPolygon,
-  MapViewStore,
-  Mappedin,
-} from '@mappedin/react-native-sdk';
-
-const App = () => {
-  const [venueData, setVenueData] = React.useState<Mappedin>({});
-  const [
-    selectedLocation,
-    setSelectedLocation,
-  ] = React.useState<MappedinLocation>({});
-
-  // Imperative API
-  const mapView = React.useRef<MapViewStore>();
-
-  return (
-    <MiMapView
-      style={{ flex: 1 }}
-      ref={mapView}
-      options={options}
-      onDataLoaded={({ venueData: Mappedin }) => {
-        setVenueData(venueData);
-      }}
-      onPolygonClicked={async ({ polygon: MappedinPolygon }) => {
-        setSelectedLocation(polygon.locations[0]);
-        mapView.current.clearAllPolygonColors();
-        mapView.current.setPolygonColor(polygon, 'red');
-        // lets wait for the focusOn to complete
-        await mapView.current.Camera.focusOn({ targets: {
-            polygons: [polygon],
-          }
-        });
-        console.log('success!');
-      }}
-    />
-  );
-};
-```
-
-### Enable Blue Dot and listen to update events
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type {
-  TBlueDotUpdate,
-  MapViewStore,
-  MappedinMap,
-  MappedinNode,
-} from '@mappedin/react-native-sdk';
-
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-
-const App = () => {
-  return (
-    <MiMapView
-      style={{ flex: 1 }}
-      ref={mapView}
-      options={options}
-      onFirstMapLoaded={() => {
-        mapView.current.BlueDot.enable();
-      }}
-      onBlueDotStateChanged={({
-        stateChange,
-      }: {
-        stateChange: TBlueDotStateChange;
-      }) => {
-        // This event can be used to get real time updates as to what the nearest node is
-        const {
-          map,
-          nearestNode,
-        }: {
-          map: MappedinMap;
-          nearestNode: MappedinNode;
-        } = stateChange;
-      }}
-    />
-  );
-};
-```
-
-### Set SDK into "FOLLOW" mode
-
-Setting the SDK into follow mode will lock the camera to follow the BlueDot at the center of the screen. Interacting with the map will put the SDK back into EXPLORE mode and emit onStateChanged event.
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type {
-  TBlueDotUpdate,
-  MapViewStore,
-  MappedinLocation,
-  MappedinNode,
-} from '@mappedin/react-native-sdk';
-import { STATE } from '@mappedin/react-native-sdk';
-
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-const nearestNode = React.useRef<MappedinNode>();
-const [
-  selectedLocation,
-  setSelectedLocation,
-] = React.useState<MappedinLocation>({});
-
-const App = () => {
-  return (
-    <>
-      <MiMapView
-        style={{ flex: 1 }}
-        ref={mapView}
-        options={options}
-        onStateChanged={({ state }) => {
-          console.log('Current State is', state);
-        }}
-        onDataLoaded={() => {
-          mapView.current.setState(STATE.FOLLOW);
-          mapView.current.BlueDot.enable();
-        }}
-        onBlueStateChanged={({ stateChange }) => {
-          nearestNode.current = stateChange.nearestNode;
-        }}
-        onPolygonClicked={({ polygon: MappedinPolygon }) => {
-          setSelectedLocation(polygon.locations[0]);
-        }}
-      />
-    </>
-  );
-};
-```
-
-### Get Directions
-
-This API can be used to get a directions object from any MappedinLocation | MappedinNode | MappedinPolygon to any MappedinLocation | MappedinNode | MappedinPolygon. This can be used to show Text directions, as well as draw paths.
-
-Example:
-
-```tsx
-...
-<Button
-  title="Get Directions"
-  onPress={async () => {
-    try {
-      const directions = selectedLocation.directionsTo(destinationLocation);
-      console.log(directions);
-    } catch (e) {
-      console.error(e);
-    }
-  }}
-></Button>
-...
-
-```
-
-## Get directions from one location to another and show path and connections on map
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type {
-  MappedinLocation,
-  MapViewStore,
-  MappedinPolygon,
-} from '@mappedin/react-native-sdk';
-
-const App = () => {
-  const mapView = React.useRef<MapViewStore>(null);
-  const [destination, setDestination] = React.useState<MappedinLocation>(null);
-  const [departure, setDeparture] = React.useState<MappedinLocation>(null);
-
-  return (
-    <>
-      <MiMapView
-        style={{flex: 1}}
-        ref={mapView}
-        options={options}
-        onPolygonClicked={({polygon: MappedinPolygon}) => {
-          // first, let's set departure
-          if (departure == null) {
-            setDeparture(polygon.locations[0]);
-          } else {
-            // then, destination
-            setDestination(polygon.locations[0]);
-          }
-        }}
-      />
-      <Button
-        title="Get Directions"
-        onPress={async () => {
-          try {
-            // get Directions
-            const directions = departure.directionsTo(destination);
-            // draw path on map
-            await mapView.current?.Journey.draw(directions);
-            // focus on the path
-            mapView.current?.Camera.focusOn({
-              targets: {
-                nodes: directions.path,
-              },
-            });
-          } catch (e) {
-            console.error(e);
-          }
-        }}></Button>
-      <Button
-        title="Reset"
-        onPress={() => {
-          mapView.current?.removeAllPaths();
-          setDeparture(undefined);
-          setDestination(undefined);
-        }}></Button>
-    </>
-  );
-};
-```
-
+> See more detailed samples and guides on the [Mappedin Developer Portal](https://developer.mappedin.com)
 ## Preparing SVGs for use as assets in markers/tooltips/etc
 
 SVG is a popular format for image assets, which means there are a lot of proprietary, broken, or unnecessary tags when getting SVGs online.
@@ -421,122 +114,6 @@ Once the SVGs are prepared, they need to be wrapped in a `div` element which wil
 `
 ```
 
-## Adding a Coordinate by lat/lon
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type {
-  MapViewStore,
-} from '@mappedin/react-native-sdk';
-
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-
-const App = () => {
-  return (
-    <>
-      <MiMapView
-        style={{ flex: 1 }}
-        ref={mapView}
-        options={options}
-        onFirstMapLoaded={() => {
-          // create a coordinate
-          const coordinate = mapView.current.venueData.maps[1].createCoordinate(43.52117572969203, -80.53869317220372);
-
-          const coordinate2 = mapView.current.venueData.maps[1].createCoordinate(44.52117572969203, -79.53869317220372);
-          // find distance between coordinates:
-          console.log(coordinate.absoluteDistanceTo(coordinate2));
-
-          // coordinates can also be used to place markers:
-          mapView.current.createMarker(coordinate, ...)
-        }}
-      />
-  )
-}
-```
-
-## Customizing appearance of labels
-
-Labels are added on map load by default, but this can be overriden by setting <a href="modules.html#tshowvenueoptions">labelAllLocationsOnInit</a> to false and taking control of labeling. We provide <a href="modules.html#labelthemes">2 themes</a>, and <a href="modules.html#tlabelappearance">full control</a> over further customization.
-
-```tsx
-import { MiMapView, labelThemes } from '@mappedin/react-native-sdk';
-import type {
-  MapViewStore,
-} from '@mappedin/react-native-sdk';
-
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-
-const App = () => {
-  return (
-    <>
-      <MiMapView
-        style={{ flex: 1 }}
-        ref={mapView}
-        options={{ ...options, labelAllLocationsOnInit: false }}
-        onFirstMapLoaded={() => {
-          // use one of the themes
-          mapView.current.labelAllLocations({ appearance: labelThemes.lightOnDark })
-          // OR, customize a set of properties
-          mapView.current.labelAllLocations({ appearance: { text: { size: 12 }} })
-          // OR, do both
-          mapView.current.labelAllLocations({ appearance:
-          {
-            ...labelThemes.lightOnDark,
-            margin: 20,
-            text: {
-              ...labelThemes.lightOnDark.text,
-              size: 20
-            }
-            }
-          })
-        }}
-      />
-  )
-}
-```
-
-## Adding/Removing markers
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type {
-  MapViewStore,
-} from '@mappedin/react-native-sdk';
-
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-const markerId = React.useRef(null);
-
-const App = () => {
-  return (
-    <>
-      <MiMapView
-        style={{ flex: 1 }}
-        ref={mapView}
-        options={options}
-        onDataLoaded={() => {
-          mapView.current.BlueDot.enable();
-        }}
-        onPolygonClicked={({ polygon }) => {
-          if (markerId != null) {
-            mapView.current.removeMarker(markerId);
-          }
-          // Let's add a marker anchored to the top of the first entrance to polygon
-          markerId.current = mapView.current.createMarker(polygon.entrances[0], `
-            <div style="width: 32px; height: 32px;">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293.334 293.334"><g fill="#010002"><path d="M146.667 0C94.903 0 52.946 41.957 52.946 93.721c0 22.322 7.849 42.789 20.891 58.878 4.204 5.178 11.237 13.331 14.903 18.906 21.109 32.069 48.19 78.643 56.082 116.864 1.354 6.527 2.986 6.641 4.743.212 5.629-20.609 20.228-65.639 50.377-112.757 3.595-5.619 10.884-13.483 15.409-18.379a94.561 94.561 0 0016.154-24.084c5.651-12.086 8.882-25.466 8.882-39.629C240.387 41.962 198.43 0 146.667 0zm0 144.358c-28.892 0-52.313-23.421-52.313-52.313 0-28.887 23.421-52.307 52.313-52.307s52.313 23.421 52.313 52.307c0 28.893-23.421 52.313-52.313 52.313z"/><circle cx="146.667" cy="90.196" r="21.756"/></g></svg>
-            </div>
-            `,
-          {
-            anchor: MARKER_ANCHOR.TOP,
-          })
-        }}
-      />
-  )
-}
-```
 
 ## Get nearest node to point on screen
 
@@ -565,64 +142,6 @@ const App = () => {
 };
 ```
 
-## Get Directions from BlueDot and show path and connections on map
-
-```tsx
-import { MiMapView } from '@mappedin/react-native-sdk';
-import type {
-  TBlueDotUpdate,
-  MapViewStore,
-  MappedinLocation,
-  MappedinNode,
-} from '@mappedin/react-native-sdk';
-
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-const nearestNode = React.useRef<MappedinNode>();
-const [
-  selectedLocation,
-  setSelectedLocation,
-] = React.useState<MappedinLocation>({});
-
-const App = () => {
-  return (
-    <>
-      <MiMapView
-        style={{ flex: 1 }}
-        ref={mapView}
-        options={options}
-        onDataLoaded={() => {
-          mapView.current.BlueDot.enable();
-        }}
-        onBlueDotStateChanged={({ stateChange }) => {
-          nearestNode.current = stateChange.nearestNode;
-        }}
-        onPolygonClicked={({ polygon: MappedinPolygon }) => {
-          setSelectedLocation(polygon.locations[0]);
-        }}
-      />
-      <Button
-        title="Get Directions"
-        onPress={async () => {
-          try {
-            // get Directions
-            const directions = nearestNode.current.directionsTo(selectedLocation);
-            // draw path and connections on map
-            await controller.current?.Journey.draw(directions);
-            // focus on the path
-            controller.current?.Camera.focusOn({ targets: {
-                nodes: directions.path,
-              }
-            });
-          } catch (e) {
-            console.error(e);
-          }
-        }}
-      ></Button>
-    </>
-  );
-};
-```
 
 ## Search and Suggestions
 
@@ -677,96 +196,6 @@ const App = () => {
 };
 ```
 
-## Use `react-native-location` to power BlueDot
-
-```tsx
-import RNLocation from 'react-native-location';
-
-const App = () => {
-  ...
-
-  RNLocation.requestPermission({
-    ios: 'whenInUse',
-    android: {
-      detail: 'coarse',
-    },
-  }).then((granted) => {
-    if (granted) {
-      // Enable blue dot
-      mapView.current.BlueDot.enable();
-      RNLocation.subscribeToLocationUpdates((locations) => {
-        const {
-          accuracy,
-          floor,
-          latitude,
-          longitude,
-          timestamp,
-        } = locations[0];
-
-        const location = {
-          timestamp,
-          coords: {
-            latitude,
-            longitude,
-            accuracy,
-            floorLevel: floor,
-          },
-        };
-        // pass locations in
-        mapView.current.overrideLocation(location);
-      });
-    }
-  });
-
-  ...
-};
-```
-
-## MiniMap
-
-Component Signature:
-
-```typescript
-const MiMiniMap = (props: TMiniMapProps) => React.ReactElement;
-```
-
-### Props:
-
-<a href="modules.html#tmiminimapprops">Documented in Detail here</a>
-
-| Prop                  | Description                                    | Signature                                                                | Required |
-| --------------------- | ---------------------------------------------- | ------------------------------------------------------------------------ | -------- |
-| options               | Options to initialize MapView with             | <a href="modules.html#tmimapviewoptions">`TMiMapViewOptions`<a>          | Yes      |
-| location              | Options to initialize MapView with             | <a href="mclasses/mappedinlocation.html">`MappedinLocation \| string`<a> | Yes      |
-| onLoad                | Gets called when minimap is rendered           | () => void                                                               | No       |
-| polygonHighlightColor | Color to use when highlighting polygon         | `string`                                                                 | No       |
-| focusOptions          | Override focus Options when generating minimap | <a href="modules.html#tfocusoptions">`TFocusOptions`</a>                 | No       |
-
-Example:
-
-```tsx
-const App = () => {
-  return (
-    <MiMiniMap
-      style={{ width: 500, height: 200 }}
-      options={options: TGetVenueOptions}
-      /**
-       * Called when miniMap is rendered
-       */
-      onLoad={() => {}}
-      /**
-       * What color to use when highlighting polygon
-       */
-      polygonHighlightColor={string}
-      /**
-       * Finer control over focus
-       */
-      focusOptions={options: TFocusOptions}
-      location={selectedLocation: MappedinLocation | MappedinLocation["id"]}
-    />
-  );
-};
-```
 
 ### [experimental] Fetching an offline Venue bundle