September 19, 2023

Display your Stores

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

1. Overview
2. Add a StoresOverlay
3. Style your StoresOverlay
4. Store Click Event
5. Filtering Stores based on Search Query

You are able to natively display your assets hosted in your Woosmap project by using the StoresOverlay JavaScript class.

Overview

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 Javascript API

HTML

        <script defer
src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap"></script>

    

Here is a basic sample of starbucks coffee shops displayed over a Woosmap Map centered on UK.

Add a StoresOverlay

To add your stores to a map, you need to create a new woosmap.map.StoresOverlay with a Style object parameter. Then, call setMap(), passing it the map object on which to display the overlay. Similarly, to hide your stores, call setMap(), passing null.

JavaScript

        map = new woosmap.map.Map(document.getElementById('map'), {
  center: {lat: 53,lng: -2.3},
  zoom: 5
});
storesOverlay = new woosmap.map.StoresOverlay(style);
storesOverlay.setMap(map);

    

Style your StoresOverlay

The Style object is mandatory. It lets you define how is render your stores over the map.

With the Tiled images, Stores are displayed as colored dots. Therefore, you have to set the color (Hexadecimal color value) and a size range - the dots size depends on the zoom level and vary based on size and minSize attributes (in pixel).

For Markers icons, the display support default marker (icon property) and selected markers (selectedIcon property). For both markers, specify the url of the desired image and, optionally, add properties to control the behaviour of the marker:

• scaledSize corresponding to the size of the entire image after scaling. Use this property to shrink an image.
• anchor where the icon’s hotspot should be offset. By default, the anchor is located along the center point of the bottom of the image.

JavaScript

        const style = {
  breakPoint: 14,
  default: {
    color: "#008a2f",
    size: 8,
    minSize: 1,
    icon: {
      url: 'https://images.woosmap.com/starbucks-marker.svg',
      scaledSize: {
        height: 40,
        width: 34
      },
      anchor: {
        x: 0,
        y: 5
      }
    },
    selectedIcon: {
      url: 'https://images.woosmap.com/starbucks-selected-marker.svg',
      ...
    }
  },
  rules: []
}

    

Along with the default styles, you can set custom dot colors and icons for given type values in the rules array. Let’s say you would like to enlighten your Click & Collect Stores on the Map.
Assuming you have previously updated your desired store data with the field type:[click&collect], the style would be similar to this:

JavaScript

        const style = {
  default: {...},
  rules: [{
    color: "#FF5221",
    type: 'click&collect',
    icon: {
      url: '/path_to_image/click_and_collect_marker.png',
    },
    selectedIcon: {
      url: '/path_to_image/selected_click_and_collect_marker.png'
    }
 }]
}

    

Store Click Event

The Map triggers a special event when a user click on a marker belonging to the StoresOverlay Layer. You can listen to this event to get the store object and process the associated attributes. Returned Store JSON Object comes directly from the Woosmap Data API.

In the below example, clicking on a store marker will display the name, address and phone number of given coffee shop while displaying the selected marker icon.

JavaScript

        woosmap.map.event.addListener(map, 'store_selected', (store) => {
  const name = store.properties.name;
  const phone = store.properties.contact.phone; 
  ...
  document.getElementById('info').innerHTML = name + phone + ...;
});

    

Filtering Stores based on Search Query

The StoresOverlay implements the method setQuery(queryString) to filter the displayed stores based on your specific query. You have to build your query following the Search API guidelines.

A search query combines one or more search clauses, structured as field : operator value.

JavaScript

        let storeOverlay;
storeOverlay = new woosmap.map.StoresOverlay(style);
storeOverlay.setQuery('type:"click_and_collect"');

    

To clear the query, set it to undefined or empty string.

JavaScript

        storeOverlay.setQuery('');

    

‹ Get Started Add Markers ›

Was this article helpful?

Have more questions? Submit a request