JavaScript Maps SDK

Highlight Selected Features

Select Places to highlight by holding shift and dragging a selection box over them. 

<!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%;
            }

            .boxdraw {
                background: rgba(56, 135, 190, 0.1);
                border: 2px solid #3887be;
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 0;
            }
      </style>
      </head>
      <body>
          <div id="map"></div>
          <div class="filter-ctrl">
          <input
          id="filter-input"
          type="text"
          name="filter"
          placeholder="Filter by name"
          autocomplete="off"
          />
          </div>

      <script>
        TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
        const myMap = new TrimbleMaps.Map({
            container: 'map', // container id
            style: TrimbleMaps.Common.Style.TRANSPORTATION, //hosted style id
            center: [-80.07256, 40.47625], // starting position
            zoom: 12, // starting zoom
            hash: true
        });

        myMap.boxZoom.disable();

        const popup = new TrimbleMaps.Popup()

        myMap.on('load', (e) => {

            const canvas = myMap.getCanvasContainer();
            let start;
            let current;
            let box;

            myMap.addLayer(
                {
                    'id': 'places-highlighted',
                    'type': 'fill',
                    'source': 'Places',
                    'source-layer': 'sites',
                    'paint': {
                        'fill-outline-color': '#484896',
                        'fill-color': '#6e599f',
                        'fill-opacity': 0.99
                    },
                    'filter': ['in', 'tpids', '']
                }
            );

            canvas.addEventListener('mousedown', mouseDown, true);
            function mousePos(e) {
                const rect = canvas.getBoundingClientRect();
                return new TrimbleMaps.Point(
                    e.clientX - rect.left - canvas.clientLeft,
                    e.clientY - rect.top - canvas.clientTop
                );
            }

            function mouseDown(e) {
                // Continue the rest of the function if the shiftkey is pressed.
                if (!(e.shiftKey && e.button === 0)) return;

                // Disable default drag zooming when the shift key is held down.
                myMap.dragPan.disable();

                // Call functions for the following events
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
                document.addEventListener('keydown', onKeyDown);

                // Capture the first xy coordinates
                start = mousePos(e);
            }

            function onMouseMove(e) {
                // Capture the ongoing xy coordinates
                current = mousePos(e);

                // Append the box element if it doesn't exist
                if (!box) {
                    box = document.createElement('div');
                    box.classList.add('boxdraw');
                    canvas.appendChild(box);
                }

                const minX = Math.min(start.x, current.x),
                    maxX = Math.max(start.x, current.x),
                    minY = Math.min(start.y, current.y),
                    maxY = Math.max(start.y, current.y);

                // Adjust width and xy position of the box element ongoing
                const pos = `translate(${minX}px, ${minY}px)`;
                box.style.transform = pos;
                box.style.width = maxX - minX + 'px';
                box.style.height = maxY - minY + 'px';
            }

            function onMouseUp(e) {
                // Capture xy coordinates
                finish([start, mousePos(e)]);
            }

            function onKeyDown(e) {
                // If the ESC key is pressed
                if (e.keyCode === 27) finish();
            }

            function finish(bbox) {
                // Remove these events now that finish has been called.
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('keydown', onKeyDown);
                document.removeEventListener('mouseup', onMouseUp);

                if (box) {
                    box.parentNode.removeChild(box);
                    box = null;
                }

                // If bbox exists. use this value as the argument for `queryRenderedFeatures`
                if (bbox) {
                    var features = myMap.queryRenderedFeatures(bbox)
                    features = features.filter(function (item) {
                        if (item.layer.id == "places_sites") {
                            console.log(item)
                            return true
                        }
                        return false
                    });


                    if (features.length >= 1000) {
                        return window.alert('Select a smaller number of features');
                    }

                    // Run through the selected features and set a filter
                    // to match features with unique FIPS codes to activate
                    // the `counties-highlighted` layer.
                    const tpids = features.map((feature) => feature.properties.tpid);
                    myMap.setFilter('places-highlighted', ['in', 'tpid', ...tpids]);
                }

                myMap.dragPan.enable();
            }

            myMap.on('mousemove', (e) => {
                const features = myMap.queryRenderedFeatures(e.point, {
                    layers: ['places-highlighted']
                });

                // Change the cursor style as a UI indicator.
                myMap.getCanvas().style.cursor = features.length ? 'pointer' : '';

                if (!features.length) {
                    popup.remove();
                    return;
                }

                popup
                    .setLngLat(e.lngLat)
                    .setText(features[0].properties.COUNTY)
                    .addTo(myMap);
            });
        });


        </script>
    </body>
</html>
Last updated August 23, 2024.