text: 
  // 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);