@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.

Hide the embed interface

Add ui=none to the iframe URL to hide the embed controls and feature panels:

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

This hides controls and feature panels. Attribution always remains visible.
Map interactions and feature selection still work, and the SDK's filter methods and events remain available.

The option applies only to this embed. Omit it to use the normal interface.

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();

Feature selection and camera

map.setActiveFeature('feature-id'); // Activate feature without centering
map.setActiveFeatureByExternalId('external-id');
map.setActiveFeature('feature-id', { camera: {} }); // Center, retaining zoom
map.setActiveFeatureByExternalId('external-id', { camera: { zoom: 16 } });
map.clearActiveFeature();

const unsubscribe = map.on('activeFeatureChanged', (feature) => {
  // { id: string, externalId: string | null } | null
  console.log(feature);
});
map.on('ready', ({ activeFeature }) => console.log(activeFeature));
unsubscribe();

Selection preserves filters; changing filters clears selection. Omit camera for activation without an additional SDK camera movement. camera: {} retains the current zoom. Points are centered on their coordinates, other geometries on their bounding-box midpoint, and events on their venue. destroy() removes subscriptions.