Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Google Maps and deck.gl ArcLayer

Spark icon

Page Summary

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';
importtype*asGeoJSONfrom'geojson';
interfaceProperties{
scalerank:number;
}
typeFeature=GeoJSON.Feature<GeoJSON.Point,Properties>;
asyncfunctioninit(){
// Request needed libraries.
awaitgoogle.maps.importLibrary('maps');
// Get the gmp-map element.
constmapElement=document.querySelector('gmp-map')!;
// Get the inner map.
constinnerMap=mapElement.innerMap;
innerMap.setTilt(30);// Set tilt after map initialization.
// Set the path to the GeoJSON data file.
constdataUrl=newURL(
'./public/ne_10m_airports.geojson',
import.meta.url
).toString();
constflightsLayer=newArcLayer<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.coordinatesas[number,number],
getSourceColor:[0,128,200],
getTargetColor:[0,0,80],
getWidth:1,
});
constoverlay=newGoogleMapsOverlay({
interleaved:false,
layers:[flightsLayer],
});
overlay.setMap(innerMap);
}
voidinit();index.ts

JavaScript

import{GoogleMapsOverlay}from'@deck.gl/google-maps';
import{ArcLayer}from'@deck.gl/layers';
asyncfunctioninit(){
// Request needed libraries.
awaitgoogle.maps.importLibrary('maps');
// Get the gmp-map element.
constmapElement=document.querySelector('gmp-map');
// Get the inner map.
constinnerMap=mapElement.innerMap;
innerMap.setTilt(30);// Set tilt after map initialization.
// Set the path to the GeoJSON data file.
constdataUrl=newURL(
'./public/ne_10m_airports.geojson',
import.meta.url
).toString();
constflightsLayer=newArcLayer({
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,
});
constoverlay=newGoogleMapsOverlay({
interleaved:false,
layers:[flightsLayer],
});
overlay.setMap(innerMap);
}
voidinit();index.js

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;
}
style.css

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>index.html

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/deckgl-arclayer
npmi
npmstart