Choppy camera movement and lagging

[allafridman]

What can be done to avoid the choppiness and lagging in camera movements when zooming and moving to the marker?

[usefulthink]

That depends on what the reason for that is, hard to tell without anything to look at...
What does your Map component look like, which props and features are you using etc? Is there anything special happening on the map?

[allafridman]

Here is my map component: I have a list of Locations and moving my camera from one location to another.

import * as React from 'react';

import type { IMFSLocationMapProps } from './IMFSLocationMapProps';
// import { escape } from '@microsoft/sp-lodash-subset';
import { ControlPosition, MapControl ,APIProvider, InfoWindow, Map, MapCameraChangedEvent, useMap , useMapsLibrary, AdvancedMarker, useAdvancedMarkerRef, Marker, Pin}  from '@vis.gl/react-google-maps';
import { BaseButton, IDropdownOption, Position, ProgressIndicator } from '@fluentui/react';
import { Easing, Tween, update } from '@tweenjs/tween.js';

//import { IStackTokens, Stack } from '@fluentui/react/lib/Stack';
//import { PropertyPaneTextField } from '@microsoft/sp-property-pane';
import locationStyles from './MFSLocationMap.module.scss';
import MapsIntro from './MapsIntro';
import MFSTopStrip from './MFSTopStrip';
import MFSSpeednRestart from './MFSSpeednRestart';
import MFSCard from './MFSCard';
import { ControlStyle } from 'azure-maps-control';
import { isMobile } from 'react-device-detect';

interface IInputProps {
  height: string,
  apiKey: string,
  speed: number;
  locationList: any[];
  listName: string;
  mapID:string;
  introText:string;
}



export default ({height,apiKey,locationList,listName, mapID,introText}: IInputProps) => {

  const map = useMap();
  var mapDim = {
    height: map?.getDiv().clientHeight,
    width: map?.getDiv().clientWidth
   }

  const [backToIntro, setValue] = React.useState(false);
  const [timerLength, setTimerLength] = React.useState<number>(11);
  const [zoomTransition, setZoomTransition] = React.useState<boolean>(false);
  const zoomTransitionRef = React.useRef<boolean>(false);
  const [curLoc, setLoc] = React.useState<number>(0);
  const cameraOptions = React.useMemo<google.maps.CameraOptions>(() => {
    return {
      zoom: 10,
      center: isMobile?{lat: locationList[0].lat-0.2 , lng: locationList[0].lng }:{lat: locationList[0].lat, lng: locationList[0].lng },
      tilt: 0,
      heading: 0
    }
  }, []);
  const [percentComplete, setPercentComplete] = React.useState(0);
  const percentCompleteRef = React.useRef(0);
  const [speed, setSpeed] = React.useState<number>(1);
  const [pause, setPause] = React.useState<boolean>(false);
  const speedRef = React.useRef(speed);
  const [zoom, setZoom] = React.useState(10);


  React.useEffect(()=>{
    speedRef.current=speed;
},[speed])
  React.useEffect(() => {
    // Set Timer
    setPercentComplete(0);
    percentCompleteRef.current = 0;
    
    setInterval(() => {
      if (zoomTransitionRef.current) return;
      var newtime=timerLength/speedRef.current;
      percentCompleteRef.current = percentCompleteRef.current + (100 / newtime/ 5 / 100);
      setPercentComplete(percentCompleteRef.current)
     
    }, 200);
  }, [])


  const animate = (time: number) => {
    requestAnimationFrame(animate);
    update(time);
  }
  const geomLib = useMapsLibrary('geometry');

  const smoothTransition = (nextloc: number) => {
    setZoomTransition(true);
    zoomTransitionRef.current = true;
    speedRef.current=speed;
    console.log(cameraOptions.center?.lat);

    var curLatlng = new google.maps.LatLng(locationList[curLoc].lat, locationList[curLoc].lng);
    var nextLatlng = new google.maps.LatLng(locationList[nextloc].lat, locationList[nextloc].lng);
  
    var dist= google.maps.geometry.spherical.computeDistanceBetween (curLatlng, nextLatlng);

    var markers = [];
    markers.push(curLatlng);
    markers.push(nextLatlng);
    var bounds = new google.maps.LatLngBounds(); 
         
   for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i]);
    }
    var newzoom=getBoundsZoomLevel(bounds, mapDim);
    if (newzoom < 6)
      newzoom-= 1;
    else
     newzoom-= 2
    var zoomTime=400*(9-newzoom);
   
    var t=Math.abs(locationList[nextloc].lat - locationList[curLoc].lat) * 10;
    if(curLatlng.lat()!==nextLatlng.lat() &&curLatlng.lng()!==nextLatlng.lng())
    {
        new Tween(cameraOptions) 
        .to({ zoom: newzoom }, zoomTime) 
          .easing(Easing.Sinusoidal.In)
          .onUpdate(() => {
           // map?.setOptions({mapTypeId:'satellite'});
            map?.moveCamera(cameraOptions);
          })
          .start().onComplete(() =>
            new Tween(cameraOptions) 
          .to({  center: isMobile?{ lat: locationList[nextloc].lat-0.2, lng: locationList[nextloc].lng }:{ lat: locationList[nextloc].lat, lng: locationList[nextloc].lng } }, zoomTime/2)
              .onUpdate(() => {
                cameraOptions.tilt=t;
                map?.moveCamera(cameraOptions);
              })
              .start().onComplete(() =>
                new Tween(cameraOptions)
              .to({ zoom: 10, center: isMobile?{ lat: locationList[nextloc].lat-0.2, lng: locationList[nextloc].lng }:{ lat: locationList[nextloc].lat, lng: locationList[nextloc].lng } }, zoomTime) 
                  .easing(Easing.Sinusoidal.Out)
                  .onUpdate(() => {
                    cameraOptions.tilt=t;
                    map?.moveCamera(cameraOptions);
                    map?.setOptions({mapTypeId:'hybrid'});
                  })
                  .start().onComplete(() => {
                    setZoomTransition(false);
                    zoomTransitionRef.current = false;
                    cameraOptions.center = isMobile?{ lat: locationList[nextloc].lat-0.2, lng: locationList[nextloc].lng }:{ lat: locationList[nextloc].lat, lng: locationList[nextloc].lng };
                    
                  })
              )// Start the tween immediately.
          );
    }else{
      setZoomTransition(false);
      zoomTransitionRef.current = false;
      cameraOptions.center = isMobile?{ lat: locationList[nextloc].lat-0.2, lng: locationList[nextloc].lng }:{ lat: locationList[nextloc].lat, lng: locationList[nextloc].lng };
    }
    requestAnimationFrame(animate);
  }

  const goToNext = () => {
    //const oldLoc = curLoc;
    const nextLoc = curLoc === locationList.length - 1 ? 0 : curLoc + 1;
    percentCompleteRef.current = 0;
    setPercentComplete(0);
    setLoc(nextLoc);
    // console.log(map);
    smoothTransition(nextLoc);
  }
  const goToPrev = () => {
    //const oldLoc = curLoc;
    const prevLoc = (curLoc === locationList.length - 1 ||curLoc === 0)? 0 : curLoc - 1;
    percentCompleteRef.current = 0;
    setPercentComplete(0);
    setLoc(prevLoc);
    // console.log(map);
    smoothTransition(prevLoc);
  }

  const [selLoc, setSelectedLoc] = React.useState("");
  const goToSelectedLoc = (selLoc:any) => {
    setSelectedLoc(selLoc)
    percentCompleteRef.current = 0;
    setPercentComplete(0);
    setLoc(selLoc);
    smoothTransition(selLoc);
  }

  React.useEffect(() => {
    if (percentComplete >= 1 && percentCompleteRef.current >= 1) {
      percentCompleteRef.current = 0;
      setPercentComplete(0);
      goToNext();
    }
  }, [percentComplete]);

  function pauseJourney(): void {
    zoomTransitionRef.current=!zoomTransitionRef.current;
  }
  function handleClick(){
    (setValue(true))
  }
  
  function latRad(lat:any) {
    var sin = Math.sin(lat * Math.PI / 180);
    var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
    return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}

