leaflet-gm animation disabled: interval

by Leo

HTML

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBDvnikgZ00aQKEB0wXD1TQCgX6610wuzk"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/Leaflet.GoogleMutant.js"></script>
<script src="//api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css">
<body>
  <div id="map" class="customMap"></div>
  <div id="map1" class="customMap" style="z-index: 1000;"></div>
</body>

CSS

.customMap {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

JavaScript

var mapopts = {zoomAnimation: false};

var initialZoom = 5;

var map = L.map('map', mapopts).setView([41.878781, -87.622088], initialZoom);

var roadMutant = L.gridLayer.googleMutant({
  maxZoom: 24,
  type: 'roadmap'
}).addTo(map);

//=================================================================================
mapboxgl.accessToken = 'pk.eyJ1IjoiZ29sZW9uIiwiYSI6ImNqanF6cXJtdThlMnEzcHAxcnAweGEzMXUifQ.2QzQdMMMMkS0Td1eMnU5_g';
var mmap = new mapboxgl.Map({
  container: 'map1',
   style: {
    version: 8,
    sources: {
      d25uarhxywzl1j: {
        type: "vector",
        tiles: ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"],
        tileSize: 512
      }
    },
    layers: [{
      id: "mapillary",
      type: "line",
      source: "d25uarhxywzl1j",
      "source-layer": "mapillary-sequences",
      layout: {
        "line-cap": "round",
        "line-join": "round"
      },
      paint: {
        "line-opacity": 0.6,
        "line-color": "rgb(53, 175, 109)",
        "line-width": 2
      }
    }]
  },
  zoom: initialZoom - 1,
  center: [-87.622088, 41.878781]
});

//=================================================================================



var dz = 1;
setInterval(() => {
  var zoom = map.getZoom();
  if (zoom == 13) {
    dz = -1;
  } else if (zoom == 4) {
    dz = 1;
  }

  map.setView(map.getCenter(), zoom + dz, {
/*     animate: false,
    noMoveStart: true,
    duration: 1, */
  });
  
  mmap.setZoom(zoom + dz - 1);
  
}, 4000)


//===================================================================================