Dash App is not loading GeoJSON Object as Source

Dash Python
1

I am working on a Dash app modeled after a sample app found here(https://dash-gallery.plotly.host/dash-opioid-epidemic/). The app featured provides a link to a GeoJSON file read from GitHub user content to construct a layer for the map.

   base_url = "https://raw.githubusercontent.com/jackparmer/mapbox-counties/master/"
for bin in BINS:
    geo_layer = dict(
        sourcetype="geojson",
        source=base_url + str(year) + "/" + bin + ".geojson", <-- HERE
        type="fill",
        color=cm[bin],
        opacity=DEFAULT_OPACITY,
        # CHANGE THIS
        fill=dict(outlinecolor="#afafaf"),
    )
    layout["mapbox"]["layers"].append(geo_layer)

For my use, I want to dynamically construct a GeoJSON object from a geopandas dataframe. I have achieved this and construct a feature collection as a GeoJSON object - see example below. When I check the type of the object it is this “geojson.feature.FeatureCollection”.

{"features": [{"geometry": {"coordinates": [[-74.734949, 39.727779], [-74.417286, 39.557994], [-74.313224, 39.497748], [-74.548733, 39.295101], [-74.860918, 39.322485], [-74.986888, 39.514178], [-74.877349, 39.607286], [-74.734949, 39.727779]], "geometry": [[-74.734949, 39.727779], [-74.417286, 39.557994], [-74.313224, 39.497748], [-74.548733, 39.295101], [-74.860918, 39.322485], [-74.986888, 39.514178], [-74.877349, 39.607286], [-74.734949, 39.727779]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}

According to the documentation, a GeoJSON object may be passed as the source. Therefore, I do it in the following way.

        geo_df = (df_cur[(df_cur['val_bins'] == str(bin))]).copy() # geo
    geo_json=make_geo_json(geo_df)
    geo_layer = dict(
        sourcetype="geojson",
        source=geo_json,
        type="fill",
        color=cm[bin],
        opacity=DEFAULT_OPACITY,
        # CHANGE THIS
        fill=dict(outlinecolor="#afafaf"),
    )

Despite constructing it and it being of the correct type, it is not displaying. The below information is the output of the layers after being added to the mapbox.

{'sourcetype': 'geojson', 'source': {"features": [{"geometry": {"coordinates": [[39.990672, -75.030704], [39.727779, -74.734949], [39.607286, -74.877349], [39.88661, -75.140242], [39.990672, -75.058088], [39.990672, -75.030704]], "geometry": [[39.990672, -75.030704], [39.727779, -74.734949], [39.607286, -74.877349], [39.88661, -75.140242], [39.990672, -75.058088], [39.990672, -75.030704]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[39.322485, -74.860918], [39.295101, -74.548733], [39.180085, -74.915688], [39.322485, -74.860918]], "geometry": [[39.322485, -74.860918], [39.295101, -74.548733], [39.180085, -74.915688], [39.322485, -74.860918]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[40.894367, -74.28584], [40.899844, -74.269409], [40.81769, -74.132485], [40.784829, -74.148916], [40.67529, -74.137962], [40.735536, -74.362517], [40.741013, -74.373471], [40.894367, -74.28584]], "geometry": [[40.894367, -74.28584], [40.899844, -74.269409], [40.81769, -74.132485], [40.784829, -74.148916], [40.67529, -74.137962], [40.735536, -74.362517], [40.741013, -74.373471], [40.894367, -74.28584]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[40.593136, -74.291317], [40.593136, -74.209163], [40.450735, -74.225593], [40.253565, -74.48301], [40.374058, -74.619933], [40.598613, -74.461102], [40.593136, -74.291317]], "geometry": [[40.593136, -74.291317], [40.593136, -74.209163], [40.450735, -74.225593], [40.253565, -74.48301], [40.374058, -74.619933], [40.598613, -74.461102], [40.593136, -74.291317]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[40.171411, -74.406332], [40.100211, -74.0339], [39.497748, -74.313224], [39.557994, -74.417286], [40.078303, -74.55421], [40.171411, -74.406332]], "geometry": [[40.171411, -74.406332], [40.100211, -74.0339], [39.497748, -74.313224], [39.557994, -74.417286], [40.078303, -74.55421], [40.171411, -74.406332]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[39.771595, -75.446951], [39.568948, -75.063565], [39.382732, -75.408613], [39.607286, -75.55649], [39.629194, -75.561967], [39.683964, -75.507197], [39.771595, -75.446951]], "geometry": [[39.771595, -75.446951], [39.568948, -75.063565], [39.382732, -75.408613], [39.607286, -75.55649], [39.629194, -75.561967], [39.683964, -75.507197], [39.771595, -75.446951]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}, 'type': 'fill', 'color': '#f2fffb', 'opacity': 0.8, 'fill': {'outlinecolor': '#afafaf'}}
{'sourcetype': 'geojson', 'source': {"features": [{"geometry": {"coordinates": [[41.201076, -74.367994], [41.08606, -74.504917], [40.910798, -74.76781], [41.091537, -74.96498], [41.097014, -74.96498], [41.091537, -74.992365], [41.359907, -74.69661], [41.201076, -74.367994]], "geometry": [[41.201076, -74.367994], [41.08606, -74.504917], [40.910798, -74.76781], [41.091537, -74.96498], [41.097014, -74.96498], [41.091537, -74.992365], [41.359907, -74.69661], [41.201076, -74.367994]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[41.091537, -74.96498], [40.910798, -74.76781], [40.790306, -74.888303], [40.593136, -75.189535], [40.609566, -75.195012], [40.965568, -75.118335], [41.097014, -74.96498], [41.091537, -74.96498]], "geometry": [[41.091537, -74.96498], [40.910798, -74.76781], [40.790306, -74.888303], [40.593136, -75.189535], [40.609566, -75.195012], [40.965568, -75.118335], [41.097014, -74.96498], [41.091537, -74.96498]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}, 'type': 'fill', 'color': '#bbffeb', 'opacity': 0.8, 'fill': {'outlinecolor': '#afafaf'}}
{'sourcetype': 'geojson', 'source': {"features": [{"geometry": {"coordinates": [[41.08606, -74.504917], [40.899844, -74.269409], [40.894367, -74.28584], [40.741013, -74.373471], [40.67529, -74.461102], [40.719105, -74.718518], [40.719105, -74.723995], [40.790306, -74.888303], [40.910798, -74.76781], [41.08606, -74.504917]], "geometry": [[41.08606, -74.504917], [40.899844, -74.269409], [40.894367, -74.28584], [40.741013, -74.373471], [40.67529, -74.461102], [40.719105, -74.718518], [40.719105, -74.723995], [40.790306, -74.888303], [40.910798, -74.76781], [41.08606, -74.504917]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}, 'type': 'fill', 'color': '#98ffe0', 'opacity': 0.8, 'fill': {'outlinecolor': '#afafaf'}}
{'sourcetype': 'geojson', 'source': {"features": [{"geometry": {"coordinates": [[40.182365, -74.702087], [40.13855, -74.587071], [40.078303, -74.55421], [39.557994, -74.417286], [39.727779, -74.734949], [39.990672, -75.030704], [39.990672, -75.058088], [40.050919, -74.975934], [40.149503, -74.723995], [40.182365, -74.702087]], "geometry": [[40.182365, -74.702087], [40.13855, -74.587071], [40.078303, -74.55421], [39.557994, -74.417286], [39.727779, -74.734949], [39.990672, -75.030704], [39.990672, -75.058088], [40.050919, -74.975934], [40.149503, -74.723995], [40.182365, -74.702087]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[40.417874, -74.800672], [40.423351, -74.745903], [40.374058, -74.619933], [40.253565, -74.48301], [40.13855, -74.587071], [40.182365, -74.702087], [40.149503, -74.723995], [40.341196, -74.943073], [40.417874, -74.800672]], "geometry": [[40.417874, -74.800672], [40.423351, -74.745903], [40.374058, -74.619933], [40.253565, -74.48301], [40.13855, -74.587071], [40.182365, -74.702087], [40.149503, -74.723995], [40.341196, -74.943073], [40.417874, -74.800672]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}, 'type': 'fill', 'color': '#79ffd6', 'opacity': 0.8, 'fill': {'outlinecolor': '#afafaf'}}
{'sourcetype': 'geojson', 'source': {"features": [{"geometry": {"coordinates": [[39.727779, -74.734949], [39.557994, -74.417286], [39.497748, -74.313224], [39.295101, -74.548733], [39.322485, -74.860918], [39.514178, -74.986888], [39.607286, -74.877349], [39.727779, -74.734949]], "geometry": [[39.727779, -74.734949], [39.557994, -74.417286], [39.497748, -74.313224], [39.295101, -74.548733], [39.322485, -74.860918], [39.514178, -74.986888], [39.607286, -74.877349], [39.727779, -74.734949]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}, 'type': 'fill', 'color': '#6df0c8', 'opacity': 0.8, 'fill': {'outlinecolor': '#afafaf'}}
{'sourcetype': 'geojson', 'source': {"features": [{"geometry": {"coordinates": [[40.790306, -74.888303], [40.719105, -74.723995], [40.423351, -74.745903], [40.417874, -74.800672], [40.341196, -74.943073], [40.593136, -75.189535], [40.790306, -74.888303]], "geometry": [[40.790306, -74.888303], [40.719105, -74.723995], [40.423351, -74.745903], [40.417874, -74.800672], [40.341196, -74.943073], [40.593136, -75.189535], [40.790306, -74.888303]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}, 'type': 'fill', 'color': '#69e7c0', 'opacity': 0.8, 'fill': {'outlinecolor': '#afafaf'}}
{'sourcetype': 'geojson', 'source': {"features": [{"geometry": {"coordinates": [[39.864703, -75.211443], [39.88661, -75.140242], [39.607286, -74.877349], [39.514178, -74.986888], [39.568948, -75.058088], [39.568948, -75.063565], [39.771595, -75.446951], [39.804456, -75.414089], [39.864703, -75.211443]], "geometry": [[39.864703, -75.211443], [39.88661, -75.140242], [39.607286, -74.877349], [39.514178, -74.986888], [39.568948, -75.058088], [39.568948, -75.063565], [39.771595, -75.446951], [39.804456, -75.414089], [39.864703, -75.211443]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[40.100211, -74.0339], [40.171411, -74.406332], [40.078303, -74.55421], [40.13855, -74.587071], [40.253565, -74.48301], [40.450735, -74.225593], [40.100211, -74.0339]], "geometry": [[40.100211, -74.0339], [40.171411, -74.406332], [40.078303, -74.55421], [40.13855, -74.587071], [40.253565, -74.48301], [40.450735, -74.225593], [40.100211, -74.0339]], "type": "Polygon"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [[40.719105, -74.718518], [40.67529, -74.461102], [40.598613, -74.461102], [40.374058, -74.619933], [40.423351, -74.745903], [40.719105, -74.723995], [40.719105, -74.718518]], "geometry": [[40.719105, -74.718518], [40.67529, -74.461102], [40.598613, -74.461102], [40.374058, -74.619933], [40.423351, -74.745903], [40.719105, -74.723995], [40.719105, -74.718518]], "type": "Polygon"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"}, 'type': 'fill', 'color': '#59dab2', 'opacity': 0.8, 'fill': {'outlinecolor': '#afafaf'}}

Screen Shot 2020-05-23 at 8.01.33 PM
Screen Shot 2020-05-23 at 8.01.33 PM2844Ă—1348 376 KB

2

Hi @jarredparrett welcome to the forum! I believe this kind of visualization would be easier to do with a go.Choroplethmapbox trace, you can take a look at the tutorial on choroplethmapbox for examples.

1 Like
3

@jarredparrett,
A right geojson dict recognized as source for a mapbox .layer should heve the following definition:

geojson = {'type': 'FeatureCollection',
              'features': [...]
                   }

In the listed rows from your geojson dict, the type is missing.
Also if you are interested only in rendering these layers, you must define a dummy trace of type scattermapbux, that contains at least one point of marker_size=0, to draw it as an invisible point.

1 Like
4

Hi Everyone, thank you for the help. Oddly, I found a solution for this by viewing it in a GEOJSON viewer and found a nesting issue with the coordinates. I explain more in the response to my StackOverflow response: https://stackoverflow.com/a/61995413/9836066