Is there a way to develop Lasso Selection in Here Maps JS?

Question

I want to develop Lasso Selection on Here Maps.

I had previously made developments for drawing polygons on the map. Simply put, by listening to pointermove and pointerdown events; As the pointer moved, I updated the H.map.Polyline and put an H.map.Marker on the clicked location on the user click event. In the last stage, I placed an H.map.Polygon. You can follow the link for the demo. Polygon Drawing

What I want to do now is the selection method known as Lasso Selection. I don't know where to start because the lines are not straight in this drawing method. You can also look at this link for the Lasso Selection example. Lasso Example

How can I create a free format(non geometric) drawing like Lasso Selection on Here Maps? Which component can I use in H.map?

Answer 1

The demo you linked to uses an SVG <path> with many small steps.

Here is a lasso line I drew:

You can see that the lasso is built up of many straight lines.

This is the SVG element that renders the lasso:

<path
  class="leaflet-interactive"
  stroke="#00C3FF"
  stroke-opacity="1"
  stroke-width="0"
  stroke-linecap="round"
  stroke-linejoin="round"
  fill="#00C3FF"
  fill-opacity="0.2"
  fill-rule="evenodd"
  d="M115 75L128 62L166 51L184 51L198 57L205 63L213 63L222 59L234 60L258 76L269 91L275 111L275 133L266 153L254 164L212 165L198 162L188 162L175 156L164 141L145 124L135 117L124 113L116 108z"></path>

That means you can use the same rendering technique you're already using, you just need to place points more frequently. As a starting point, you could register an event listener for the 'pointermove' event, then place a new polyline point every time the every time the pointer has a distance greater than, let's say, 40px from the previous polyline point.