Use the hosted SDK to control an existing Wolf Maps embed iframe from your website.

<script src="<https://wolfmaps.com/wolfmaps-sdk.js>"></script>

<aside> 💡

Please load the script directly from our CDN without any caching or CDN in between. We provide the proper caching for

</aside>

Basic Example

<iframe
  id="map"
  src="<https://wolfmaps.com/embed/123>"
  width="100%"
  height="500"
  style="border: 0"
  loading="lazy"
></iframe>

<script src="<https://wolfmaps.com/wolfmaps-sdk.js>"></script>
<script>
  const map = WolfMaps.connect('#map');

  map.on('ready', (payload) => {
    console.log(payload.categories.ids, payload.categories.externalIds);
    console.log(payload.tags.ids, payload.tags.externalIds);
  });
</script>

Filter Example

<iframe
  id="map"
  src="<https://wolfmaps.com/embed/123>"
  width="100%"
  height="500"
  style="border: 0"
  loading="lazy"
  allowfullscreen
></iframe>

<button id="show-food">Show food</button>
<button id="clear-filters">Clear filters</button>

<script src="<https://wolfmaps.com/wolfmaps-sdk.js>"></script>
<script>
  const map = WolfMaps.connect('#map');

  document.getElementById('show-food').addEventListener('click', () => {
    map.setFiltersByExternalId({
      categories: ['restaurants', 'cafes'],
      tags: [],
    });
  });

  document.getElementById('clear-filters').addEventListener('click', () => {
    map.clearFilters();
  });
</script>

Replace the category and tag values with the IDs or external_id values from your own map.

API

const map = WolfMaps.connect('#map');

map.on('ready', (payload) => {
  console.log(payload.categories.ids, payload.categories.externalIds);
  console.log(payload.tags.ids, payload.tags.externalIds);
});

map.on('filtersChanged', (payload) => {
  console.log(payload.categories.ids, payload.categories.externalIds);
  console.log(payload.tags.ids, payload.tags.externalIds);
});

map.setFilters({
  categories: ['cat-1'],
  tags: ['tag-2'],
});

map.setFiltersByExternalId({
  categories: ['restaurants'],
  tags: ['family'],
});

map.clearFilters();

map.destroy();