Well, I’m programming an app similar to Uber or Cabify, when you share your location or route, so that the people you send it to can see the route in real time.

I have not used Here for this, more than anything I have used it to show static locations and so on, I have been programming this in ReactJS and Python, I followed the Here instruction in ReactJS (which is very small) and what I do is that when I detect a change in the vehicle’s coordinates and recalculate the route. I don’t know if there is a better way to do it or a more optimal one, but I do it this way because I need to calculate the estimated time and the Routing API gives it to me.

The problem is that every time it recalculates the route, it centers the map and moves it to a location, but I don’t want it to do that, but just move the points and that’s it, I haven’t found documentation for that, just a function getViewModel().setLookAtData, which moves the map, but it doesn’t work, I tried to save the previous zoom and position and load it after calculating the route, but it doesn’t work for me, what could I do?

I recorded a video that I think best exemplifies the problem, thanks.

Video

Working with React

      var zoom = map.getZoom();
      var center = map.getCenter();
      const sections = response.routes[0].sections;
      for (const section of sections) {
        var horaestimada = segundosAHorasMinutos(section.travelSummary.duration);
        console.log(`Duración del viaje: ${horaestimada}`);
        dispatch(setETA(horaestimada));
      }
      const lineStrings = [];
      sections.forEach((section) => {
          // convert Flexible Polyline encoded string to geometry
          lineStrings.push(H.geo.LineString.fromFlexiblePolyline(section.polyline));
      });
      const multiLineString = new H.geo.MultiLineString(lineStrings);
      const bounds = multiLineString.getBoundingBox();

      // Create the polyline for the route
      const routePolyline = new H.map.Polyline(multiLineString, {
          style: {
              lineWidth: 5
          }
      });

      // Remove all the previous map objects, if any
      map.removeObjects(map.getObjects());
      // Add the polyline to the map
      var htmlbody
      for (const tripulante of tripulacion) {
        htmlbody = '<p class="body2Text"> <span> '+tripulante.cargo+': </span> ' + tripulante.nombre+ ' - ' + tripulante.documento+'</p>';
      }
      map.addObject(routePolyline);
      map.addObjects([
          // Add a marker for the user
          new H.map.Marker(start, {
              icon: getMarkerIcon(estado),
              data: {
                message: '<div class="body2Title" style="width: 300px;"><p>'+nombre+'</p><hr style="margin-top: 0px;"></span>' + htmlbody,
                idmarcador: 'xd',
                // Puedes agregar más propiedades personalizadas aquí
              }
          }),
          // Add a marker for the selected restaurant
          new H.map.Marker(destination, {
              icon: getMarkerIcon(null),
              data: {
                message: '<div class="body2Title" style="width: 300px;"><p> Destino </p><hr style="margin-top: 0px;"></span>',
                idmarcador: 'xd',
                // Puedes agregar más propiedades personalizadas aquí
              }
          })
      ]);

I tried to save the previous zoom and position and load it after calculating the route, but it doesn’t work for me.

I also tried to keep the map position like this: map.getViewModel().setLookAtData({bounds: map.getViewModel().getLookAtData().bounds}, true);