gm animation disabled
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.52.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css">
<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 map = L.map('googleMap', { zoomSnap: 0.1}).setView([37.753574, -122.447303], initialZoom);
var roadMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type: 'roadmap'
}).addTo(map);
//==============================================================================
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
}
}]
}
});
//=================================================================================
var dz = 1;
setInterval(() => {
var zoom = map.getZoom();
if (zoom == 13) {
dz = -1;
} else if (zoom == initialZoom) {
dz = 1;
}
map.setView(map.getCenter(), zoom + dz, {
animate: true,
noMoveStart: true,
duration: 1,
});
mmap.setZoom(zoom + dz - 1);
}, 3000)
//===================================================================================