JavaScript Maps SDK

Center on Symbol

Use events and flyTo to center the map on a symbol. Requires Trimble Maps v3.0.0 or later. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.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 map = new TrimbleMaps.Map({
            container: 'map',
            style: TrimbleMaps.Common.Style.TRANSPORTATION,
            center: [-90.96, -0.47],
            zoom: 7.5,
      });

    map.on('load', async () => {
        // Add an image to use as a custom marker
        const image = await map.loadImage('https://developer.trimblemaps.com/maps-sdk/img/assets/custom_marker.png');
        map.addImage('custom-marker', image.data);
        // Add a GeoJSON source with 3 points.
        map.addSource('points', {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'properties': {},
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [
                                -91.395263671875,
                                -0.9145729757782163
                            ]
                        }
                    },
                    {
                        'type': 'Feature',
                        'properties': {},
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [
                                -90.32958984375,
                                -0.6344474832838974
                            ]
                        }
                    },
                    {
                        'type': 'Feature',
                        'properties': {},
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [
                                -91.34033203125,
                                0.01647949196029245
                            ]
                        }
                    }
                ]
            }
        });

        // Add a symbol layer
        map.addLayer({
            'id': 'symbols',
            'type': 'symbol',
            'source': 'points',
            'layout': {
                'icon-image': 'custom-marker'
            }
        });

        // Center the map on the coordinates of any clicked symbol from the 'symbols' layer.
        map.on('click', 'symbols', (e) => {
            map.flyTo({
                center: e.features[0].geometry.coordinates
            });
        });

        // Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
        map.on('mouseenter', 'symbols', () => {
            map.getCanvas().style.cursor = 'pointer';
        });

        // Change it back to a pointer when it leaves.
        map.on('mouseleave', 'symbols', () => {
            map.getCanvas().style.cursor = '';
        });
    });
        </script>
    </body>
</html>
Last updated June 26, 2025.