Marker Styles
Marker styles change when you mouse over them.<!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%; } .cust-marker { width: 64px; height: 64px; } </style> </head> <body> <div id="map"></div> <script> // Marker styles change when mouse over or out. 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 }); // Create a marker with a label on top of an icon const el = document.createElement('div'); el.classList.add('cust-marker'); el.title = 'Marker with a label and an icon'; const htmlContent = '<div id="text">Green truck</div>' + '<div id="image" style="background: url(https://maps.alk.com/api/1.2/img/truck_green.png) no-repeat; height: 26px; width: 26px;"/>'; el.innerHTML = htmlContent; const marker = new TrimbleMaps.Marker({ draggable: false, anchor: 'top-left', // default: center, if width is too wide, you will see marker moves after zoom out. element: el }).setLngLat(center).addTo(map); function markerMouseOver(e) { let markerLabel = document.getElementById('text'); markerLabel.innerHTML = 'Red truck'; let image = document.getElementById('image'); image.setAttribute( 'style', 'background: url(https://maps.alk.com/api/1.2/img/truck_red.png) no-repeat; height: 26px; width: 26px;' ); }; el.addEventListener('mouseover', markerMouseOver); function markerMouseOut(e) { let markerLabel = document.getElementById('text'); markerLabel.innerHTML = 'Green truck'; let image = document.getElementById('image'); image.setAttribute( 'style', 'background: url(https://maps.alk.com/api/1.2/img/truck_green.png) no-repeat; height: 26px; width: 26px;' ); } el.addEventListener('mouseout', markerMouseOut); // Create the 2nd marker 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">1</text>' + '</svg>'; const svgContent = document.createElement('div'); svgContent.title = 'SVG content marker'; svgContent.innerHTML = content; const marker2 = new TrimbleMaps.Marker({ draggable: false, element: svgContent }).setLngLat([-87.0037998, 38.0022745]).addTo(map); let element = marker2.getElement(); function marker2MouseOver(e) { //get marker elements by tag name let c = this.getElementsByTagName('circle')[0]; let t = this.getElementsByTagName('text')[0]; //change fill color c.setAttribute('fill', '#F00'); //change text t.textContent = '2'; t.innerHTML = '2'; } let boundMarkerMouseOver = marker2MouseOver.bind(element); element.addEventListener('mouseover', boundMarkerMouseOver); function marker2MouseOut(e) { let c = this.getElementsByTagName('circle')[0]; let t = this.getElementsByTagName('text')[0]; c.setAttribute('fill', '#43A51B'); t.textContent = '1'; t.innerHTML = '1'; } let boundMarkerMouseOut = marker2MouseOut.bind(element); element.addEventListener('mouseout', boundMarkerMouseOut); </script> </body> </html>
Marker Styles
<!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%; } .cust-marker { width: 64px; height: 64px; } </style> </head> <body> <div id="map"></div> <script> // Marker styles change when mouse over or out. 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 }); // Create a marker with a label on top of an icon const el = document.createElement('div'); el.classList.add('cust-marker'); el.title = 'Marker with a label and an icon'; const htmlContent = '<div id="text">Green truck</div>' + '<div id="image" style="background: url(https://maps.alk.com/api/1.2/img/truck_green.png) no-repeat; height: 26px; width: 26px;"/>'; el.innerHTML = htmlContent; const marker = new TrimbleMaps.Marker({ draggable: false, anchor: 'top-left', // default: center, if width is too wide, you will see marker moves after zoom out. element: el }).setLngLat(center).addTo(map); function markerMouseOver(e) { let markerLabel = document.getElementById('text'); markerLabel.innerHTML = 'Red truck'; let image = document.getElementById('image'); image.setAttribute( 'style', 'background: url(https://maps.alk.com/api/1.2/img/truck_red.png) no-repeat; height: 26px; width: 26px;' ); }; el.addEventListener('mouseover', markerMouseOver); function markerMouseOut(e) { let markerLabel = document.getElementById('text'); markerLabel.innerHTML = 'Green truck'; let image = document.getElementById('image'); image.setAttribute( 'style', 'background: url(https://maps.alk.com/api/1.2/img/truck_green.png) no-repeat; height: 26px; width: 26px;' ); } el.addEventListener('mouseout', markerMouseOut); // Create the 2nd marker 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">1</text>' + '</svg>'; const svgContent = document.createElement('div'); svgContent.title = 'SVG content marker'; svgContent.innerHTML = content; const marker2 = new TrimbleMaps.Marker({ draggable: false, element: svgContent }).setLngLat([-87.0037998, 38.0022745]).addTo(map); let element = marker2.getElement(); function marker2MouseOver(e) { //get marker elements by tag name let c = this.getElementsByTagName('circle')[0]; let t = this.getElementsByTagName('text')[0]; //change fill color c.setAttribute('fill', '#F00'); //change text t.textContent = '2'; t.innerHTML = '2'; } let boundMarkerMouseOver = marker2MouseOver.bind(element); element.addEventListener('mouseover', boundMarkerMouseOver); function marker2MouseOut(e) { let c = this.getElementsByTagName('circle')[0]; let t = this.getElementsByTagName('text')[0]; c.setAttribute('fill', '#43A51B'); t.textContent = '1'; t.innerHTML = '1'; } let boundMarkerMouseOut = marker2MouseOut.bind(element); element.addEventListener('mouseout', boundMarkerMouseOut); </script> </body> </html>