Google Maps and deck.gl ArcLayer

  • This example visualizes curved connections between Prague and major airports worldwide using the ArcLayer from deck.gl.

  • The ArcLayer is rendered on top of a Google Map, displaying flight paths originating from Prague.

  • The code utilizes GeoJSON data of airports and filters them based on a scalerank property for visualization.

  • You can interact with a live version of this example on JSFiddle or clone the sample code for local execution.

Visualize points with arcs

This example uses arcs to show curved point-to-point connections between airports and the city of Prague. The ArcLayer renders raised arcs joining pairs of source and target points.

TypeScript

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ArcLayer } from '@deck.gl/layers';
import type * as GeoJSON from 'geojson';

interface Properties {
    scalerank: number;
}
type Feature = GeoJSON.Feature<GeoJSON.Point, Properties>;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    innerMap.setTilt(30); // Set tilt after map initialization.

    // Set the path to the GeoJSON data file.
    const dataUrl = new URL(
        './public/ne_10m_airports.geojson',
        import.meta.url
    ).toString();

    const flightsLayer = new ArcLayer<Feature>({
        id: 'flights',
        data: dataUrl,

        dataTransform: (data: any) =>
            data.features.filter((f: any) => f.properties.scalerank < 4),
        getSourcePosition: () => [14.42076, 50.08804], // Prague
        getTargetPosition: (f: Feature) =>
            f.geometry.coordinates as [number, number],
        getSourceColor: [0, 128, 200],
        getTargetColor: [0, 0, 80],
        getWidth: 1,
    });

    const overlay = new GoogleMapsOverlay({
        interleaved: false,
        layers: [flightsLayer],
    });

    overlay.setMap(innerMap);
}

void init();

JavaScript

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ArcLayer } from '@deck.gl/layers';

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    innerMap.setTilt(30); // Set tilt after map initialization.

    // Set the path to the GeoJSON data file.
    const dataUrl = new URL(
        './public/ne_10m_airports.geojson',
        import.meta.url
    ).toString();

    const flightsLayer = new ArcLayer({
        id: 'flights',
        data: dataUrl,

        dataTransform: (data) =>
            data.features.filter((f) => f.properties.scalerank < 4),
        getSourcePosition: () => [14.42076, 50.08804], // Prague
        getTargetPosition: (f) => f.geometry.coordinates,
        getSourceColor: [0, 128, 200],
        getTargetColor: [0, 0, 80],
        getWidth: 1,
    });

    const overlay = new GoogleMapsOverlay({
        interleaved: false,
        layers: [flightsLayer],
    });

    overlay.setMap(innerMap);
}

void init();

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;
}

HTML

<html>
    <head>
        <title>deck.gl ArcLayer</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="50,14" map-id="90f87356969d889c" zoom="3"></gmp-map>
    </body>
</html>

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. You will also need a Google Maps API key.

The following commands clone the repository, install dependencies, and copy the environment file. 

  git clone https://github.com/googlemaps-samples/js-api-samples.git
  cd js-api-samples
  npm i
  cp .env.template .env

Once you copy the environment file, make sure to open the .env file and replace <Insert your own development API key here> with your actual API key before starting the sample. 

  cd samples/deckgl-arclayer
  npm start