December 17, 2024

Get started with Woosmap for React Native

Get access to Woosmap services for your native mobile developments on hybrid React Native development.

1. Installation
2. Dependency
3. How to display Map
4. Accessing various map functions
5. Customize loader

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	33+	13.0+

Installation

sh

        npm install @woosmap/react-native-woosmap

    

Dependency

• react-native-webview
• react-native-uuid

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.)

src/plugin_snippet.tsx

snippet-publickey

snippet-privatekey

        import {
  WoosmapView,
  MapController,
  LatLngBounds,
  WoosPadding,
  LatLng,
} from '@woosmap/react-native-woosmap';
// ...
<WoosmapView
        ref={mapRef}
        mapOptions={mapOptions}
        wooskey={'Your Woosmap public key'}
        click={() => {
          console.log('click');
        }}
      />


    

        import {
  WoosmapView,
  MapController,
  LatLngBounds,
  WoosPadding,
  LatLng,
} from '@woosmap/react-native-woosmap';
// ...
<WoosmapView
        ref={mapRef}
        mapOptions={mapOptions}
        wooskey={Platform.OS === 'android'
            ? 'Woosmap android private key'
            : 'Woosmap iOS private key'}
        click={() => {
          console.log('click');
        }}
      />


    

Accessing various map functions

• fitBounds: Sets the viewport to contain the given bounds.

src/plugin_snippet.tsx

snippet

        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.

src/plugin_snippet.tsx

snippet

        const result:LatLng = await mapRef.current?.getCenter();

    

• getBounds: Returns the lat/lng bounds of the current viewport. Optionally takes a padding parameter.

src/plugin_snippet.tsx

snippet

         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.

src/plugin_snippet.tsx

snippet

        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

src/plugin_snippet.tsx

snippet

        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.

src/plugin_snippet.tsx

snippet

        const result: numeric = (await mapRef.current?.getZoom()) as numeric;

    

• panBy: Changes the center of the map by the given distance in pixels

src/plugin_snippet.tsx

snippet

        await mapRef.current?.panBy(20, 10);

    

• panTo: Changes the center of the map to the given LatLng.

src/plugin_snippet.tsx

snippet

        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}.

src/plugin_snippet.tsx

snippet

        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

src/plugin_snippet.tsx

snippet

        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.

src/plugin_snippet.tsx

snippet

        await mapRef.current?.setHeading(20);

    

• setTilt: Sets tilt of map

src/plugin_snippet.tsx

snippet

        await mapRef.current?.setTilt(5);

    

• setZoom: Set zoom level of map

src/plugin_snippet.tsx

snippet

        await mapRef.current?.setZoom(20);

    

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.

src/plugin_snippet.tsx

snippet

            <WoosmapView
        ref={mapRef}
        mapOptions={mapOptions}
        wooskey={Platform.OS === 'android'
            ? 'Woosmap android private key'
            : 'Woosmap iOS private key'}
        loader={require('../../asset/loader/spinner.gif')}
        ...
        ...
        />

    

‹ API Services Drawing Markers ›

Was this article helpful?

Have more questions? Submit a request