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

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

            .map-panel {
                position: absolute;
                width: 225px;
                top: 10px;
                left: 10px;
                padding: 10px;
                background-color: #fff;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                font-family: Arial, Helvetica, sans-serif;
                font-size: .85em;
            }

            .group {
                padding: 3px 0;
            }

            .group .label {
                display: inline-block;
                width: 65px;
                font-style: italic;
                color: #888;
            }

            .group .value {
                display: inline-block;
            }

            .marker-label {
                cursor: pointer;
            }

            .marker-image {
                background-image: url('https://maps.alk.com/api/1.2/img/truck_green.png');
                background-repeat: no-repeat;
                width: 26px;
                height: 26px;
                cursor: pointer;
            }

            #marker {
                background-image: url('https://developer.trimblemaps.com/img/trimble-maps-division-logo.svg');
                width: 34px;
                height: 34px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div class="map-panel">
            <div class="group">
                <span class="label">Longitude:</span>
                <span id="longitude" class="value"></span>
            </div>
            <div class="group">
                <span class="label">Latitude:</span>
                <span id="latitude" class="value"></span>
            </div>
            <div class="group">
                <span class="label">Zoom:</span>
                <span id="zoom" class="value"></span>
            </div>
        </div>

        <script>
            // Markers will be hidden when zoom level is less than 13 or greater than 15.
            // When a marker changes to invisible, its opening popup will be closed.
            // After dragging, when a hidden marker is visible again, click on the marker, the popup shows at the correct location.
            // Known issue: If a marker is draggable, harder to trigger popup when mouse clicking.

            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const center = [-87, 38];
            const zoomLevel = 14;
            const map = new TrimbleMaps.Map({
                container: 'map', // container id
                center: center,
                zoom: zoomLevel
            });

            let markers = [];
            // Create a marker with a label on top of an icon
            const el = document.createElement('div');
            el.id = 'container';
            el.title = 'Marker with a label and an icon';
            const divLabel = document.createElement('div');
            divLabel.innerHTML = 'Green truck';
            divLabel.className = 'marker-label';
            el.appendChild(divLabel);
            const divIcon = document.createElement('div');
            divIcon.className = 'marker-image';
            el.appendChild(divIcon);

            const marker = new TrimbleMaps.Marker({
                draggable: true,
                element: el
            }).setLngLat(center)
                .setPopup(new TrimbleMaps.Popup({
                    offset: 24
                }).setText('This is a green truck.'))
                .addTo(map);
            markers.push(marker);

            // Create the popup
            const popup = new TrimbleMaps.Popup({
                offset: 24
            }).setText('This is a stop.');
            // Create a marker with SVG content
            const content = '<svg width="34" height="34" xmlns="http://www.w3.org/2000/svg">' +
                '<circle id="svgCircle" stroke="#FFF" fill="green" cx="16" cy="16" r="16" />' +
                '<text id="svgText" name="stopNumber" x="16" y="20" font-size="8pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="#FFF" textContent="1">Stop#</text>' +
                '</svg>';
            const svgContent = document.createElement('div');
            svgContent.title = 'SVG content marker';
            svgContent.innerHTML = content;
            const marker2 = new TrimbleMaps.Marker({
                draggable: true,
                element: svgContent
            }).setLngLat([-87.0037998, 38.0022745])
                .setPopup(popup)
                .addTo(map);
            markers.push(marker2);

            // Create a marker with SVG as background image
            const divElement = document.createElement('div');
            divElement.id = 'marker';
            divElement.title = 'SVG image as background';
            const marker3 = new TrimbleMaps.Marker({
                draggable: true,
                element: divElement
            }).setLngLat([-86.999998, 38.0052745])
                .setPopup(new TrimbleMaps.Popup({
                    offset: 24
                }).setText('This is Trimble logo.'))
                .addTo(map);
            markers.push(marker3);

            const markerClassName = 'trimblemaps-marker';
            setMarkerVisibility = (isVisible) => {
                var display = (isVisible) ? '' : 'none';
                //// If markers do not have any popup
                // let markers = document.getElementsByClassName(markerClassName);
                // for (let i = 0; i < markers.length; i++) {
                //     let marker = markers[i];
                //     marker.style.display = display;
                // }

                for (let i = 0; i < markers.length; i++) {
                    let marker = markers[i];
                    let popup = marker.getPopup();
                    if (isVisible === false && popup && popup.isOpen()) {
                        popup.remove(); // Remove popup from the map.
                    }
                    let el = marker.getElement();
                    el.style.display = display;
                }
            }

            // Save the panel elements
            const lngElem = document.getElementById('longitude');
            const latElem = document.getElementById('latitude');
            const zoomElem = document.getElementById('zoom');
            lngElem.innerHTML = center[0].toFixed(6);
            latElem.innerHTML = center[1].toFixed(6);
            zoomElem.innerHTML = zoomLevel.toFixed(6);

            // Hide markers when zoom level is <= 13 or >= 15.
            map.on('zoomend', (e) => {
                let zoom = map.getZoom();
                zoomElem.innerHTML = zoom.toFixed(6);
                if (zoom <= 13 || zoom >= 15) {
                    setMarkerVisibility(false);
                }
                else {
                    setMarkerVisibility(true);
                }
            });

            // Mouse move on the map, mouse position gets updated.
            map.on('mousemove', (e) => {
                // Update the values in the panel
                lngElem.innerHTML = e.lngLat.lng.toFixed(6);
                latElem.innerHTML = e.lngLat.lat.toFixed(6);
            })
        </script>
    </body>
</html>