Arc Layer
Last updated
Was this helpful?
Last updated
Was this helpful?
This example shows how to use the ArcLayer to render raised arcs joining pairs of source and target points.
<!DOCTYPE html>
<html>
<head>
<title>Arc Layer</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^8.8.0/dist.min.js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvHtBZM79O5uGTBT1ZOWOKW2_FVMstHNs&callback=initMap&libraries=&v=beta"
async
></script>
</body>
<script type="text/javascript">
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 30, lng: 10 },
zoom: 2,
tilt: 30,
mapId: '74fb72d0338f9316',
fullscreenControl: false,
streetViewControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfbHFlM3p3Z3UiLCJqdGkiOiI1YjI0OWE2ZCJ9.Y7zB30NJFzq5fPv8W5nkoH5lPXFWQP0uywDtqUg8y8c'
});
// Fetch Data from CARTO
const geojsonData = deck.carto.fetchLayerData({
type: deck.carto.MAP_TYPES.QUERY,
source: `SELECT geom, scalerank FROM cartobq.public_account.airports_to_london WHERE scalerank > 7`,
connection: 'bqconn',
format: deck.carto.FORMATS.GEOJSON
});
const deckOverlay = new deck.GoogleMapsOverlay({
layers: [
new deck.ArcLayer({
id: 'arc-layer',
data: geojsonData.then(({ data }) => data.features),
getSourcePosition: f => [-0.4531566, 51.4709959], // London
getTargetPosition: f => f.geometry.coordinates,
getSourceColor: [0, 128, 200],
getTargetColor: [200, 0, 80],
getWidth: 1
})
]
});
deckOverlay.setMap(map);
}
</script>
</html><!DOCTYPE html>
<html>
<head>
<title>Arc Layer</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^8.8.0/dist.min.js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvHtBZM79O5uGTBT1ZOWOKW2_FVMstHNs&callback=initMap&libraries=&v=beta"
async
></script>
</body>
<script type="text/javascript">
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 30, lng: 10 },
zoom: 2,
tilt: 30,
mapId: '74fb72d0338f9316',
fullscreenControl: false,
streetViewControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
});
deck.carto.setDefaultCredentials({
username: 'public',
apiKey: 'default_public',
apiVersion: deck.carto.API_VERSIONS.V2,
});
// Fetch Data from CARTO
// Notice that you can use any Deck.gl layer with CARTO datasets getting GeoJSON data from CARTO's API.
const fetchData = () => {
const url = 'https://public.carto.com/api/v2/sql?q=SELECT the_geom, scalerank FROM airports_to_london WHERE scalerank > 7&format=geojson';
return(fetch(url).then(response => response.json()));
}
const deckOverlay = new deck.GoogleMapsOverlay({
layers: [
new deck.ArcLayer({
id: 'arc-layer',
data: fetchData().then(geojsonData => geojsonData.features),
getSourcePosition: f => [-0.4531566, 51.4709959], // London
getTargetPosition: f => f.geometry.coordinates,
getSourceColor: [0, 128, 200],
getTargetColor: [200, 0, 80],
getWidth: 1
})
]
});
deckOverlay.setMap(map);
}
</script>
</html>