Custom HTML Marker
Customize a marker with an icon, label, tooltip, SVG icon or SVG content.<!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%; } .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> <script> // When a marker is added to a map, it does not append to the map canvas. It is fine for a marker to have SVG icon or content. // Markers are DIV DOM elements. More of them on a web page will impact the performance. TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE'; const center = [-87, 38]; const map = new TrimbleMaps.Map({ container: 'map', // container id center: center, zoom: 14 }); // 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).addTo(map); // 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]).addTo(map); // 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({ element: divElement }).setLngLat([-86.999998, 38.0052745]).addTo(map); </script> </body> </html>
Custom HTML Marker
<!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%; } .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> <script> // When a marker is added to a map, it does not append to the map canvas. It is fine for a marker to have SVG icon or content. // Markers are DIV DOM elements. More of them on a web page will impact the performance. TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE'; const center = [-87, 38]; const map = new TrimbleMaps.Map({ container: 'map', // container id center: center, zoom: 14 }); // 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).addTo(map); // 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]).addTo(map); // 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({ element: divElement }).setLngLat([-86.999998, 38.0052745]).addTo(map); </script> </body> </html>