leaflet-gm animation - experiments

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="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css">
<script src="//api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<body>
  <div id="googleMap" class="customMap"></div>
  <div id="mapboxMap" 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 initialZoom = 7;
//=================================================================================
var lmap = L.map('googleMap', { 
   /*  zoomSnap: 0.1  */
   zoomAnimation: false,
   fadeAnimation: false
}).setView([37.753574, -122.447303], initialZoom);
var roadMutant = L.gridLayer.googleMutant({  type: 'roadmap' }).addTo(lmap);
//==============================================================================
mapboxgl.accessToken = 'pk.eyJ1IjoiZ29sZW9uIiwiYSI6ImNqanF6cXJtdThlMnEzcHAxcnAweGEzMXUifQ.2QzQdMMMMkS0Td1eMnU5_g';
var mmap = new mapboxgl.Map({
  zoom: initialZoom - 1,
  center: [-122.447303, 37.753574],
  container: 'mapboxMap',
  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
      }
    }]
  }
});
//=================================================================================
mmap.scrollZoom.disable();
mmap.on("wheel", _.debounce((event) => {
  //https://developer.mozilla.org/en-US/docs/Web/Events/wheel
  //var wheelDelta = event.originalEvent.wheelDelta || event.originalEvent.deltaY;
  var wheelDelta = event.originalEvent.wheelDelta;
  var originalEvent = event.originalEvent;
  wheelDelta = wheelDelta ? -1 / 40 * wheelDelta : originalEvent.deltaY || originalEvent.detail;
  let zoomDelta = -Math.sign(wheelDelta);
  if (!zoomDelta) {
    return;
  }
  
  //https://github.com/mapbox/mapbox-gl-js/blob/c708474eb65d9c6a117fe232b677db19525f70b4/src/ui/handler/scroll_zoom.js#L292
 ...