Issue with GeoJSON Data in the MapBox Component

I'm trying to mark several points on the MapBox Component using GeoJSON and it doesn't seem to show any points. Tried the same JSON on the Mapbox native platform and it seems to work fine there. Need help with this

Hey there @sanmoh.hombal! Sorry for the delay here :confused:

Would you be able to attach some screenshots of your JSON / app?

The following JSON does nothing in mapbox

{
  "type":"FeatureCollection",
  "features":[
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#cf7777",
        "marker-size": "large",
        "marker-symbol": "post"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          3.2334619760513306,
          51.20411059983983
        ]
      }
    }
  ]
}
1 Like

same for me, I tried and no marker were visible in the map

Hi there!

@ddimitrioglo In your example, the coordinates need to be refactored like this:

"coordinates": [
[
  [3.2334619760513306,
51.20411059983983]
]
]

Hi @anagrawal, can you confirm that the coordinates in your map are formatted as an array with a subarray, and then each set of latitude/longitude are also in their own subarray

yes, I am using the same geoJSON file still not marker on map, also where to find the docs for this geoJSON syntax - I have been trying to find any docs/reference but haven't found one yet

Best reference I got on my search quest is - rfc7946
but I don't see any syntax here for a point geometry to have the syntax that you mentioned above

That's a good point, but even with your approach I can't see a marker on the map.
Any thoughts on that?

Hi @anagrawal & @ddimitrioglo

What do you have for the points & marker sections?:

These docs may be helpful too: https://docs.mapbox.com/help/glossary/geojson/

what if I want to make markers different?

Hi @ddimitrioglo You can define the markers within the points array:

That's cool!
Sad that's it was not described in docs, but anyway thanks for sharing this here!

What was your solution Here. I am having the same issue, I would like to have different colors for each point. I've tried adding a hex color as a "marker" field to the Points Json, which displays a literal value of the Hex versus a point in that color. I have also tried using the GEOJson but no point shows on the map

Hi @bryangateley

Thanks for this question! I did some digging, but I haven't found a good way to change the color, other than to use custom css (general css instructions here: http://community.retool.com/t/how-to-write-custom-css-in-retool/2165)

I'll move this post to our feature requests!

This feature seems to have been added to the mobile app (using the color: "#..." when passing the points). Any chance we can get this on desktop too?
Emojis won't work for my use case, I just need the markers to be different colors.

1 Like

Hi @w2go! Thanks for the update. Yes, I'll post here if this is something we're able to implement for the non-mobile side

Hey! Any update here?

Besides for the marker colors, in mobile the map can be styled to street view or something not grey.

Hi @w2go Not yet, unfortunately :disappointed: I let the team know you checked in though!