Woosmap for React Native - Displaying your stores
The Woosmap Map provides an overlay layer dedicated to display your assets over the Map.
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.
- Instantiating a WoosmapView with StoreOverlay.
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.
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
