Draggable Marker Popup
Add a draggable marker to the map.x
98
1
2
<html lang="en">
3
<head>
4
<meta charset="utf-8" />
5
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
6
<script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
7
<style>
8
body { margin: 0; padding: 0; }
9
10
#map {
11
position: absolute;
12
top: 0;
13
bottom: 0;
14
width: 100%;
15
}
16
17
.map-panel {
18
position: absolute;
19
width: 225px;
20
top: 10px;
21
left: 10px;
22
padding: 10px;
23
background-color: #fff;
24
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
25
font-family: Arial, Helvetica, sans-serif;
26
font-size: .85em;
27
}
28
29
.group {
30
padding: 3px 0;
31
}
32
33
.group .label {
34
display: inline-block;
35
width: 65px;
36
font-style: italic;
37
color: #888;
38
}
39
40
.group .value {
41
display: inline-block;
42
}
43
</style>
44
</head>
45
<body>
46
<div id="map"></div>
47
<div class="map-panel">
48
<div class="group">
49
<span class="label">Longitude:</span>
50
<span id="longitude" class="value"></span>
51
</div>
52
<div class="group">
53
<span class="label">Latitude:</span>
54
<span id="latitude" class="value"></span>
55
</div>
56
</div>
57
58
<script>
59
// In this example, a draggable marker will be added to the map, and a popup will be attached to the marker.
60
61
TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
62
const center = [-87, 38];
63
const map = new TrimbleMaps.Map({
64
container: 'map', // container id
65
center: center,
66
zoom: 8
67
});
68
69
// Create a popup
70
const popup = new TrimbleMaps.Popup({
71
offset: 40 // move around to map 4 borders, you will see its location changes.
72
}).setText('Draggable marker with a popup');
73
74
// Create a marker
75
const marker = new TrimbleMaps.Marker({
76
draggable: true
77
}).setLngLat(center)
78
.setPopup(popup)
79
.addTo(map);
80
81
// Save the panel elements
82
const lngElem = document.getElementById('longitude');
83
const latElem = document.getElementById('latitude');
84
lngElem.innerHTML = center[0].toFixed(6);
85
latElem.innerHTML = center[1].toFixed(6);
86
87
// Listen to the dragend event of the marker
88
marker.on('dragend', function(e){
89
// Extract the lngLat object from the marker in the event
90
const lngLat = e.target.getLngLat();
91
// Update the values in the panel
92
lngElem.innerHTML = lngLat.lng.toFixed(6);
93
latElem.innerHTML = lngLat.lat.toFixed(6);
94
});
95
</script>
96
</body>
97
</html>
98