danwild/deck.gl.html

## deck.gl.html
<!DOCTYPE html>
  <head>
    <title>DeckGL GeoJSON</title>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
    <!-- optional if mapbox base map is needed -->
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
    <!-- optional for color scale -->
    <script src="https://unpkg.com/chroma-js@2.0.3/chroma.js"></script>

    <style>
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
      }
      .deck-tooltip {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 16px;
        position: absolute;
        padding: 6px;
        margin: 8px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        max-width: 300px;
      }
    </style>

  </head>
  <body>

    <script>
      const { DeckGL, GeoJsonLayer } = deck;

      // YOUR VARS
      const data = '<path to geojson>';
      // optional - color scale
      const key = 'foo'; // property to use for color scale
      const domain = [0, 100];
      const scale = chroma.scale('viridis').domain(domain);

      // define our geojson layer
      // https://deck.gl/docs/api-reference/layers/geojson-layer
      const geojsonLayer = new GeoJsonLayer({
        id: 'my_layer',
        data,
        opacity: 0.9,
        stroked: false,
        filled: true,
        extruded: false,
        wireframe: false,
        fp64: true,
        getFillColor: f => colorScale(f.properties[key]),
        getLineColor: f => [255, 255, 255],
        pickable: true
      });

      // define our deck, using our geojson layer
      // https://deck.gl/docs/api-reference/core/deck
      new DeckGL({
        mapStyle: 'https://deck.gl/mapstyle/deck-dark.json',
        initialViewState: {
          latitude: -28,
          longitude: 142,
          zoom: 4,
          maxZoom: 16,
          pitch: 0
        },
        controller: true,
        layers: [geojsonLayer],
        getTooltip
      });

      /* ---------------- OPTIONAL STUFF ---------------- */

      /**
       * Get rgb value from cell value.
       */
      function colorScale(x) {
        const color = scale(x).rgba();
        color.pop();
        return color;
      }

      /**
       * Custom tooltip.
       */
      function getTooltip({object}) {
        return object && `${key}: ${object.properties[key]}`;
      }
    </script>

  </body>

</html>
	<!DOCTYPE html>
	<head>
	<title>DeckGL GeoJSON</title>
	<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
	<!-- optional if mapbox base map is needed -->
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
	<!-- optional for color scale -->
	<script src="https://unpkg.com/chroma-js@2.0.3/chroma.js"></script>

	<style>
	body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	}
	.deck-tooltip {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	position: absolute;
	padding: 6px;
	margin: 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	max-width: 300px;
	}
	</style>

	</head>
	<body>

	<script>
	const { DeckGL, GeoJsonLayer } = deck;

	// YOUR VARS
	const data = '<path to geojson>';
	// optional - color scale
	const key = 'foo'; // property to use for color scale
	const domain = [0, 100];
	const scale = chroma.scale('viridis').domain(domain);

	// define our geojson layer
	// https://deck.gl/docs/api-reference/layers/geojson-layer
	const geojsonLayer = new GeoJsonLayer({
	id: 'my_layer',
	data,
	opacity: 0.9,
	stroked: false,
	filled: true,
	extruded: false,
	wireframe: false,
	fp64: true,
	getFillColor: f => colorScale(f.properties[key]),
	getLineColor: f => [255, 255, 255],
	pickable: true
	});

	// define our deck, using our geojson layer
	// https://deck.gl/docs/api-reference/core/deck
	new DeckGL({
	mapStyle: 'https://deck.gl/mapstyle/deck-dark.json',
	initialViewState: {
	latitude: -28,
	longitude: 142,
	zoom: 4,
	maxZoom: 16,
	pitch: 0
	},
	controller: true,
	layers: [geojsonLayer],
	getTooltip
	});

	/* ---------------- OPTIONAL STUFF ---------------- */

	/**
	* Get rgb value from cell value.
	*/
	function colorScale(x) {
	const color = scale(x).rgba();
	color.pop();
	return color;
	}

	/**
	* Custom tooltip.
	*/
	function getTooltip({object}) {
	return object && `${key}: ${object.properties[key]}`;
	}
	</script>

	</body>

	</html>