Multiple GeoJson styling layers

💬 App Building
1

Hi team, I'm working on a use case that involves styling GeoJSON data with multiple layers in the Mapbox component. I need to display points as circles in different colors and connect them using a LineString. Is this functionality currently supported in Retool? If not, could it be prioritized since it seems like a common requirement?

3

Hello @Yashodhar_Meduri ,

Yes, Retool's Mapbox component supports styling GeoJSON data with multiple layers. You can display points as circles with different colors and connect them using a LineString.

follow those steps:

  • Use GeoJSON data with Point and LineString features.
  • Configure Mapbox layers

Circle Layer

{
  "id": "point-layer",
  "type": "circle",
  "paint": {
    "circle-radius": 6,
    "circle-color": ["get", "color"]
  }
}

Line Layer

{
  "id": "line-layer",
  "type": "line",
  "paint": {
    "line-width": 2,
    "line-color": "#888"
  }
}
4 Likes
4

@WidleStudioLLP How do i pass both styles in the layers property? Layers just accepts one object, not an array of objects.

5

Hey @Yashodhar_Meduri! Thanks for reaching out.

As you've observed, it's not currently possible to apply multiple styling layers when using the native component. I think there's also an issue plotting LineString features, in general. These are both gaps that we're aware of and I'll convey your support for their development internally. :+1:

I do know that other customers that have opted to build a custom component, instead. Doing so would give you full control over the configuration and appearance of the resulting map! Let me know if you're interested in trying that out or if you have any additional questions. :+1: