Work with MVC Objects

Listen for properties changes on Woosmap Objects

  1. MVC Object
  2. Bind Objects with Same Properties

MVC Object

The Woosmap Store Locator JS API provide a class called MVCObject() implementing the KVO mechanism, for Key Value Observing. Using it you can observe properties changes of an object.

For example, the woosmap.TiledView handles the click event on all store markers and save the store clicked into property called selectedStore. As the TiledView extends the MVCObject this property is bindable. Therefore, to be aware that a user select a store on the Map, create a new MVCObject and bind it to this property on the TiledView.

const mapView = new woosmap.TiledView(map, conf.markersOptions);
const selectedStoreObserver = new woosmap.utils.MVCObject();
selectedStoreObserver.selectedStore_changed = () => {
    console.log(selectedStoreObserver.get('selectedStore'));
};
selectedStoreObserver.bindTo('selectedStore', mapView);

It is useful to build your own information panel to display store attributes when a user clicks on a store marker.

Bind Objects with Same Properties

Some properties exist with the same name from one Woosmap object to another. You can tell an object to listen to the other on property change. The selectedStore property illustrates pretty well this feature. For instance, both the TiledView and the LocatorWindow react to a change of this property. The TiledView displays the selected marker icon as defined in your configuration file and the LocatorWindow open up to display the store attributes.

When a user clicks on a store marker, only the TiledView is aware of this selectedStore property change. To process this property in the LocatorWindow too, use the bindTo() method.

const mapView = new woosmap.TiledView(map, conf.woosmapStyleOptions);
const infoWindow = new woosmap.LocatorWindow(map, templateRenderer, conf.infoWindow);
mapView.bindTo("selectedStore", infoWindow);
Was this article helpful?
Have more questions? Submit a request