Style your Stores Markers

How to configure and style your Stores Markers TiledView

  1. Available Markers Styles
  2. Dots Markers
  3. Image Markers
  4. Numbered Image Markers

To keep up with your brand identity and ensure the best possible readability and navigation, the map offers two types of display for stores, a simplified view with Dots Markers and markers view with Image Markers.

Available Markers Styles

Dots Markers

Stores are displayed as colored dots on the map. Useful for the top zoom levels and to render large amount of stores keeping the map display clean and fast. The size (in pixel) of the dots depends on the zoom level and vary based on size and minsize attributes. The higher the zoom level is, the thinner the dots are. Dots colors can be set for different types of service you may have on your network (eg. drive, click and collect, etc).

JavaScript
        const markersConfig = {
  "woosmapview": {
    "tileStyle": {
      "color": "#ef8900", //default color
      "size": 11,
      "minSize": 5,
      "typeRules": [
        {
          "type": "drive",
          "color": "#bbb300", //color for drive store type
          "zIndex": 2 // adjust zIndex to prioritize marker display when they overlap 
        },
        {
          "type": "click_and_collect", //color for click_and_collect store type
          "color": "#733f00",
          "zIndex": 1
        }
      ]
    }
  }
}

    

Image Markers

Stores are displayed on the map as images. They are useful to render detailed markers (branding, logos, etc.) after a specific specific zoom level (breakpoint attribute).

You can specify custom icon markers for the default view (icon), for when a store is selected (selectedIcon), or when a store is displayed after a search (numberedIcon).

JavaScript
        const markersConfig = {
  "woosmapview": {
    "breakPoint": 10,
    "style": {
      "default": {
        "icon": {
          "url": "https://images.woosmap.com/mapin/default.svg"
        },
        "selectedIcon": {
          "url": "https://images.woosmap.com/mapin/selected.svg"
        }
      },
      "rules": [
        {
          "type": "drive",
          "icon": {
            "url": "https://images.woosmap.com/mapin/drive_default.svg"
          },
          "selectedIcon": {
            "url": "https://images.woosmap.com/mapin/drive_selected.svg"
          }
        }
      ]
    }
  }
};

    

Numbered Image Markers

An alternative display option for Image Markers allows you to display the image of a number (from 1 to n) of the closest stores from the searched location. To do, just put markers images in a dedicated path with a number filename (e.g. “/1.svg”, “/2.svg”) and specify the numberedIcon url like url: "https://website.com/path-to-image/{number}.svg".

JavaScript
        const markersConfig = {
  "woosmapview": {
    "breakPoint": 10,
    "style": {
      "default": {
        "icon": {
          "url": "https://images.woosmap.com/mapin/default.svg"
        },
        "selectedIcon": {
          "url": "https://images.woosmap.com/mapin/selected.svg"
        },
        "numberedIcon": {
          "url": "https://images.woosmap.com/mapin/{number}.svg"
        },
      },
    }
  }
};

    
Was this article helpful?
Have more questions? Submit a request