Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

117
Views
Here maps draggable route

I'm creating a map, then a route, using RouteService V8, so i get the result from routeservice, break in sections to create a polyline and then show in map. I would like to know how can i make this route draggable like the wego plataform of here when i set destinations and can change the routing by clincking in the line and drag to change. I saw a question like mine, but i wasnt able to understand the code. This Question I Didnt understand what alternatives are and how to handle a draggable polyline, note that i dont want do change my origin, destination point and neither my vias, just the 'leg' betwen the points.

My code to create and display the route:

var map;
var platform = new H.service.Platform({ apikey: mykey });
var defaultLayers = platform.createDefaultLayers();
map = new H.Map(document.getElementById("map"), defaultLayers.vector.normal.map, {
  center: { lat: centerLat, lng: centerLong },
  zoom: 13,
  pixelRatio: window.devicePixelRatio || 1,
});

window.addEventListener("resize", () => map.getViewPort().resize());
behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 
uiMapa = H.ui.UI.createDefault(map, defaultLayers);

map.addEventListener( "tap",function (evt) {

},false);
...
function genereteRoute() {

  var routingParameters = {
    routingMode: "fast",
    transportMode: "car",
    origin: origin,
    via: new H.service.Url.MultiValueQueryParameter(vias),
    destination: destination,
    return: "polyline,summary,routeHandle",
  };

  // CALLBACK
  var onResult = function (result) {
    console.log("result:" + JSON.stringify(result));
    if (result.routes.length) {
      result.routes[0].sections.forEach((section) => {
        let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
        let routeLine = new H.map.Polyline(linestring, {
          style: { strokeColor: "blue", lineWidth: 3 },
        });
        linhaRota.push(routeLine);
        map.addObjects([routeLine]);
      });
    }
      calcularTempoDistancia(result.routes[0]);
  };
  var router = platform.getRoutingService(null, 8);
  router.calculateRoute(routingParameters, onResult, function (error) {
    alert(error.message);
  });
 
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!