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>
    <!-- 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 {DeckGL, CompositeLayer, LayerExtension} = deck;

class MyLayerExtension extends LayerExtension {
  getSubLayerProps() {
    return {
      highlightRed: true
    };
  }
}

MyLayerExtension.defaultProps = {
  foo: 12,
  bar: {
    type: 'accessor'
  }
};

class MyCompositeLayer extends CompositeLayer {
  renderLayers() {
    const props = this.getSubLayerProps({
      foo: 42,
      updateTriggers: {
        bar: 'barbar'
      }
    });

    console.assert(props.foo === 42, `foo is ${props.foo}`); // foo is 12 here
    console.assert(
      props.updateTriggers.bar === 'barbar',
      `bar updatetrigger is ${props.updateTriggers.bar}` // updateTrigger is 'bar' here
    );
    return []; // return is not relevant for this example
  }
}
MyCompositeLayer.layerName = 'MyCompositeLayer';
function getLayer() {
  return new MyCompositeLayer({
    foo: 12,
    extensions: [new MyLayerExtension()],
    bar: () => 1,
    updateTriggers: {
      bar: 'bar'
    }
  });
}


new DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11,
    maxZoom: 20,
    pitch: 30,
    bearing: 0
  },
  controller: true,
  layers: [getLayer()]
});