Hillshade Module

VERSION 0.41.1 PUBLIC PREVIEW

The Hillshade Module controls the map layers that display terrain elevation through semi-transparent shading that reveals hills, valleys, mountains, and other terrain features.

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { HillshadeModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import './style.css';
import { API_KEY } from './config';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-US' });

(async () => {
    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            center: [11.108922, 47.109197],
            zoom: 7,
        },
    });
    await HillshadeModule.get(map, { visible: true });
})();

Open Sandbox

Initialization

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

3
const map = new TomTomMap( { mapLibre: { container: 'map' } } );
4
const hillshadeModule = await HillshadeModule.get(map);

Visibility

Hillshade is hidden by default. This helps you control better when you want it to appear on the map.

You can make it visible during initialization:

1
const hillshadeModule = await HillshadeModule.get(map, { visible: true });

You can change visibility later using the setVisible method.

1
hillshadeModule.setVisible(true);

Events

Handle user interactions with hillshade:

1
// Click events
2
hillshadeModule.events.on('click', (feature, lngLat) => {
3
    console.log('Terrain clicked at:', lngLat);
4
});
5

6
// Hover events
7
hillshadeModule.events.on('hover', (feature, lngLat) => {
8
    console.log('Hovering over terrain at:', lngLat);
9
});
10

11
// Long hover events
12
hillshade.events.on('long-hover', (feature, lngLat) => {
13
    console.log('Long hovering over terrain at:', lngLat);
14
});
15

16
// Context menu events
17
hillshade.events.on('contextmenu', (feature, lngLat) => {
18
    console.log('Right-clicked terrain at:', lngLat);
19
});
20

21
// Remove event listeners
22
hillshade.events.off('click', handler);

API Reference

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

Hillshade - Basic hillshade visualization and visibility control

POIs Module - Display points of interest alongside terrain visualization
User Interaction Events - Handle user interactions with map features

Hillshade Module

Initialization

Visibility

Events

API Reference

Related Guides and Examples

Related Examples

Related Map Modules