0
votes

I've made a US state map on Mapbox with the help of the geojson file found here. What I really needed from it was just the polygon coordinates to draw the map.

I'm using Plotly Dash to make it interactive. Basically each state's color will change depending on the condition provided by the user using a slider. I'm a little confused on how to go about that. I can set the initial values on the geojson file, but how can I update them as their values change depending on the slider?

Here's a snippet of how the geojson file looks, with the coordinates of all the states:

{"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama","percentage":40},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[more coordinates]]}},
{"type":"Feature","id":"02","properties":{"name":"Alaska","percentage":30},"geometry":{"type":"Polygon","coordinates":[....]...

As you can see, I've set an initial value of 40 and 30 for Alabama and Alaska. Once I uploaded it to Mapbox, I set a color range from 0-100 and it colored all the states in perfectly based on my initial values.

Meanwhile in my Dash application, I've got a dataset from which I can calculate the percentage value for each state depending on the condition set in the RangeSlider. What I can't figure out is how to update the colors accordingly. I'm guessing it has something to do with layers, but I'm not sure. Any help would be really appreciated, thanks in advance!

1

1 Answers

1
votes

You can use GeoJsonSource#setData to accomplish this: https://docs.mapbox.com/mapbox-gl-js/api/#geojsonsource#setdata

This example does not use setData (or a GeoJson source at all), but it does show how to implement a slider in case that helps you: https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/

Disclaimer: I work at Mapbox.