This is the documentation of version 0.55.1. Go to the latest version, 1.0.0-rc.5.

POIs module

The POIs Module controls Points of Interest displayed on the map, allowing you to show/hide POIs and filter them by category.

Initialization

import { TomTomMap, POIsModule } from '@tomtom-org/maps-sdk/map';

// Initialize map
const map = new TomTomMap({ mapLibre: { container: 'map' } });

// Get POIs module
const poisModule = await POIsModule.get(map);

Visibility control

Control POI layer visibility on the map:

// Initialize with hidden POIs
const poisModule = await POIsModule.get(map, {
    visible: false
});

// Hide all POIs
poisModule.setVisible(false);

// Show all POIs
poisModule.setVisible(true);

// Check current visibility state
const visible = poisModule.isVisible();

Filtering

Filter POIs by individual categories or category groups:

// Filter on initialization
const poisModule = await POIsModule.get(map, {
    visible: true,
    filters: {
        categories: {
            show: 'only',
            values: ['RESTAURANT', 'CAFE_PUB']
        }
    }
});

// Show categories
poisModule.filterCategories({
    show: 'only',
    values: ['RESTAURANT', 'CAFE_PUB', 'HOTEL_MOTEL']
});

// Hide categories
poisModule.filterCategories({
    show: 'all_except',
    values: ['PARKING_GARAGE', 'OPEN_PARKING_AREA']
});

// Show category groups
pois.filterCategories({
    show: 'only',
    values: ['FOOD_DRINKS_GROUP', 'SHOPPING_GROUP']
});

// Hide category groups
pois.filterCategories({
    show: 'all_except',
    values: ['PARKING_GROUP', 'GAS_STATIONS_GROUP']
});

// Reset filter and show all categories
pois.filterCategories(undefined);

Available category groups

The module supports predefined category groups for convenient filtering:

Events

Handle user interactions with POIs:

// Click events
pois.events.on('click', (feature, lngLat) => {
    console.log('POI name:', feature.properties.name);
    console.log('Category:', feature.properties.category);
    console.log('ID:', feature.properties.id);
    console.log('Click coordinates:', lngLat);
});

// Hover events
pois.events.on('hover', (feature, lngLat) => {
    console.log('Hovering over:', feature.properties.name);
});

// Context menu (right-click)
pois.events.on('contextmenu', (feature, lngLat) => {
    console.log('Right-clicked POI:', feature.properties.name);
});

// Long hover
pois.events.on('long-hover', (feature, lngLat) => {
    console.log('Long hover on:', feature.properties.name);
});

// Remove event listeners
pois.events.off('click', handler);

POI feature properties

POI features include the following properties in events:

Querying visible features

Use getShown() to retrieve all POI features currently rendered in the visible map area:

const shown = poisModule.getShown();
console.log(`Visible POIs: ${shown.poi.length}`);
shown.poi.forEach(poi => {
    console.log(poi.properties.name, poi.properties.category);
});

API reference

For complete documentation of all POIs Module properties, methods, and types, see the POIsModule API Reference.

Related guides and examples

Services integration

Related examples

Related map modules