MVTLayer with borders

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>MVTLayer with borders</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@latest/dist.min.js"></script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb"
    ></script> 
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40,
      lng: -120
    },
    gestureHandling: 'greedy',
    mapId: 'fae05836df2dc8bb',
    zoom: 3
  });

  deck.carto.setDefaultCredentials({
    apiVersion: deck.carto.API_VERSIONS.V3,
      apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
      accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiJjZTY5M2NmMCJ9.9HD7U1c-Wh81SPaSvWWSNShF7MIMH-9-S8YmWFo0_x0'
  })

  const powerLayer = new deck.carto.CartoLayer({
    id: 'power-lines',
    connection: 'bigquery',
    type: deck.carto.MAP_TYPES.TILESET,
    data: 'cartobq.nexus_demo.transmission_lines_tileset_simplified',
    getLineColor: [183, 135, 185, 180],
    extent: [-120, 30, 100, 80],
    filled: false,
    stroked: true,
    lineWidthMinPixels: 1,
    credentials: {
      accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiJjOTVkODFlZCJ9.6T9_NBCsS5t-MJXDHLLkSSRmh6Pyqrutr9NbdrL5YN8'
    },
    parameters: {
      depthTest: false,
    }    
  });
  
  const tileLayer = new deck.TileLayer({
  
  })

  const overlay = new deck.GoogleMapsOverlay({
    interleaved: false,
    layers: [powerLayer]
  });
  overlay.setMap(map);
}

initMap();