HERE Maps - Cannot zoom in at the same time the map is being centered

Question

I think I found a bug:

I'm trying to create a live view using web sockets and I need some advice. This is the documentation https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation (using only one marker) and the issue is:

If I set the center of the map to be equal to the marker coords on each step (onStep), I cannot zoom in properly.

Here is the piece of code (see line 4):

const animateMarkerPosition = (marker, nextCoord) => {
        const onStep = (coord) => {
            marker.setGeometry(coord);
            // I cannot zoom in properly when below line is uncommented
            // setCenter(marker.getGeometry());
        }
 
        const onComplete = (coord) => {
            setCenter(marker.getGeometry());
            firstZoomIn();
        }
 
        ease(
            marker.getGeometry(),
            nextCoord,
            1000,
            onStep,
            onComplete
        );
    }
 
    const ease = (
        startCoord = { lat: null, lng: null },
        endCoord = { lat: null, lng: null },
        durationMs = 1000,
        onStep = () => { },
        onComplete = () => { },
    ) => {
        let raf = function (f) { window.setTimeout(f, 16) },
            stepCount = (durationMs / 16) || 1,
            valueIncrementLat = (endCoord.lat - startCoord.lat) / stepCount,
            valueIncrementLng = (endCoord.lng - startCoord.lng) / stepCount,
            sinValueIncrement = Math.PI / stepCount,
            currentValueLat = startCoord.lat,
            currentValueLng = startCoord.lng,
            currentSinValue = 0;
 
        function step() {
            currentSinValue += sinValueIncrement;
            currentValueLat += valueIncrementLat * (Math.sin(currentSinValue) ** 2) * 2;
            currentValueLng += valueIncrementLng * (Math.sin(currentSinValue) ** 2) * 2;
 
            if (currentSinValue < Math.PI) {
                onStep({ lat: currentValueLat, lng: currentValueLng });
                raf(step);
            } else {
                onStep(endCoord);
                onComplete(endCoord);
            }
        }
 
        raf(step);
    }

score 0 · Answer 1 · answered Aug 18 '20 at 14:43

// I cannot zoom in properly when below line is uncommented
// setCenter(marker.getGeometry());

You can't zoom in/out and panning map too (i hope you talk about interactively zoom in?) because setCenter method is running in the loop in your program and this blocks any other panning/zoomin events of the map while each invoked setCenter is not finished. I hope also that you invoke setCenter only for one marker and not for all markers.

See please reworked example https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation on https://jsfiddle.net/vjw9o2dh/ there was changed by me in line 86 that calls setCenter only for first marker:

function updateMarkerPositions() {
  markers.forEach(function(marker, idx) {
    // get random position 0 - 450km from map's center in random direction
    let randomPoint = map.getCenter().walk(Math.random() * 360, Math.random() * 450000);

    // update marker's position within ease function callback
    ease(
      marker.getGeometry(),
      randomPoint,
      4000,
      function(coord) {
        marker.setGeometry(coord);
        if(idx == 0) map.setCenter(coord, false);
      }
    )
  })
}

In above example also doesn't work properly a panning map because during the animation is changed the center of map multiple times.

Yes, it's interactive zoom in and yes, it's only for a single marker. What is happening in your fiddle [link](https://jsfiddle.net/vjw9o2dh/) is the same situation I'm getting through, you cannot interactively zoom in, it gets kind of stuck. What I'm trying to do is a live view using sockets, so every second I get new coordinates and do setCenter, but as you said, I cannot zoom in while setCenter is being executed. So this is a bug, right? Both functionalities should be independent. — Andres Figueira, Aug 31 '20 at 10:51

HERE Maps - Cannot zoom in at the same time the map is being centered

1 Answers1