<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const minzoom = 9;
const map = window.map = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-76.3157, 40.0692], // starting position
zoom: 10 // starting zoom
});
map.on('load', function () {
// Add a layer and use an expression to just show truck stops
map.addLayer({
id: 'truck-stops',
type: 'symbol',
source: 'Base',
'source-layer': 'poi',
paint: {
'icon-halo-color': 'rgba(255, 255, 255, 1)',
'icon-halo-width': 5,
'icon-translate': [0, -1],
'text-halo-color': 'rgba(255, 255, 255, 0.8)',
'text-halo-width': 1.5,
'text-color': 'rgba(5, 57, 150, 1)'
},
layout: {
'icon-image': 'poi_truck_stop',
'icon-size': ['interpolate', ['linear'], ['zoom'],
9, 0.7,
12, 1
],
'text-field': ['step', ['zoom'],
'',
12, ['get', 'name']
],
'text-font': ['Roboto Regular'],
'text-anchor': 'top',
'text-size': 11,
'text-offset': [0, 1]
},
filter: [
'match',
['get', 'type'],
['truck_stop'],
true,
false
],
minzoom: minzoom
});
});
let popup;
// Listen for clicks on the truck stops layer
map.on('click', 'truck-stops', function (evt) {
const popupLocation = evt.features[0].geometry.coordinates.slice();
const popupContent = `Name: ${evt.features[0].properties.name}<br />
ID: ${evt.features[0].properties.poi}<br />
Set: ${evt.features[0].properties.set}`;
popup = new TrimbleMaps.Popup()
.setLngLat(popupLocation)
.setHTML(popupContent)
.addTo(map);
});
map.on('zoomend', (e) => {
let zoom = map.getZoom();
if(zoom <= minzoom && popup && popup.isOpen()) {
popup.remove(); // Remove popup from the map.
}
});
</script>
</body>
</html>