MapTiledView - Blog - UTFGrid Interactivity

jsFiddle demo that display a TiledView of a sample datasource using Woosmap Javascript API. author(s): Woosmap DevTeam

by woosmap

HTML

<script src="https://sdk.woosmap.com/locator/loader.js"></script>
<div id="my-map"></div>
<div class="btn-container">
  <button id="mouse-hover-id">Hover Store: </button>
</div>
<pre><code id="selected-store">...</code></pre>

CSS

#my-map {
  height:100*;
  width: 100%;
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  top: 0;
}

#mouse-hover-id,
#selected-store {
  padding: 8px;
  border-style: none;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.btn-container {
  margin: 18px;
  position: absolute;
  right: 0;
  top: 0;
}
  
code{
  margin: 18px;
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 35%;
  max-height: 200px;
  overflow: auto;
}

JavaScript

const projectKey = 'woos-0c78592f-13ea-362b-aa07-ba4ba9ea3dae';
const markersStyle = {
  default: {
    icon: {
      url: 'https://images.woosmap.com/starbucks-marker-black.svg'
    },
    selectedIcon: {
      url: 'https://images.woosmap.com/starbucks-marker.svg'
    }
  }
};
const tilesStyle = {
  color: '#383838',
  size: 10,
  minSize: 6,
};

/*----- Handle store selection -----*/
function registerLocationClickEvent(mapView) {
   mapView.addListener('click', function(store) {
   document.getElementById('selected-store').innerHTML = JSON.stringify(store.properties, null, 2)
  });
}

function registerHoverEvent(mapView) {
  mapView.addListener('mouseover', function(store) {
   document.getElementById('mouse-hover-id').innerHTML = store.properties.name;
  });
}
/*----- Init and display a Map with a TiledLayer-----*/
function woosmap_main() {
  const loader = new woosmap.MapsLoader();
  const dataSource = new woosmap.DataSource();
  loader.load(function() {
    const map = new google.maps.Map(document.getElementById('my-map'), {
      center: {
        lat: 51,
        lng: 3
      },
      zoom: 6
    });
    const mapView = new woosmap.TiledView(map, {
      style: markersStyle,
      tileStyle: tilesStyle,
      breakPoint: 12
    });
    registerLocationClickEvent(mapView);
    registerHoverEvent(mapView);
  });
}


document.addEventListener("DOMContentLoaded", function(event) {
  WoosmapLoader.load({
    callback: woosmap_main,
    publicKey: projectKey,
    loadJQuery: false,
    version: '1.4'
  })
});