GeoJSON points sublayer not displaying

[nomans1]

Hello,

I've followed the example in the documentation to use IconLayer to render the point features in a GeoJsonLayer. However it refuses to display the icon even if I'm supplying getPosition to it:

points:{ type: IconLayer, iconMapping: ICON_MAPPING, getIcon: 'https://i.imgur.com/GWqT1PQ.png', getPosition: (d) => d.features.map(geo => geo.geometry1.coordinates), getSize: 32, }

At the sametime, 'polygons-fill' subLayer works perfectly fine. One thing to note is, my points are supplied in the 'geometry1' object in my geojson file. But it should still works, since I'm giving it a getPosition but it doesn't. Can you please help me with it?

Sample of geojson:
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {..}, "geometry":{..}, "geometry1":{..} } ] }

[Pessimistress]

getIcon cannot be a URL string, see https://deck.gl/docs/api-reference/layers/icon-layer#geticon

You shouldn't have to supply getPosition. And if you do, it is called with each feature, not with the entire data object. You can use console.log to see what's actually passed in.

[nomans1]

Oh apologies, that was my mistake. I've modified the getIcon properly but it still doesn't seem to work

   `points:{
      type: IconLayer,
      iconMapping: ICON_MAPPING,
      getIcon: (d) =>
        d.properties.DEALER_NAME_GROUP === "VF Retail" ||
        d.properties.DEALER_NAME_GROUP === "Franchisees"
          ? {
              url: "https://i.imgur.com/GWqT1PQ.png",
              width: 72,
              height: 72,
            }
          : {
              url:
                "https://www.quidco.com/vfiles/19/merchant_image-merchant_open_graph.png/",
              width: 72,
              height: 72,
      },
      getSize: 32,
      
    }`

Still isn't working, unless I'm making another mistake. Since its called with each feature, I tried setting getPosition with:
getPosition: d => d.geometry1.coordinates

Still no luck :(

[nomans1]

I just checked in the console as well, its telling me that me:
deck: LineString coordinates are malformed
deck: Point coordinates are malformed

Could this be the issue with Icons not displaying? I guess its due to my data have something wrong?

[Pessimistress]

Your data is not a valid GeoJSON then.

[Pessimistress]

BTW I don't think the layer allows you to override getPosition here. If you don't want to use the coordinates defined by the GeoJSON spec then there's no point using the GeoJsonLayer.

[nomans1]

@Pessimistress

Thanks for that, it worked for me. I have got yet another issue. I have another GeoJSON layer which only contains Points and when I supply it to GeoJSON layer it doesn't show anything even though in dev tools I can see the the DeckGL layer state has the points feature in it.

I'm getting the data from an API and putting it into my state which I then pass to the GeoJSON layer. I checked and its valid geojson as well printed on the console for you to check. Screenshot below:

Tried with subLayer as well as doing it through a local geojson file but no luck.
Code:

    new GeoJsonLayer({
      id: "geojson",
      data: testGeo,
      // opacity: 0.9,
      stroked: false,
      filled: true,
      extruded: true,
      wireframe: true,
      getFillColor: [160, 160, 180],
      getLineColor: [255, 0, 0],
      pickable: true,
      material,
      // _subLayerProps: {
      //   'points': {
      //     getFillColor: [160, 160, 180],
      //     filled: true,
      //     getRadius: 50,
      //   }
      // }
    })

Dev Tools: https://imgur.com/0kKrskS
Console Log for GeoJSON: https://i.imgur.com/1rFUcjN.png

Please let me know how I can fix this.

Thank you

[Pessimistress]

You are not setting the point radius. It's default to 1 meter which may not be visible depending on your zoom level.

[nomans1]

Such a small thing but it worked. Thank you so much :)