Straightforward map from geojson w/ polygons

plotly.js
1

Hello,

I’m trying to create a map from a geojson file.
I do not wish to use any base map or mapbox, only draw the multipolygons from my geojson and plot a choropleth from the geojson feature properties.

Closest related questions I’ve found have very python-ish solutions : here (geojson plotting) and here (with mapbox)

The .js docs are a bit lackluster for this use-case.
The filled scatterbox trace example is not working (at least on my machine)

Is there any recommended way to do it in an efficient way or should I use another tool (like leaflet?)

Thank you :slight_smile:

2

Hello @MaxMerg and thank you for taking into account my solution here:

If you just need to plot multipolygons and choropleths, I thing my solution is going to be OK for you. To get ride of any kind of map, just use basemap_visible=False

In my case, slabs my geoDataFrame:

slabs = gpd.read_file(pathJoin(mainPath, "geoSlabsTriangles.geojson"))

fig = px.choropleth(slabs, # slabs is my 
                    geojson=slabs.geometry,
                    locations= slabs.index,
                    basemap_visible=False,
                    color_continuous_scale="ylgnbu",
                    color = [1] * slabs.shape[0],
                    )
3

I’m just looking at doing a similar thing in a Python / Dash context, and probably going to use the Dash leaflet wrapper. The main reasons are I’m quite confused by px.choropleth and go.choropleth, and also think they may have limited flexibility, while Leaflet seems enormously powerful and is extensively documented.

If the same logic applies for JS, that might suggest Leaflet could be a better approach. There is other plotly.js doc here however:

4

I’m desperately trying to understand the plotly.js syntax from the attribute.js source

This gives an empty map with a correct colorbar.

/* 
* fetched data.geojson beforehand
* is a FeatureCollection of features with multipolygons as geometries
*/
let ids = [];
let values = [];

data.features.forEach((feat, idx)=> {
    ids.push(feat.properties.ID);
    values.push(feat.properties.surface);
});

let data = [
    {
        type: 'choropleth',
        locations: ids,
        z: values,
        geojson: data,
        featureidkey: 'properties.ID',
        locationmode:'geojson-id',
        colorbar:'Surface',
        fill:'toself', //tried both with and without
    }    
]

let layout = {
    title:"MyMap",
    geo: {
        scope: 'europe'
    }
};
Plotly.newPlot("myMap", data, layout);

log and consoles says

Uncaught (in promise) TypeError: t is undefined
    i https://cdn.plot.ly/plotly-2.32.0.min.js:8
    default https://cdn.plot.ly/plotly-2.32.0.min.js:8
    ct https://cdn.plot.ly/plotly-2.32.0.min.js:8
    c https://cdn.plot.ly/plotly-2.32.0.min.js:8
    extractTraceFeature https://cdn.plot.ly/plotly-2.32.0.min.js:8
    calcGeoJSON https://cdn.plot.ly/plotly-2.32.0.min.js:8
    update https://cdn.plot.ly/plotly-2.32.0.min.js:8
    plot https://cdn.plot.ly/plotly-2.32.0.min.js:8
2 plotly-2.32.0.min.js:8:2959999