Is it possible to enhance Lasso Selection within the Here Maps JS platform?

I am eager to implement Lasso Selection functionality on Here Maps.

In my previous projects, I successfully developed a feature for drawing polygons on the map. By capturing pointermove and pointerdown events, I was able to update the H.map.Polyline as the pointer moved and place an H.map.Marker when the user clicked. Finally, I added an H.map.Polygon to complete the shape. For a demo, you can check out this link: Polygon Drawing

Now, I want to incorporate Lasso Selection, a method that allows users to freely draw shapes for selection. However, I am uncertain about how to approach this since the lines are not necessarily straight in this technique. To see an example of Lasso Selection, you can visit this link: Lasso Example

Can anyone guide me on creating a free-form (non-geometric) drawing tool like Lasso Selection on Here Maps? Which component from H.map should I utilize for this purpose?

javascriptmapshere-apiheremapshere-olp

Answer №1

The sample demonstration you provided features an SVG element using a <path> composed of numerous small segments.

Displayed below is the lasso line I sketched: https://i.sstatic.net/btfxf.jpg

You will notice that the lasso consists of multiple linear sections.

This particular SVG component generates the visual representation of 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>

This implies that you can utilize the same method of rendering already in use, but with more frequent placement of points. To start off, consider setting up an event listener for the 'pointermove' event, and add a new point to the polyline each time the pointer moves a distance greater than, let's say, 40px from the preceding point.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my function to return undefined instead of an array?

I have been working on a function to query my database and retrieve specific details for the selected item. While it successfully finds the items, it seems to be returning undefined. var recipefunc = function(name) { Item.find({name: name}, function ...

javascriptnode.jsexpressmongoose

How to send Multipart form data with a string payload

Many suggestions in regards to this issue recommend utilizing some form of FormData within nodejs for building a multipart form. However, I am seeking to achieve the same result without relying on the FormData library. Instead, I aim to use only request h ...

javascriptnode.jstypescripthttp

Using the textbox input to trigger an alert message

Just starting out with JavaScript and I'm attempting to create an alert box that not only displays the message "Thank You For Visiting" when you click the Enter button, but also includes the name entered into the text box. While I have successfully im ...

javascriptjqueryfunctionvar

Using Selenium to handle asynchronous JavaScript requests

Having recently started working with Selenium and JavaScript callback functions, I've encountered a problem that I can't seem to solve on my own. My issue revolves around needing to retrieve a specific variable using JavaScript. When I manually i ...

javascriptfunctionseleniumasynchronouscallback

Managing Datatable with a dynamic header and data is an essential skill that can greatly enhance

I am struggling to handle the Datatable for different header column names with data from my controller. I am passing table headers column name and table data value from my controller. Although I am able to access columns in json within the drawCallback f ...

javascriptphpjquerydatatable

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

javascriptphphtmlvariables

The server is unable to process the request for /path

After browsing various posts, I am still unable to identify the root cause of my issue. I am developing a donation page for an organization and need to verify if PayPal integration is functioning correctly. The error I am encountering lies between my form ...

javascripthtmlnode.jsforms

Encountered a problem while trying to install using npm install

Encountering an error while running npm install on Ubuntu 12.04: Here is a snippet from my npm-debug.log showing where the errors occur: ... (contents of npm-debug.log) ... This is my package.json: { "name": "www", "version": "0.0.1", /"p ...

javascriptnode.jsubuntunpmyeoman

Sending postMessage during the beforeunload event does not work as expected

When postMessage() is triggered within the beforeunload window event in an Ionic 2 browser, I've noticed that the message doesn't make it to the parent. However, if the same message is sent during the unload or load event, it is received successf ...

javascripteventsiframeionic2message

The function or method 'uploadify' is not compatible with this object

I am encountering an issue while attempting to utilize the jQuery uploadify functions within my aspx page. Upon the page load and execution of $(document).ready, an exception is triggered. It appears that, for some unknown reason, the FileUpload1 control i ...

javascriptjqueryasp.net.netuploadify

Struggling to implement my reusable React component within a React Bootstrap modal

I have developed a reusable textarea React component: import React from 'react'; import '../form-input/form-input.styles.scss'; const TextAreaComponent = ({ handleChange, label, ...otherProps }) => ( <div className="group"> ...

javascriptreactjsecmascript-6react-bootstrapreact-bootstrap4-modal

What is the best way to display the currently selected value in a Vue select drop down?

Is there a way to make the selected item in a custom component dropdown appear, similar to this Vue.js question? I have debug output within my single file component (SFC). <script> export default { props: ['modelValue', 'options&apos ...

javascriptvue.js

In React, the constant always has a default value of "Object : Default"

My current project involves using SlateJS and I am encountering an issue when trying to load data into a const using: imgData = data.get("file"); Everything works as expected if React is not imported, but once it is included, the object contains unexpecte ...

javascriptreactjsecmascript-6

Opening the identical document

In my coding scenario, I am programmatically writing to a text file using Java while simultaneously attempting to read from the same file using jQuery. Unfortunately, I am encountering an issue where jQuery is unable to detect the updated content whenever ...

javajavascriptjquery

Having difficulty transferring navigation props between screens using react-navigation

Within my ContactList component, I have utilized a map to render various items. Each item includes a thumbnail and the desired functionality is that upon clicking on the thumbnail, the user should be directed to a new screen referred to as UserDetailsScree ...

javascriptreactjstypescriptreact-nativereact-navigation

Is there a way to prevent an external script from making changes to an inline style?

There is a mysterious script running on a page that seems to be controlling the height of an inline style. The source of this script modifying the height property is unknown. <div class="vgca-iframe-wrapper wpfa-initialized" style="heigh ...

javascripthtmlcss

`Vue JS table with Boostrap styling showcasing a loading indicator for busy state`

Issue: I need to show a loading icon while waiting for the table to load. https://i.sstatic.net/kRCbL.png I am utilizing Boostrap-vue JS, which is built on top of Bootstrap, and VueJS's "b-table" component to display approximately 3000 rows in a tabl ...

javascriptvue.jsbootstrap-4

Trouble with Callback firing in Select2's 'Infinite Scroll with Remote Data' feature

After reviewing the tutorial on the Select2 project page, I am implementing a feature to load additional records as the user scrolls to the end of the results. <script> $(document).ready(function() { $('#style_full_name').select2({ ...

javascriptruby-on-railsajaxjquery-select2

Utilizing nested array object values in ReactJS mappings

My JSON API is set up to provide a data structure for a single record, with an array of associations nested within the record. An example of the response from the api looks like this: { "name":"foo", "bars":[ { "name":"bar1" ...

javascriptjsonreactjs

Customize Link Appearance Depending on Current Section

Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup: <div id="topNav"> <ul> <li><a href="#contact">Contac ...

javascriptjqueryhtmlcssviewport