Source: https://developers.woosmap.com/products/mobile/react-native/store-overlay/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Woosmap for React Native - Displaying your stores



The Woosmap Map provides an overlay layer dedicated to display your assets over the Map.

To ensure maximum readability and navigation, your data are displayed combining tiled images and markers. Tiled images are useful to render large amount of assets or high store density. This view makes the map displayed faster and provide a clean view. Markers are relevant to render branded pictogram after a specified level of zoom (breakpoint).

Assets are retrieved based on the Public API Key attached to your Woosmap Project and set when loading the Map.

1. Instantiating a WoosmapView with StoreOverlay.

``` typescript
const add = function () {
    if (storesOverlay === undefined) {
      if (mapRef.current) {
        storesOverlay = new StoreOverlay(
          {
            breakPoint: 14,
            rules: [
              {
                color: '#1D1D1D',
                type: 'takeaway',
                icon: {
                  url: 'https://images.woosmap.com/starbucks-marker-black.svg',
                  scaledSize: { height: 40, width: 34 },
                },
                selectedIcon: {
                  url: 'https://images.woosmap.com/starbucks-marker-selected.svg',
                  scaledSize: { height: 50, width: 43 },
                },
              },
            ],
            default: {
              color: '#008a2f',
              size: 8,
              minSize: 1,
              icon: {
                url: 'https://images.woosmap.com/starbucks-marker.svg',
                scaledSize: { height: 40, width: 34 },
              },
              selectedIcon: {
                url: 'https://images.woosmap.com/starbucks-marker-selected.svg',
                scaledSize: { height: 50, width: 43 },
              },
            },
          },
          mapRef.current
        );
        storesOverlay.add();
      }
    }
  };
<WoosmapView
        ref={mapRef}
        mapOptions={storeOverlayOptions}
        wooskey={'Your Woosmap key'}
        loaded={() => {
          add();
        }}
        store_unselected={() => {
          console.log('store_unselected');
        }}
        store_selected={() => {
          console.log('store_selected');
        }}
      />
```

To utilize local images for the store icon, in place of the web Image, simply load a local image via `StoreOverlay.image` and configure it accordingly.

``` typescript
Promise.all([
    StoreOverlay.image(require('../starbucks-marker-black.svg')), 
    StoreOverlay.image(require('../starbucks-marker-selected.svg')),
    StoreOverlay.image(require('../starbucks-marker.svg')),
          ),
        ]).then((images) => {
          if (mapRef.current) {
        storesOverlay = new StoreOverlay(
          {
            breakPoint: 14,
            rules: [
              {
                color: '#1D1D1D',
                type: 'takeaway',
                icon: {
                  url: images[0],
                  scaledSize: { height: 40, width: 34 },
                },
                selectedIcon: {
                  url: images[1],
                  scaledSize: { height: 50, width: 43 },
                },
              },
            ],
            default: {
              color: '#008a2f',
              size: 8,
              minSize: 1,
              icon: {
                url: images[2],
                scaledSize: { height: 40, width: 34 },
              },
              selectedIcon: {
                url: images[1],
                scaledSize: { height: 50, width: 43 },
              },
            },
          },
          mapRef.current
        );
        storesOverlay.add();
      }
         });                   

```

Please check the javascript guide for more implementation. [javascript guide](/products/map-api/guides/display-stores-overlay/#add-a-storesoverlay)