GeoJsonLayer point highlight

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl+Google</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://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' />
    <!-- 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

const DATA = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "stroke": "#555555",
      "stroke-width": 2,
      "stroke-opacity": 1,
      "fill": "#555555",
      "fill-opacity": 0.5,
      "id": "foobar",
      "name": "antimeridian_crossing"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [122.6953125, 55.57834467218206],
          [185.2734375, 61.270232790000634],
          [194.4140625, 67.60922060496382],
          [174.7265625, 72.81607371878991],
          [132.1875, 70.72897946208789],
          [122.6953125, 55.57834467218206]
        ]
      ]
    }
  }]
}

const deckGL = new deck.DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
  controller: true,
  initialViewState: {
    latitude:603,
    longitude: -179,
    zoom: 6
  }
});

let selectedObject;
const RED = [200, 0, 0];
const BLUE = [0, 14, 233];

function updateLayers() {
  const layers = [new deck.GeoJsonLayer({
    id: 'airports',
    data: AIR_PORTS,

    // Choose color based on selection
    getFillColor: d => d === selectedObject ? RED : BLUE,

    // Make sure the `getFillColor` accessor is rerun when `selectedObject` changes
    updateTriggers: {
      getFillColor: [selectedObject]
    },

    // Update the state and re-render when an object is clicked
    onClick: info => {
      selectedObject = info.object;
      updateLayers();
    },

    // Styling
    filled: true,
    pointRadiusMinPixels: 2,
    pointRadiusScale: 2000,
    getPointRadius: f => 11 - f.properties.scalerank,
    pickable: true,
    autoHighlight: true,
  })];

  deckGL.setProps({
    layers
  });
}

// Initial render
updateLayers();