function zoomCalc(mapPx:any, worldPx:any, fraction:any ) {
  return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
}

  function getBoundsZoomLevel(bounds: any, mapDim:any) {
    var WORLD_DIM = { height: 256, width: 256 };
    var ZOOM_MAX = 21;

   
 
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;

    var lngDiff = ne.lng() - sw.lng();
    var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

    var latZoom = zoomCalc(mapDim.height, WORLD_DIM.height, latFraction);
    var lngZoom = zoomCalc(mapDim.width, WORLD_DIM.width, lngFraction);


    return Math.min(latZoom, lngZoom, ZOOM_MAX);
}
function getCentralLatlng(geoCoordinates:google.maps.LatLng[]) {
  

  var x = 0;
  var y = 0;
  var z = 0;
  for (var i = 0; i < geoCoordinates.length; i++) {
   
    var latitude = geoCoordinates[i].lat() *  Math.PI / 180;
    var longitude =geoCoordinates[i].lng() *  Math.PI / 180;

    x += Math.cos(latitude) * Math.cos(longitude);
    y += Math.cos(latitude) * Math.sin(longitude);
    z += Math.sin(latitude);
    }
  

  var total = geoCoordinates.length;

  x = x / total;
  y = y / total;
  z = z / total;

  var centralLongitude = Math.atan2(y, x);
  var centralSquareRoot = Math.sqrt(x * x + y * y);
  var centralLatitude = Math.atan2(z, centralSquareRoot);

  return new google.maps.LatLng(centralLatitude * 180 / Math.PI, centralLongitude * 180 / Math.PI);
}
console.log("map height "+ height)
  return (
    backToIntro 
    ?
      <MapsIntro height={height} apiKey={apiKey} listName={listName} mapID={mapID} introText={introText}/>
    :
      <Map
       mapId={mapID}
       //mapId={'15431d2b469f209e'}
     
        mapTypeId={'hybrid'}
        isFractionalZoomEnabled={true}
        {...cameraOptions}
        // zoomControl={true}
        // defaultZoom={19}
        disableDefaultUI={true}
        zoom={zoom}
        onZoomChanged={ev => setZoom(ev.detail.zoom)}
     
      // defaultZoom={13}
      //  defaultCenter={{ lat: locationList[curLoc].lat, lng: locationList[curLoc].lng }}
      >

        <Marker  position={{ lat: locationList[curLoc].lat, lng: locationList[curLoc].lng }}/>
        <MFSTopStrip locationList={locationList} curLoc={curLoc} sendSelection={goToSelectedLoc} zoomTransition={zoomTransition}/>
      
       <MapControl position={isMobile?ControlPosition.CENTER:ControlPosition.LEFT_CENTER}>
          <MFSCard locationList={locationList} curLoc={curLoc} percentComplete={percentComplete} zoomTransition={zoomTransition} onPauseChange={pauseJourney} ongotoNextClick={goToNext} ongotoPrevClick={goToPrev}/>
       </MapControl>
          <MFSSpeednRestart BackToIntroCallback={handleClick}  speed={speed}  onSpeedChange={speed => setSpeed(speed)}  zoom={zoom} onZoomChange={zoom => setZoom(zoom)}></MFSSpeednRestart>
      </Map>
 
  
  );
}