Simple CARTOLayer

by carto

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta&map_ids=fae05836df2dc8bb"
      async
    ></script>
   
   <!-- Added deck.gl 8.6 -->
    <script src="https://unpkg.com/deck.gl@^8.6.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.6.0/dist.min.js"></script>
      
  </body>
</html>

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

JavaScript

let map;

deck.carto.setDefaultCredentials({
  apiVersion: deck.carto.API_VERSIONS.V3,
  apiBaseUrl: 'https://gcp-us-east1.api.carto.com', 
});


function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 34.397, lng: -100.644 },
    zoom: 6,
    mapId: '84591267f7b3a201'
  });
  
  
const boundary = new deck.carto.CartoLayer({
  id: 'boundary',
  connection: 'bigquery',
  type: deck.carto.MAP_TYPES.TABLE,
  data: "cartobq.nexus_demo.texas_boundary_simplified",  
  getLineColor:[235, 252, 12],
  filled:false,   
  stroked: true,
  lineWidthMinPixels: 10,
  credentials: {
    accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiIzYWZhODUyOSJ9.bCrMmLKkMAgA21Y14js5up8CR4IJ45xhENzXo-CuHMs'}
});
  
  const deckGLoverlay = new deck.GoogleMapsOverlay({
    layers: [boundary]
  });
  deckGLoverlay.setMap(map);   
  
}