leaflet-osm 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>
</body>

CSS

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

JavaScript

var initialZoom = 5;
var mapopts = {zoomAnimation: false};

//=================================================================================
var map = new L.Map('map', mapopts).setView([45.040216, 38.975996], initialZoom);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//=================================================================================



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, */
  });

}, 4000)


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