Community Forum

Display Your Stores

How to use the TiledView object to display your stores within a map and have interactions.
  1. Overview
  2. Add a TiledView
  3. TiledView Properties

You are able to natively display your assets hosted in your Woosmap project by using the woosmap.TiledView.

Overview

Woosmap Store Locator JS API provides a TiledView object to display your stores within a map and have interactions.

This TiledView is a combination of raster tiles for the top level scales (dots markers), and vector tiles at the bottom level scales (image markers). This way, the display of your stores remains fast at every scale while preserving a smooth navigation and a clear rendering for higher client resolution.

Here is a basic sample centered on London and displaying Starbucks Coffee Shops with dots markers (zoom in to display image markers).

Add a TiledView

To add your stores to a map, you need to create a new woosmap.TiledView passing two arguments:

Then, call setMap(), passing it the map object on which to display the overlay. Similarly, to hide your stores, call setMap(), passing null.

JavaScript
        const map = new google.maps.Map(document.getElementById("store-locator"), {
    center: {lat: 46, lng: 3},
    zoom: 5
});
const woosmapStyleOptions = {
    style: {
        default: {
            icon: {
                url: "https://images.woosmap.com/starbucks-marker.svg",
                scaledSize: {width: 34, height: 40}
            },
            numberedIcon: {
                url: ".https://images.woosmap.com/starbucks-marker.svg"
            },
            selectedIcon: {
                url: "https://images.woosmap.com/starbucks-marker-selected.svg"
            }
        }
    },
    tileStyle: {
        color: "#008248",
        size: 15,
        minSize: 4
    },
    breakPoint: 12
};
const mapView = new woosmap.TiledView(map, woosmapStyleOptions);

TiledView Properties

The TiledView extends the MVC Object. Therefore, you can bind to his properties and listen for property changes.

property selectedStore

The TiledView handles the click event on all store markers and save the store clicked into this property. It automatically changes the style of the marker if it was provided on the TiledView initialization.

JavaScript
        const storesObserver = new woosmap.utils.MVCObject();
storesObserver.selectedStore = null;
storesObserver.selectedStore_changed = () => {
    const selectedStore = this.get('selectedStore');
    alert(selectedStore.properties.name);
};
storesObserver.bindTo('selectedStore', mapView);

property stores

List of stores displayed. Useful to display a subset of stores, for example stores returned by a search query.

JavaScript
        const searchParams = new woosmap.search.SearchParameters({
    lat: location.lat,
    lng: location.lng,
    page: 1,
    storesByPage: 15
});
const dataSource = new woosmap.DataSource();
dataSource.searchStoresByParameters(searchParams,  (stores) => {
    mapView.set('stores', stores.features);
});

property location

The user defined location.

JavaScript
        mapView.set('location', {lat: 43.2, lng: 3.4})

property marker

This marker is positioned on the map when location property changes. If this marker is set draggable ( marker.setDraggable(true)) the location property will be changed when dropping the marker (ie. when the marker fires the dragend event).

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