|
| 1 | + |
| 2 | +/** |
| 3 | + * Create DOM Marker and rotate |
| 4 | + */ |
| 5 | +function rotateDomMarker() { |
| 6 | + var domIconElement = document.createElement('div'), |
| 7 | + interval, |
| 8 | + counter = 0; |
| 9 | + |
| 10 | + // set the anchor using margin css property depending on the content's (svg element below) size |
| 11 | + // to make sure that the icon's center represents the marker's geo positon |
| 12 | + domIconElement.style.margin = '-20px 0 0 -20px'; |
| 13 | + |
| 14 | + // add content to the element |
| 15 | + domIconElement.innerHTML = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40"> |
| 16 | + <path d="m0.812665,23.806608l37.937001,-22.931615l-21.749812,38.749665l1.374988,-17.749847l-17.562177,1.931797z" |
| 17 | + fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> |
| 18 | + </svg>`; |
| 19 | + |
| 20 | + // create dom marker and add it to the map |
| 21 | + marker = map.addObject(new H.map.DomMarker({lat: 50.90978, lng: 10.87203}, { |
| 22 | + icon: new H.map.DomIcon(domIconElement, { |
| 23 | + onAttach: function(clonedElement, domIcon, domMarker) { |
| 24 | + var clonedContent = clonedElement.getElementsByTagName('svg')[0]; |
| 25 | + |
| 26 | + // set last used value for rotation when dom icon is attached (back in map's viewport) |
| 27 | + clonedContent.style.transform = 'rotate(' + counter + 'deg)'; |
| 28 | + |
| 29 | + // set interval to rotate icon's content by 45 degrees every second. |
| 30 | + interval = setInterval(function() { |
| 31 | + clonedContent.style.transform = 'rotate(' + (counter += 45) + 'deg)'; |
| 32 | + }, 1000) |
| 33 | + }, |
| 34 | + onDetach: function(clonedElement, domIcon, domMarker) { |
| 35 | + // stop the rotation if dom icon is not in map's viewport |
| 36 | + clearInterval(interval); |
| 37 | + } |
| 38 | + }) |
| 39 | + })); |
| 40 | +} |
| 41 | + |
| 42 | +/** |
| 43 | + * Boilerplate map initialization code starts below: |
| 44 | + */ |
| 45 | + |
| 46 | +// set up containers for the map + panel |
| 47 | +var mapContainer = document.getElementById('map'), |
| 48 | + routeInstructionsContainer = document.getElementById('panel'); |
| 49 | + |
| 50 | +//Step 1: initialize communication with the platform |
| 51 | +// In your own code, replace variable window.apikey with your own apikey |
| 52 | +var platform = new H.service.Platform({ |
| 53 | + apikey: window.apikey |
| 54 | +}); |
| 55 | + |
| 56 | +var defaultLayers = platform.createDefaultLayers(); |
| 57 | + |
| 58 | +//Step 2: initialize a map - this map is centered over Berlin |
| 59 | +var map = new H.Map(mapContainer, |
| 60 | + defaultLayers.vector.normal.map,{ |
| 61 | + center: {lat: 50.90978, lng: 10.87203}, |
| 62 | + zoom: 6, |
| 63 | + pixelRatio: (window.devicePixelRatio && window.devicePixelRatio > 1) ? 2 : 1 |
| 64 | +}); |
| 65 | +// add a resize listener to make sure that the map occupies the whole container |
| 66 | +window.addEventListener('resize', function () { |
| 67 | + map.getViewPort().resize(); |
| 68 | +}); |
| 69 | + |
| 70 | +//Step 3: make the map interactive |
| 71 | +// MapEvents enables the event system |
| 72 | +// Behavior implements default interactions for pan/zoom (also on mobile touch environments) |
| 73 | +var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); |
| 74 | + |
| 75 | +// Create the default UI components |
| 76 | +var ui = H.ui.UI.createDefault(map, defaultLayers); |
| 77 | + |
| 78 | +// Now create DOM Marker and rotate it's content |
| 79 | +rotateDomMarker(); |
0 commit comments