JavaScript Maps SDK

Markers and Routes

Click at least two locations on the map and then run routes between those locations. 

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

            #pick-on-map {
                top: 50px;
                position: absolute;
                background: #fff;
                padding: 8px;
                font-family: 'Open Sans', sans-serif;
            }

            #pick-on-map span {
                color: #576571;
                line-height: 32px;
                display: inline-block;
                vertical-align: bottom;
            }

            #geocodeCtrl .button {
                background-image: url('https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png');
                height: 22px !important;
                width: 22px !important;
                border: 1px solid transparent;
                display: inline-block;
            }

            #geocodeCtrl .active {
                background-color: #9fb7c8;
                border: 1px solid #7f92a0;
            }

            #geocodeCtrl .inactive {
                background-repeat: no-repeat;
                background-position: center;
                cursor: pointer;
            }

            .marker-icon {
                background-image: url('https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png');
                background-repeat: no-repeat;
                width: 21px;
                height: 25px;
                cursor: pointer;
            }
        </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>

        <div id="pick-on-map">
            <div id="geocodeCtrl" onclick="toggle()">
                <div id="iconDiv" class="inactive button" title="Click map to find an address."></div>
                <span>Pick on Map</span>
            </div>
            <button type="button" onclick="runRoute()">Run Route</button>
            <button type="button" onclick="clearRouteStops()">Clear</button>
        </div>

        <script>
            // Click on Pick on Map blue marker icon to enable adding stops on the map.
            // After adding 2 or more stops, click Run Route to generate a route.
            // Click Clear to remove all routes.
            // Click on style radio button to switch map style.

            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            let pickOnMapEnabled = false;
            let routeCounter = 0;

            function toggle() {
                const iconDiv = document.getElementById('iconDiv');
                iconDiv.classList.toggle('active');
                iconDiv.classList.toggle('inactive');
                pickOnMapEnabled = !pickOnMapEnabled;
            }

            function randomColor() {
                const r = Math.round(Math.random() * 255);
                const g = Math.round(Math.random() * 255);
                const b = Math.round(Math.random() * 255);
                const color = `rgb(${r}, ${g}, ${b})`;
                return color;
            }

            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: 12 // starting zoom
            });

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

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

            let markers = [];
            let routes = [];
            map.on('click', function (e) {
                if (pickOnMapEnabled === true) {
                    const el = document.createElement('div');
                    el.className = 'marker-icon';
                    const marker = new TrimbleMaps.Marker({
                        element: el,
                        draggable: true
                    })
                    .setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map);
                    markers.push(marker);
                }
            });

            function runRoute() {
                routeCounter++;
                if (markers.length < 2) {
                    alert('Need at least 2 stops to run a route.');
                    return;
                }
                const stops = [];
                for (const marker of markers) {
                    var ll = marker.getLngLat();
                    stops.push(ll);
                }
                const route = new TrimbleMaps.Route({
                    routeId: `myRoute_${routeCounter}`,
                    routeColor: randomColor(),
                    stops: stops,
                    routeType: TrimbleMaps.Common.RouteType.PRACTICAL,
                    reportType: [
                        TrimbleMaps.Common.ReportType.MILEAGE
                    ]
                }).addTo(map);
                routes.push(route);

                route.once('route', function (e) {
                    // Remove markers
                    for (const marker of markers) {
                        marker.remove();
                    }
                    markers = [];
                });
                route.once('report', function (reports) {
                    // console.log(reports);
                });
            }

            function clearRouteStops() {
                // Remove markers
                for (const marker of markers) {
                    marker.remove();
                }
                markers.splice(0, markers.length);
                // Remove route if there is one
                for (const route of routes) {
                    route.remove();
                }
                routes.splice(0, routes.length);
            }
        </script>
    </body>
</html>
Last updated June 15, 2023.