Work with MVC Objects
Listen for properties changes on Woosmap Objects
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);