deck.gl GlobeView Icon Layer Bug

deck-gl-globeview-icon-layer-bug.markdown

deck.gl GlobeView Icon Layer Bug

A Pen by Charles Richardson on CodePen.

License.

script.js

/*
* https://deck.gl/docs/api-reference/core/globe-view
*/
const {DeckGL, _GlobeView, ColumnLayer, TileLayer, BitmapLayer, CompositeLayer, IconLayer, COORDINATE_SYSTEM} = deck;

const points = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-81.64597499999999, 27.262075000000003]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-80.53932499999999, 27.458875]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-81.13726363636366, 27.143715151515153]
      },
      "properties": {}
    }
  ]
};

const layer = new IconLayer({
    id: 'IconLayer',
    data: points.features,
    getIcon: (d) => 'marker',
    getPosition: (d) => d.coordinates,
    getSize: 40,
    iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
    iconMapping: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.json',
    pickable: true
  });


new DeckGL({
  views: new _GlobeView({
    resolution: 10
  }),
  initialViewState: {
    longitude: 2.27,
    latitude: 10.86,
    zoom: 0,
    minZoom: 0,
    maxZoom: 20
  },
  controller: true,
  
  layers: [
    layer,
    new TileLayer({
      data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
      minZoom: 0,
      maxZoom: 19,
      tileSize: 256,

      renderSubLayers: props => {
        const {
          bbox: {west, south, east, north}
        } = props.tile;

        return new BitmapLayer(props, {
          data: null,
          image: props.data,
          _imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
          bounds: [west, south, east, north]
        });
      }
    })
  ]
});
  

scripts

<script src="https://unpkg.com/deck.gl@^9.1.0/dist.min.js"></script>

style.css

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

Linked to visgl/deck.gl#9554