map.js

// Initialize platform with JS API KEY
var platform = new H.service.Platform({
    apikey: "YOUR_JS_API_KEY"
});
// initializing default layers for the map
var defaultLayers = platform.createDefaultLayers();
// rendering map within the container on the page
var map = new H.Map(
        document.getElementById('mapContainer'),
        defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
        {
            zoom: 11, // Initial zoom level of map
            center: {lat: 52.53086, lng: 13.38474} // Initial center of map
        });

// creating default UI for map
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Add basic map events like pan and zoom 
var mapEvents = new H.mapevents.MapEvents(map);
// Initialize for map behaviour on events
var behavior = new H.mapevents.Behavior(mapEvents);

// adjust tilt and rotation of the map
map.getViewModel().setLookAtData({
tilt: 60,
heading: 90
});



let positionIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21px" height="21px" viewBox="-0.5 -0.5 21 21"><defs/><g><ellipse cx="10" cy="10" rx="10" ry="10" fill="#009900" stroke="#000000" pointer-events="none"/><ellipse cx="10" cy="10" rx="3" ry="3" fill="#ffffff" stroke="#000000" pointer-events="none"/></g></svg>`


function getBrowserPosition(){

    if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                // console.log(position.coords);
                let browserPosition = {lat:position.coords.latitude, lng:position.coords.longitude};
                let posIcon = new H.map.Icon(positionIcon);
                let marker = new H.map.Marker(browserPosition,{icon:posIcon});
                map.addObject(marker);
            });
        } else {
            alert("Geolocation is not supported by this browser!");
    }
};

var imageIcon = new H.map.Icon('../img/robot.png');

// Add event listener:
map.addEventListener('tap', function(evt) {
    if(evt.target instanceof H.map.Marker){
        var bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
        // read custom data
        content: evt.target.getData()
        });
        // show info bubble
        ui.addBubble(bubble);
    }
    else{
        // Log 'tap' and 'mouse' events:
        let pointer = evt.currentPointer;
        let pointerPosition = map.screenToGeo(pointer.viewportX, pointer.viewportY);
        let pointerMarker = new H.map.Marker(pointerPosition,{icon:imageIcon,volatility:true}); 
        pointerMarker.draggable = true;
        pointerMarker.setData("I'm Here");
        map.addObject(pointerMarker);
    }  
        
});

function clickDragMarkers(map, behavior){
    // disable the default draggability of the underlying map
    // and calculate the offset between mouse and target's position
    // when starting to drag a marker object:
    map.addEventListener('dragstart', function(ev) {
        var target = ev.target,
            pointer = ev.currentPointer;
        if (target instanceof H.map.Marker) {
        var targetPosition = map.geoToScreen(target.getGeometry());
        target['offset'] = new H.math.Point(pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
        behavior.disable();
        }
    }, false);


    // re-enable the default draggability of the underlying map
    // when dragging has completed
    map.addEventListener('dragend', function(ev) {
        var target = ev.target;
        if (target instanceof H.map.Marker) {

            var circle = new H.map.Circle(target.getGeometry(), 10000);
            // Add the circle to the map:
            map.addObject(circle);
            behavior.enable();
        }
    }, false);

    // Listen to the drag event and move the position of the marker
    // as necessary
    map.addEventListener('drag', function(ev) {
        var target = ev.target,
            pointer = ev.currentPointer;
        if (target instanceof H.map.Marker) {
            let newTargetPosition = map.screenToGeo(pointer.viewportX - target['offset'].x, pointer.viewportY - target['offset'].y)
            target.setGeometry(newTargetPosition);
        }
    }, false);

}

getBrowserPosition();

clickDragMarkers(map, behavior);