Ctrlk
HomeAcademyLoginTry for free
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Arc Layer

This example shows how to use the ArcLayer to render raised arcs joining pairs of source and target points.

CARTO + Google Maps examples - CodeSandboxcodesandbox
<!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>
CARTO + Google Maps examples - CodeSandboxcodesandbox
PreviousAdvanced Examples
NextExtrusion

Last updated

Was this helpful?