GeoJson in Mapbox component for points

App Building
1

I'm trying to style markers for points I render in the mapbox component.

What should work here (I think) is to forget using the points option and instead use just the geojson. I see the example geojson that comes with the component and that renders a polygon that you can fill with different colors using "paint" in the geojson styling.

The geojson that should work for just points is like:

"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.454, 37.766]
},
"properties": {
"marker": "1"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.510, 37.764]
},
"properties": {
"marker": "2"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.510, 37.772]
},
"properties": {
"marker": "1"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.455, 37.773]
},
"properties": {
"marker": "2"
}
}
]
}

And the styling something like:

"paint": {
"circle-radius": 6,
"circle-color": [
"match",
["get", "marker"],
"1", "red",
"2", "green",
"3", "blue",
"4", "yellow",
"grey" // default color
]
}
}

But this doesn't render any points for me. Thoughts on if this is possible or other ways to handle it?

2

So, here's what I figured out...for the geojson...you need to format like this:

  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-122.454, 37.766],
      },
      "properties": {
        "marker": "1"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-122.510, 37.764],
      },
      "properties": {
        "marker": "2"
      }
    },
    // ... more features ...
  ]
}

You don't include anything for the points data.

For the geojson styling then you can dynamically set a color like this:

  "type": "circle",
  "paint": {
    "circle-color": [
      'match',
      ['get', 'marker'],
      '1', '#f00',
      '2', '#0f0',
      '3', '#00f',
      '4', '#f0f',
      '#000' // default color
    ]
  }
}

This renders pretty circles of the correct color for each of my coordinates. The problem is that they're just for show. Since they aren't "points" as far as Retool is concerned, none of the critical functions that rely on points existing work. For example. selectedPoint doesn't define anything since you can't actually select one of these coordinates.

So, this design I wanted is possible, but it leaves out the functionality I need.

3

BUT...this should be a feature since they actually are points...Retool should recognize them as such and allow those methods and functions.

4

Thanks for sharing all of these details, @hess411! We have a request for styling markers, so I'll follow up if we ship a fix

5

Hello Tess,

Is there any update on this request for styling markers as true "points"?

1 Like
6

:eyes: Not yet, unfortunately :disappointed: It doesn't appear to be on our near term roadmap, but I'll add your +1 to the internal ticket