Source: https://developers.woosmap.com/products/mobile/react-native/get-started/ > For clean Markdown of any page, append `.md` to the page URL. > For a complete documentation index, see https://developers.woosmap.com/llms.txt # Get started with Woosmap for React Native The Woosmap React Native plugin is a library that embeds interactive maps directly into your application. You can also add stores overlay to the map to call out points of interest and get relative information. The SDK offers an interface to manage the Indoor Mapview and subscribe to events on the map. Please get your email and token from your pro account. You may ask for one if necessary, or you can test with our developers' credentials if you lack time. | | Android | iOS | | ----------- | :-----: | :---: | | Support SDK | 29+ | 13.4+ | ## Installation ```sh npm install @woosmap/react-native-woosmap ``` ## Dependency - [react-native-webview](https://www.npmjs.com/package/react-native-webview?activeTab=readme) - [react-native-uuid](https://www.npmjs.com/package/react-native-uuid?activeTab=readme) The SDK automatically sends the required authentication headers (`X-Api-Key` and platform identifiers) with every API request. If you're calling Woosmap REST APIs directly without the SDK, you'll need to set these headers yourself. See [Authenticating from Mobile Apps](/api-reference/authentication/#authenticating-from-mobile-apps-or-server-side-via-headers) for details. ## How to display Map 1. Instantiating a WoosmapView: WoosmapView can be initialize with either public key or private key (_**Note**: An unrestricted private key is not supported._) ```typescript import { WoosmapView, MapController, LatLngBounds, WoosPadding, LatLng, type MapTypeId, } from '@woosmap/react-native-woosmap'; // ... { console.log('click'); }} /> ``` ```typescript import { WoosmapView, MapController, LatLngBounds, WoosPadding, LatLng, type MapTypeId, } from '@woosmap/react-native-woosmap'; // ... { console.log('click'); }} /> ``` ## Accessing various map functions - fitBounds: Sets the viewport to contain the given bounds. ```typescript await mapRef.current?.fitBounds( LatLngBounds.jsonToObj({ ne: { lat: 48.844437932920535, lng: 2.3743880269761393 }, sw: { lat: 48.854437932920535, lng: 2.3843880269761393 }, }), WoosPadding.jsonToObj({ top: 2, left: 2, right: 3, bottom: 3 }) ); ``` - getCenter: Returns the position displayed at the center of the map. ```typescript const result: LatLng = await mapRef.current?.getCenter(); ``` - getBounds: Returns the lat/lng bounds of the current viewport. Optionally takes a padding parameter. ```typescript const result: LatLngBounds = await mapRef.current?.getBounds( WoosPadding.jsonToObj({ top: 2, left: 2, right: 3, bottom: 3 }) ); ``` - getHeading: Returns the compass heading. The heading value is measured in degrees (clockwise) from cardinal direction North. ```typescript const result: numeric = (await mapRef.current?.getHeading()) as numeric; ``` - getTilt: Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane ```typescript const result: numeric = (await mapRef.current?.getTilt()) as numeric; ``` - getZoom: Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane. ```typescript const result: numeric = (await mapRef.current?.getZoom()) as numeric; ``` - panBy: Changes the center of the map by the given distance in pixels ```typescript await mapRef.current?.panBy(20, 10); ``` - panTo: Changes the center of the map to the given LatLng. ```typescript await mapRef.current?.panTo( LatLng.jsonToObj({ lat: 48.844437932920535, lng: 2.3743880269761393 }), WoosPadding.jsonToObj({ top: 2, left: 2, right: 3, bottom: 3 }) ); ``` - panToBounds: Pans the map by the minimum amount necessary to contain the given LatLngBounds. It makes no guarantee where on the map the bounds will be, except that the map will be panned to show as much of the bounds as possible inside `{currentMapSizeInPx} - {padding}`. ```typescript await mapRef.current?.panToBounds( LatLngBounds.jsonToObj({ ne: { lat: 48.844437932920535, lng: 2.3743880269761393 }, sw: { lat: 48.854437932920535, lng: 2.3843880269761393 }, }), WoosPadding.jsonToObj({ top: 2, left: 2, right: 3, bottom: 3 }) ); ``` - setCenter: Sets the map center ```typescript await mapRef.current?.setCenter( LatLng.jsonToObj({ lat: 48.844437932920535, lng: 2.3743880269761393 }), WoosPadding.jsonToObj({ top: 2, left: 2, right: 3, bottom: 3 }) ); ``` - setHeading: Sets the compass heading for map measured in degrees from cardinal direction North. ```typescript await mapRef.current?.setHeading(20); ``` - setTilt: Sets tilt of map ```typescript await mapRef.current?.setTilt(5); ``` - setZoom: Set zoom level of map ```typescript await mapRef.current?.setZoom(20); ``` - getMapTypeId: Returns the current map type identifier (`'roadmap'` or `'hybrid'`). ```typescript const result: MapTypeId = await mapRef.current?.getMapTypeId(); ``` - setMapTypeId: Sets the map type. Accepts `'roadmap'` for the default road map view or `'hybrid'` for satellite imagery with road labels. ```typescript await mapRef.current?.setMapTypeId("hybrid"); ``` - flyTo: Changes any combination of center, zoom, bearing, and pitch, animating the transition along a curve that evokes flight. Possible predefine animation with this method are - linear: No easing, no acceleration - easeInSine: Slight acceleration from zero to full speed - easeOutSine: Slight deceleration at the end - easeInOutSine: Slight acceleration at beginning and slight deceleration at end - easeInQuad: Accelerating from zero velocity - easeOutQuad: Decelerating to zero velocity - easeInOutQuad: Acceleration until halfway, then deceleration - easeInCubic: Accelerating from zero velocity - easeOutCubic: Decelerating to zero velocity - easeInOutCubic: Acceleration until halfway, then deceleration - easeInQuart: Accelerating from zero velocity - easeOutQuart: Decelerating to zero velocity - easeInOutQuart: Acceleration until halfway, then deceleration - easeInQuint: Accelerating from zero velocity - easeOutQuint: Decelerating to zero velocity - easeInOutQuint: Acceleration until halfway, then deceleration - easeInExpo: Accelerate exponentially until finish - easeOutExpo: Initial exponential acceleration slowing to stop - easeInOutExpo: Exponential acceleration and deceleration - easeInCirc: Increasing velocity until stop - easeOutCirc: Start fast, decreasing velocity until stop - easeInBack: Slow movement backwards then fast snap to finish - easeOutBack: Fast snap to backwards point then slow resolve to finish - easeInOutBack: Slow movement backwards, fast snap to past finish, slow resolve to finish - easeInElastic: Bounces slowly then quickly to finish - easeOutElastic: Fast acceleration, bounces to zero - easeInOutElastic: Slow start and end, two bounces sandwich a fast motion - easeOutBounce: Bounce to completion ```typescript mapRef.current?.flyTo({ around: new LatLng(48.864020288423674, 2.294504159020258), center: new LatLng(48.864020288423674, 2.294504159020258), animate: true, offset: { x: 0, y: 30 }, essential: false, duration: 4000, padding: new WoosPadding(20, 20, 20, 20), pitch: 10, zoom: 15, easing: "linear", }); ``` ## Map Options The `MapOptions` object supports the following properties for map type configuration: - `mapTypeId`: Sets the initial map type. Accepts `'roadmap'` (default) or `'hybrid'` for satellite imagery with road labels. - `mapTypeControl`: Enables or disables the Map/Satellite toggle control on the map. Defaults to `false`. ```typescript const mapOptions: MapOptions = { center: { lat: 51.515, lng: -0.12 }, zoom: 14, mapTypeId: "roadmap", mapTypeControl: true, }; ``` ## Events - mapTypeId_changed: Fires when the map type changes. The callback receives the new `MapTypeId` value. ```typescript { console.log(`map type id changed ${mapTypeId}`); }} /> ``` ## Customize loader Plugin allows customization of the loader on the map. To change the loader, you need to add a gif image to the assets folder and update the loader setting in the widget as shown below. ```typescript ```