iconlayer is not displaying in deck.gl

Question

Here is documentation for Icon Layer https://deck.gl/docs/api-reference/layers/icon-layer

I want to use this IconLayer to display markers on the map. I used this like below. import

import { IconLayer } from "@deck.gl/layers";

Icon mapping

const ICON__MAPPING = {
  marker: { x: 0, y: 0, width: 128, height: 128, mask: false }
};

Icon layer

const iconLayer = new IconLayer({
  id: "icon-layer",
  data: [
    {
      name: "Colma (COLM)",
      address: "365 D Street, Colma CA 94014",
      exits: 4214,
      coordinates: [76.993894, 31.781929]
    }
  ],
  pickable: true,
  // iconAtlas and iconMapping are required
  // getIcon: return a string
  iconAtlas: "https://img.icons8.com/dusk/64/000000/user-location.png",
  getIcon: (d) => d.name,
  iconMapping: ICON__MAPPING,
  sizeScale: 15,
  getPosition: (d) => d.coordinates,
  getSize: (d) => 55,
  getColor: (d) => [Math.sqrt(d.exits), 140, 0]
});

I used everything as documented. I am not doing any experiment. Still icon is not visible on the map.

Live Demo

https://codesandbox.io/s/reverent-framework-uepze?file=/src/App.js

Answer 1

The iconmapping name must match what you do in getIcon, i.e.: "Colma (COLM)" !== "marker"