JavaScript Maps SDK

Truck Stops Layer Filter

Hide and show truck stop icons and labels. Change icon sizes. A pop up shows truck stop properties. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.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.setAPIKey('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>
Last updated August 23, 2024.