Draggable Marker

1667
4
03-17-2022 08:07 PM
Tarak-Kar
Occasional Contributor

I need to have a draggable marker on the map something like how it is working in the example below - 

https://developer.here.com/documentation/examples/maps-js/markers/draggable-marker 

Thanks

0 Kudos
4 Replies
ReneRubalcava
Honored Contributor

Here is a sample of how to do this on a hold event.

https://codepen.io/odoe/pen/bLEroK?editors=0010

  view.on("hold", ({ mapPoint }) => {
    view.hitTest(view.toScreen(mapPoint)).then((hitResult) => {
      if (!hitResult.results[0].graphic) return;
      console.log("hold event, now drag mouse to move graphic");
      pointGraphic.symbol = selectSymbol;
      const pausePan = view.on("drag", stop);
      const move = view.on("pointer-move", updateGraphic);
      const up = view.on("pointer-up", cleanUp);
      handlers.push(pausePan);
      handlers.push(move);
      handlers.push(up);
    });
  });
KrishnaReddyRanabothu
New Contributor

Hi @ReneRubalcava,

I am trying in indoor map on floors, if I do drag and drop on floor it is going to ground floor,  How can I place on floor.

Thanks!

Krishna

 

0 Kudos
RussellMGreen
Emerging Contributor

@ReneRubalcava how would you make the marker draggable without having to "long press" (hold) the marker? I'm looking for standard marker drag/drop behavior (hover over marker, get pointer, click and drag marker).

 

Thanks!

0 Kudos
ReneRubalcava
Honored Contributor

You'd need to add some logic to handle when you click to start moving it and click to stop. Here's an updated demo.

https://codepen.io/odoe/pen/VwVrxBJ?editors=0010

    if (pause) {
      handlers.forEach((a) => a.remove());
      handlers.length = 0;
      pause = false;
      return;
    };