Icons do not render on map

[jerrywu28]

Description

I'm using react-map-gl with deck.gl, but am unable to get any icons to render on the page in spite of following the guide provided in the docs to a tee.

Repro Steps

I am importing the following dependencies to the component:

import React from 'react'; import DeckGL from '@deck.gl/react'; import { IconLayer, PathLayer } from '@deck.gl/layers';

The icon layer going into my layers' array, which is passed into <DeckGL layers={layers}> is built this way:

new IconLayer({
      id: 'icon-layer',
      data: destinations.map((destination) => {
        const { latitude, longitude } = destination.coordinates;
        return {
          address: destination.location.formatted_address,
          coordinates: [latitude, longitude],
          name: destination.name,
        };
      }),
      pickable: false,
      iconAtlas:
        'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
      iconMapping: {
        marker: { x: 0, y: 0, width: 128, height: 128, mask: true },
      },
      sizeScale: 20,
      getIcon: () => 'marker',
      getPosition: (d) => d.coordinates,
      getSize: () => 20,
      getColor: () => [125, 125, 125],
    });

Unfortunately, nothing appears on the map. It may be irrelevant, but I am able to get pathLayer working in the layers array without any issue.

Environment (please complete the following information):

• Framework Versions: "@deck.gl/core": "^8.2.8", "@deck.gl/layers": "^8.2.8", "@deck.gl/react": "^8.2.8",

• Browser Version: Chrome 85.0.4183.102

Logs

Here's a screenshot of layers being console.logged before rendering. See shape of data in props.data[i].

[Pessimistress]

DeckGL never received your layer. Please share the complete code of your React component if you would like help with debugging, ideally in a CodeSandbox.

[jerrywu28]

Thanks for your quick response! I spun up a CodeSandbox for you, thanks for the extra pair of eyes on this:

https://codesandbox.io/s/priceless-kapitsa-pdwy9?file=/src/App.js

Edit: I should mention that it requires a MapBox API key on line 8 in Map.js. I didn't feel comfortable sharing my own in the sandbox.

[Pessimistress]

Coordinates need to be in [longitude, latitude] (GeoJSON convention).

[jerrywu28]

That fixed it!