Function renderToDOM

examples/website/google-3d/app.js:22–60

(
  container,
  options = {
    tracking: true,
    showPaths: true
  }
)

  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d/truck.gltf'; // eslint-disable-line

export async function renderToDOM(
  container,
  options = {
    tracking: true,
    showPaths: true
  }
) {
  const loader = new Loader({apiKey: GOOGLE_MAPS_API_KEY});
  const googlemaps = await loader.importLibrary('maps');

  const resp = await fetch(DATA_URL);
  const data = await resp.json();

  const map = new googlemaps.Map(container, {
    center: {lng: -95.36403, lat: 29.756433},
    zoom: 19,
    heading: 0,
    tilt: 45,
    isFractionalZoomEnabled: true,
    mapId: GOOGLE_MAP_ID,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'terrain']
    },
    streetViewControl: false
  });

  const overlay = new DeckOverlay({});
  overlay.setMap(map);

  const stopAnimation = startAnimation(map, overlay, data, options);

  return {
    update: newOpts => Object.assign(options, newOpts),
    remove: () => {
      stopAnimation();
      overlay.finalize();
    }
  };
}

function startAnimation(map, overlay, data, options) {
  const trips = data.map(waypoints => new TripBuilder({waypoints, loop: true}));