Map Tiled View

The TiledView object allows interaction with a google Map
  1. Presentation


Woosmap Locator API provides a TiledView object that you need to use to display your assets within a map and have interactions.

In this page we’ll show you how to use this object to obtain this TiledView :

You can edit or play with this Sample on jsFiddle and download or fork the source code on GitHub.

Initial Setup

Define your HTML :

<script src=""></script>
<div id="my-map"></div>
<div class="btn-container">
  <button id="go-to-paris">assets nearby Paris</button>

First you need to use the MapLoader to create a Google Map then create a TiledView.

A TiledView takes two arguments :

var map = new google.maps.Map(woosmap.$('#my-map')[0], {
            center: {lat: 46, lng: 3},
            zoom: 5
var markersStyle = {
    rules: [
            type: 'drive',
            icon: {url: '/assets/images/markers/marker_drive.png'},
            selectedIcon: {url: '/assets/images/markers/marker_selected.png'}
    default: {
        icon: {url: '/assets/images/markers/marker_default.png'},
        selectedIcon: {url: '/assets/images/markers/marker_selected.png'}
var tilesStyle = {
    color: '#383838',
    size: 11,
    minSize: 6,
    typeRules: [{
        type: 'drive',
        color: '#82a859'
var mapView = new woosmap.TiledView(map, {style: markersStyle, tileStyle: tilesStyle});

assets from a location

The TiledView object also has a location property. Here we use #go-to-paris button to hard set a location to the view. If the assets have a distance property they’ll be displayed using markers with numbers. Here we use a new object : NearbyStoreSource. We give it a DataSource and some params on init, and can be bound to a view using the location and stores property. When its location changes, it will fetch the assets nearby the location using the DataSource and set them to its stores property. Because this property is also bound to the view, it will automatically display these nearby assets.

var MAX_STORE = 10;
var MAX_DISTANCE_FROM_LOCATION = 150000; //150km
var nearbyStoreSource = new woosmap.location.NearbyStoresSource(dataSource, MAX_STORE, MAX_DISTANCE_FROM_LOCATION);
nearbyStoreSource.bindTo('location', mapView);
nearbyStoreSource.bindTo('stores', mapView);

woosmap.$('#go-to-paris').on('click', function () {
    mapView.set('location', {
        lat: 48.85,
        lng: 2.27

Draggable location Marker

The location property is used to set/get the location used for Directions or Search. A marker will be displayed on location changes. You can set draggable to true, the location property will be updated when the marker is dragged and dropped. You can also set a custom marker using its icon property.

    draggable: true,
    icon: {url: '/assets/images/markers/geolocated.png'}

Store selection

The TiledView has another bindable property that you can use selectedStore. The TiledView handles the click event on all store markers and save the store clicked into this property. It automaticaly change the style of the marker if it was provided on the TiledView initialization.

var selectedStoreObserver = new woosmap.utils.MVCObject();
selectedStoreObserver.selectedStore = null;
selectedStoreObserver.selectedStore_changed = function () {
    var selectedStore = this.get('selectedStore');
selectedStoreObserver.bindTo('selectedStore', mapView);

Check Infowindow for more on selected store actions information.

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