Draggable Marker Popup
Add a draggable marker to the map.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.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; } </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> <script> // In this example, a draggable marker will be added to the map, and a popup will be attached to the marker. TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE'; const center = [-87, 38]; const map = new TrimbleMaps.Map({ container: 'map', // container id center: center, zoom: 8 }); // Create a popup const popup = new TrimbleMaps.Popup({ offset: 40 // move around to map 4 borders, you will see its location changes. }).setText('Draggable marker with a popup'); // Create a marker const marker = new TrimbleMaps.Marker({ draggable: true }).setLngLat(center) .setPopup(popup) .addTo(map); // Save the panel elements const lngElem = document.getElementById('longitude'); const latElem = document.getElementById('latitude'); lngElem.innerHTML = center[0].toFixed(6); latElem.innerHTML = center[1].toFixed(6); // Listen to the dragend event of the marker marker.on('dragend', function(e){ // Extract the lngLat object from the marker in the event const lngLat = e.target.getLngLat(); // Update the values in the panel lngElem.innerHTML = lngLat.lng.toFixed(6); latElem.innerHTML = lngLat.lat.toFixed(6); }); </script> </body> </html>
Draggable Marker Popup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.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; } </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> <script> // In this example, a draggable marker will be added to the map, and a popup will be attached to the marker. TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE'; const center = [-87, 38]; const map = new TrimbleMaps.Map({ container: 'map', // container id center: center, zoom: 8 }); // Create a popup const popup = new TrimbleMaps.Popup({ offset: 40 // move around to map 4 borders, you will see its location changes. }).setText('Draggable marker with a popup'); // Create a marker const marker = new TrimbleMaps.Marker({ draggable: true }).setLngLat(center) .setPopup(popup) .addTo(map); // Save the panel elements const lngElem = document.getElementById('longitude'); const latElem = document.getElementById('latitude'); lngElem.innerHTML = center[0].toFixed(6); latElem.innerHTML = center[1].toFixed(6); // Listen to the dragend event of the marker marker.on('dragend', function(e){ // Extract the lngLat object from the marker in the event const lngLat = e.target.getLngLat(); // Update the values in the panel lngElem.innerHTML = lngLat.lng.toFixed(6); latElem.innerHTML = lngLat.lat.toFixed(6); }); </script> </body> </html>