TextLayer

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Ships</title>
    
    <!-- Maplibre & deck.gl imports -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

const cartoMapId = 'fb7a8461-84f2-4e0a-b3ff-d1f714992cbb';

deck.carto.fetchMap({cartoMapId}).then(({initialViewState, mapStyle, layers}) => {
  mapStyle = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;
  const deckgl = new deck.DeckGL({
    container: 'map',
    controller: true,
    mapStyle,
    initialViewState,
    layers: layers.map(l => l.clone({pickable: false}))
  });
});