TextLayer

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>MapLibre + CARTO</title>
    
    <!-- Maplibre & deck.gl imports -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/[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 AIRPORTS = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/line/airports.json'

class FixedSizeExtension extends deck.LayerExtension {
  getShaders() {
    return {
      inject: {
        'vs:DECKGL_FILTER_SIZE': 'size *= 0.7 * gl_Position.w;'
      }
    };
  }
}

const deckgl = new deck.DeckGL({
  // Basemap style
  container: 'map',
  // map: maplibregl,
  // Can also use 'positron', 'dark-matter' instead of voyager
  mapStyle: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",

  // Initial map location
  initialViewState: {
    latitude: 50,
    longitude: 10,
    zoom: 6,
    pitch: 80,
    maxPitch: 90
  },
  controller: true,

  // Visualization overlay
  layers: [0, 1].map(n =>
    new deck.TextLayer({
      id: `text-${n}`,
      data: AIRPORTS,
      dataTransform: d => d.filter((f, i) => i % 2 === n),
      extensions: n ? [] : [new FixedSizeExtension()],
      getPosition: d => d.coordinates,
      getColor: d => [255, 255, 255],
      getText: d => d.name,
      getSize: 12,

      // Outline styling
      outlineColor: n ? [107, 32, 164] : [255, 13, 44],
      fontSettings: {
        radius: 8,
        sdf: true
      },
      outlineWidth: 2
    }))
});