Get started with Woosmap for React Native

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

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
• 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,
  type MapTypeId,
} 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,
  type MapTypeId,
} 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);

    

• getMapTypeId: Returns the current map type identifier ('roadmap' or 'hybrid').

src/plugin_snippet.tsx

snippet

        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.

src/plugin_snippet.tsx

snippet

        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

src/plugin_snippet.tsx

snippet

        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.

src/plugin_snippet.tsx

snippet

        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.

src/plugin_snippet.tsx

snippet

        <WoosmapView
        ref={mapRef}
        mapOptions={mapOptions}
        wooskey={'Your Woosmap public key'}
        mapTypeId_changed={(mapTypeId) => {
          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.

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 helpful?

Failed to send feedback. Please try again.

Thanks for your feedback!