@wolfmaps/sdk

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

Installation

Install the package:

npm install @wolfmaps/sdk

Or load the browser bundle from jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/@wolfmaps/sdk@<version>/dist/wolfmaps-sdk.js"></script>

Replace <version> with the SDK version you want to pin.

Basic Example

You can call setFilters, setFiltersByExternalIds, and clearFilters immediately after connect(). The SDK queues those calls until the embed sends ready.

npm

import WolfMaps from '@wolfmaps/sdk';

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

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

ready is not required before calling filter methods, but it is the signal that the embed has completed initialization and returned its current resolved filter state.

Browser Script

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

<script src="https://cdn.jsdelivr.net/npm/@wolfmaps/sdk@<version>/dist/wolfmaps-sdk.js"></script>
<script>
  const map = WolfMaps.connect('#map');

  map.on('ready', (payload) => {
    console.log(payload.filters.categories.ids, payload.filters.categories.externalIds);
    console.log(payload.filters.tags.ids, payload.filters.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://cdn.jsdelivr.net/npm/@wolfmaps/sdk@<version>/dist/wolfmaps-sdk.js"></script>
<script>
  const map = WolfMaps.connect('#map');

  document.getElementById('show-food').addEventListener('click', () => {
    map.setFiltersByExternalIds({
      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

import WolfMaps from '@wolfmaps/sdk';

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

Use ready when you need confirmation that:

• the iframe is a responding Wolf Maps embed
• the embed has finished initializing
• the initial resolved category and tag selection is available

map.on('ready', (payload) => {
  console.log(payload.filters.categories.ids, payload.filters.categories.externalIds);
  console.log(payload.filters.tags.ids, payload.filters.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'],
});

setFilters, setFiltersByExternalIds, and clearFilters can be called before ready. The SDK queues those calls until the embed responds.

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

map.clearFilters();

map.destroy();