About MapLibre

1
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
2
import { TomTomMap } from '@tomtom-org/maps-sdk/map';
3
import mapLibre from 'maplibre-gl';
4
import 'maplibre-gl/dist/maplibre-gl.css';
5

6
TomTomConfig.instance.put({ apiKey: 'YOUR_API_KEY' });
7

8
const tomtomMap = new TomTomMap({ mapLibre: { container: 'map' /* pass other maplibre config */ }});
9

10
const maplibreMap = tomtomMap.mapLibreMap;
11

12
// Add maplibre event listener
13
maplibreMap.on('click', (event) => {
14
    console.log('Map clicked at:', event.lngLat);
15
});
16

17
// Add MapLibre controls
18
maplibreMap.addControl(new mapLibre.NavigationControl(), 'top-right');

1
import { PlacesModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
2
import { search } from '@tomtom-org/maps-sdk/services';
3

4
const results = await search({ query: 'restaurants' });
5
const placesModule = await PlacesModule.get(tomtomMap);
6
placesModule.show(results);

1
// Custom data layers
2
maplibreMap.addSource('custom-data', {
3
    type: 'geojson',
4
    data: customGeoJSON
5
});
6

7
maplibreMap.addLayer({
8
    id: 'custom-layer',
9
    type: 'circle',
10
    source: 'custom-data',
11
    paint: { 'circle-radius': 8, 'circle-color': '#ff0000' }
12
});
13

14
// Custom style modifications
15
maplibreMap.setPaintProperty('building-layer', 'fill-color', '#00ff00');
16

17
// Detailed event control
18
maplibreMap.on('sourcedata', (event) => {
19
    if (event.sourceId === 'my-source' && event.isSourceLoaded) {
20
        console.log('Source loaded');
21
    }
22
});

1
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
2
import { PlacesModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
3
import { search } from '@tomtom-org/maps-sdk/services';
4
import { Marker, Popup } from 'maplibre-gl';
5

6
// Initialize with TomTom SDK
7
TomTomConfig.instance.put({ apiKey: 'YOUR_API_KEY' });
8
const map = new TomTomMap({ mapLibre: { container: 'map' } });
9

10
// Use TomTom services for business logic
11
const restaurants = await search({ query: 'restaurants' });
12
const placesModule = await PlacesModule.get(map);
13
placesModule.show(restaurants);
14

15
// Use MapLibre for custom features
16
const customMarker = new Marker({ color: '#ff0000' });
17

18
customMarker.setLngLat([4.9, 52.3]).setPopup(new Popup().setText('Custom Location')).addTo(map.mapLibreMap);
19

20
// Combine event handling
21
placesModule.events.on('click', (feature) => {
22
    console.log('TomTom place clicked:', feature.properties.name);
23
});
24

25
map.mapLibreMap.on('click', (event) => {
26
    console.log('Map clicked at:', event.lngLat);
27
});