<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.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>