JavaScript Maps SDK

Map Styles Symbol

Map styles with a symbol style marker layer on a styledata event. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            #menu {
                position: absolute;
                background: #fff;
                padding: 10px;
                font-family: 'Open Sans', sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="menu">
            <input id="transportation" type="radio" name="rtoggle" value="TRANSPORTATION" checked="checked" />
            <label for="transportation">transportation</label>
            <input id="basic" type="radio" name="rtoggle" value="BASIC" />
            <label for="basic">basic</label>
            <input id="datalight" type="radio" name="rtoggle" value="DATALIGHT" />
            <label for="datalight">datalight</label>
            <input id="datadark" type="radio" name="rtoggle" value="DATADARK" />
            <label for="datadark">datadark</label>
            <input id="terrain" type="radio" name="rtoggle" value="TERRAIN" />
            <label for="terrain">terrain</label>
            <input id="satellite" type="radio" name="rtoggle" value="SATELLITE" />
            <label for="satellite">satellite</label>
        </div>

        <script>
            // This example shows how to switch map styles with a custom symbol layer.

            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const map = new TrimbleMaps.Map({
                container: 'map', // container id
                style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
                center: [-74.60018, 40.36144], // starting position
                zoom: 4 // starting zoom
            });

            const layerList = document.getElementById('menu');
            const inputs = layerList.getElementsByTagName('input');

            const geoJsonData = {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [{
                        type: 'Feature',
                        properties: {
                            name: 'TrimbleMAPS HQ'
                        },
                        geometry: {
                            type: 'Point',
                            coordinates: [-74.60018, 40.36144]
                        }
                    }]
                }
            };

            function switchLayer (elem) {
                const styleId = elem.target.value;
                map.setStyle(TrimbleMaps.Common.Style[styleId]);
            }

            for (let i = 0; i < inputs.length; i++) {
                inputs[i].onclick = switchLayer;
            }

            map.on('styledata', (e) => {
                const layerId = 'hqPoints';
                const source = 'hqSource';
                const markerIcon = 'marker-icon';
                if (map.getSource(source) === undefined)
                    map.addSource(source, geoJsonData);

                let imgUrl = 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png';
                if (window.location.origin === 'http://127.0.0.1:8080')
                    imgUrl = 'http://127.0.0.1:8080/img/marker_blue.png';

                map.loadImage(imgUrl, function (error, image) {
                    if (!map.hasImage(markerIcon)) {
                        map.addImage(markerIcon, image);
                    }
                });

                if (map.getLayer(layerId) === undefined) {
                    map.addLayer({
                        id: layerId,
                        type: 'symbol',
                        source: source,
                        layout: {
                            'icon-image': markerIcon,
                            'icon-size': 1
                        }
                    });
                }
            });
        </script>
    </body>
</html>
Last updated June 15, 2023.