Animate a 3D plane flight

Use the MapTiler 3D JS module to simulate and animate a plane flight between two cities. Thanks to the 3D JS module we can track the flight position of a airplane.

This demonstration showcases a compact control interface that allows us to animate the plane flight and track the position.


npm install --save @maptiler/sdk @maptiler/3d lil-gui

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { Layer3D, AltitudeReference } from '@maptiler/3d';
import { GUI } from 'lil-gui';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

//const newYorkCity = [-73.98918779556983, 40.74072950731568];
//const capeTown = [18.428021658130994, -33.913973526198134];
//const melbourne = [144.84097472271193, -37.94589718135184];
const paris = [2.3120283730734648, 48.8556923989924];
const ankara = [32.866609260522345, 39.959329480757354];

const map = new Map({
  container: document.getElementById('map'),
  style: MapStyle.STREETS.DARK,
  zoom: 9,
  center: paris,
  maxPitch: 85,
  terrainControl: true,
  terrain: true,
  maptilerLogo: true,
});

(async () => {
  await map.onReadyAsync();

  map.setSky({
    "sky-color": "#0C2E4B",
    "horizon-color": "#09112F",
    "fog-color": "#09112F",
    "fog-ground-blend": 0.5,
    "horizon-fog-blend": 0.1,
    "sky-horizon-blend": 1.0,
    "atmosphere-blend": 0.5,
  })

  const layer3D = new Layer3D("custom-3D-layer");
  map.addLayer(layer3D);

  // Increasing the intensity of the ambient light 
  layer3D.setAmbientLight({intensity: 2});

  // Adding a point light
  layer3D.addPointLight("point-light", {intensity: 30});

  // Adding a mesh of a plane.
  const originalPlaneID = "plane";
  const mesh = await layer3D.addMeshFromURL(
    originalPlaneID,
    "https://docs-media.maptiler.com/docs/models/plane_a340.glb",
    {
      lngLat: paris,
      heading: 12,
      scale: 5,
      altitude: 5000,
      altitudeReference: AltitudeReference.MEAN_SEA_LEVEL,
    }
  );

  const guiObj = {
    play: false,
    trackFlight: true,
    speed: 0.0001,
  }

  const gui = new GUI({ width: 200 });

  gui.add( guiObj, 'trackFlight')

  gui.add( guiObj, 'play')
  .onChange((play) => {
    if (play) {
      playAnimation();
    }
  });

  gui.add( guiObj, 'speed', 0, 0.001);
  
  let progress = 0;

  function playAnimation() {
    progress += guiObj.speed;

    if (progress > 1) {
      progress = 0;
    }

    const position = maptilersdk.math.haversineIntermediateWgs84(paris, ankara, progress);
    mesh.modify({lngLat: position});

    if (guiObj.trackFlight) {
      map.setCenter(position);
      // map.setBearing(360 * progress * 2);
    }

    if (guiObj.play) {
      requestAnimationFrame(playAnimation);
    }
  }

})()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Animate a 3D plane flight | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
.lil-gui.autoPlace {
  right: inherit;
  left: 15px;
}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a 3D model</title>
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
<!-- Importing MapTiler 3D js -->
<script src="https://cdn.maptiler.com/maptiler-3d/v4.0.1/maptiler-3d.umd.min.js"></script>
<style>
  body {margin: 0; padding: 0;}
  #map {position: absolute; top: 0; bottom: 0; width: 100%;}
  .lil-gui.autoPlace {
    right: inherit;
    left: 15px;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
  maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

  //const newYorkCity = [-73.98918779556983, 40.74072950731568];
  //const capeTown = [18.428021658130994, -33.913973526198134];
  //const melbourne = [144.84097472271193, -37.94589718135184];
  const paris = [2.3120283730734648, 48.8556923989924];
  const ankara = [32.866609260522345, 39.959329480757354];

  const map = new maptilersdk.Map({
    container: document.getElementById('map'),
    style: maptilersdk.MapStyle.STREETS.DARK,
    zoom: 9,
    center: paris,
    maxPitch: 85,
    terrainControl: true,
    terrain: true,
    maptilerLogo: true,
  });

  (async () => {
    await map.onReadyAsync();

    map.setSky({
      "sky-color": "#0C2E4B",
      "horizon-color": "#09112F",
      "fog-color": "#09112F",
      "fog-ground-blend": 0.5,
      "horizon-fog-blend": 0.1,
      "sky-horizon-blend": 1.0,
      "atmosphere-blend": 0.5,
    })

    const layer3D = new maptiler3d.Layer3D("custom-3D-layer");
    map.addLayer(layer3D);

    // Increasing the intensity of the ambient light 
    layer3D.setAmbientLight({intensity: 2});

    // Adding a point light
    layer3D.addPointLight("point-light", {intensity: 30});

    // Adding a mesh of a plane.
    const originalPlaneID = "plane";
    const mesh = await layer3D.addMeshFromURL(
      originalPlaneID,
      "https://docs-media.maptiler.com/docs/models/plane_a340.glb",
      {
        lngLat: paris,
        heading: 12,
        scale: 5,
        altitude: 5000,
        altitudeReference: maptiler3d.AltitudeReference.MEAN_SEA_LEVEL,
      }
    );

    const guiObj = {
      play: false,
      trackFlight: true,
      speed: 0.0001,
    }
  
    const gui = new lil.GUI({ width: 200 });

    gui.add( guiObj, 'trackFlight')

    gui.add( guiObj, 'play')
    .onChange((play) => {
      if (play) {
        playAnimation();
      }
    });

    gui.add( guiObj, 'speed', 0, 0.001);
    
    let progress = 0;

    function playAnimation() {
      progress += guiObj.speed;

      if (progress > 1) {
        progress = 0;
      }

      const position = maptilersdk.math.haversineIntermediateWgs84(paris, ankara, progress);
      mesh.modify({lngLat: position});

      if (guiObj.trackFlight) {
        map.setCenter(position);
        // map.setBearing(360 * progress * 2);
      }

      if (guiObj.play) {
        requestAnimationFrame(playAnimation);
      }
    }

  })()
    
</script>
</body>
</html>

plane a340 by mamont nikita is licensed under Creative Commons Attribution ↩