JSFiddle - React, Tailwind, and code Playground

by carto

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>deck.gl+Google</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@tweenjs/[email protected]/dist/tween.umd.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb"></script>
    <!-- jsFiddle will insert css and js -->
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

const AIR_PORTS =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40,
      lng: -3
    },
    gestureHandling: 'greedy',
    mapId: 'fae05836df2dc8bb',
    zoom: 3
  });

  const flightsLayer = new deck.LineLayer({
    id: 'flights',
    data: AIR_PORTS,
    dataTransform: d => d.features.filter(f => f.properties.scalerank < 3),
    getSourcePosition: f => [-3.70379, 40.416775], // Madrid
    getTargetPosition: f => f.geometry.coordinates,
    getColor: [0, 128, 200],
    getWidth: 1
  })

  const overlay = new deck.GoogleMapsOverlay({
    layers: [flightsLayer]
  });
  overlay.setMap(map);
}

initMap();

// After 3 seconds zoom
setTimeout(() => {
  const flyTween = flyTo({
    lng: 0,
    lat: 0,
    zoom: 4,
    tilt: 50,
    heading: 30
  })
  flyTween.start();
}, 3000);

// ...and then zoom out
setTimeout(() => {
  const flyTween = flyTo({
    lng: 0,
    lat: 0,
    zoom: 0,
  })
  flyTween.start();
}, 5000);

// Camera animation
function animate() {
  TWEEN.update();
  window.requestAnimationFrame(animate);
}
window.requestAnimationFrame(animate);

function flyTo(view) {
  console.log(view);
  const opts = {
    speed: 1.2,
    curve: 1.414
  };
  const container = map.getDiv().firstChild;
  const center = map.getCenter();
  let heading = map.getHeading() || 0;
  console.log('head', heading);
  if (view.heading !== undefined) {
    if (view.heading - heading > 180) {
      heading += 360;
    } else if (view.heading - heading < -180) {
      heading -= 360;
    }
  }
  let tilt = map.getTilt();
  let zoom = map.getZoom();

  const start = {
    longitude: center.lng(),
    latitude: center.lat(),
    heading,
    tilt,
    zoom
  };

  const end = {
    longitude: view.lng,
    latitude: view.lat,
    heading: view.heading !== undefined ? view.heading : heading,
    tilt: view.tilt !== undefined ?...