body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/*
* https://deck.gl/docs/api-reference/extensions/fill-style-extension
*/

const {Deck, FillStyleExtension, GeoJsonLayer} = deck;

const patterns = ['dots', 'hatch-1x', 'hatch-2x', 'hatch-cross'];

new Deck({
  initialViewState: {
    longitude: 5,
    latitude: 50,
    zoom: 4.5
  },
  controller: true,
  
  layers: [
    new GeoJsonLayer({
      data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson',
      stroked: true,
      filled: true,
      lineWidthMinPixels: 2,
      getLineColor: [60, 60, 60],
      getFillColor: [60, 180, 240],

      // props added by FillStyleExtension
      fillPatternMask: true,
      fillPatternAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl/master/examples/layer-browser/data/pattern.png',
      fillPatternMapping: 'https://raw.githubusercontent.com/visgl/deck.gl/master/examples/layer-browser/data/pattern.json',
      getFillPattern: (f, {index}) => patterns[index % 4],
      getFillPatternScale: 500,
      getFillPatternOffset: [0, 0],

      // Define extensions
      extensions: [new FillStyleExtension({pattern: true})]
    })
  ]
});