Gallery¶

Each picture shows one feature, with the line of code that makes it.

The pictures are Södermalm (Stockholm) and Monaco, from OpenStreetMap:

import geopandas as gpd
import roadstyle as rs
edges = gpd.read_file("ui/studio/samples/sodermalm_driving.geojson")   # Södermalm; Monaco is duckOSM's Monaco build

The road map look¶

The default map has outlines, street names along the roads and one-way arrows.

rs.render_edges(edges)

Södermalm at street zoom: Hornsgatan and the streets around Mariatorget, with their names and one-way arrows

Bridges and tunnels¶

A bridge has a slate outline and a soft shadow on the roads under it. A tunnel fades and has a dashed outline. roadstyle works out the drawing order.

rs.render_edges(edges)

Monaco: a bridge with its shadow over a roundabout, a dashed tunnel under both

Stacked roads¶

Roads, ramps and tunnels cross at several levels, and each one is drawn in the right order. To fix a place by hand, use the level editor.

rs.render_edges(edges)

Monaco: tunnels, ramps and a roundabout crossing at several levels

Colour by your data¶

Any column, with a legend.

rs.render_edges(edges, color_by="maxspeed_kmh", cmap="YlOrRd", legend=True)

Södermalm coloured by speed limit, light yellow to dark red, with the legend

3D bridges¶

Bridges are raised decks over the roads under them. A map page has a 2D/3D button. A dashboard has the navigate button, and its box has a tilt slider.

rs.render_edges(edges, view_3d=True)

Södermalm in 3D: a raised bridge deck over the roads below

Street View¶

Click a road, then click the Street View button. A window that you can move shows Google Street View of that road.

rs.render_edges(edges)                # the Street View button is on by default

Ringvägen selected on a satellite base map, with the Street View window showing it

Google 3D¶

A window next to the map shows the photorealistic 3D view of Google. The two cameras move together. A clicked road is drawn in the 3D view. This needs a Google key. To try it, use the live map.

rs.render_edges(edges, google_3d=True)

Götgatan at Medborgarplatsen: the street selected on the map, and the same street in the Google 3D window

Ready-made pages¶

One call makes the standard dashboard: a panel at the left and a toolbox at the right edge (navigate, base map, roads, colour and legend, settings). The panel starts empty: the call above adds the query box and the road card. The pictures show a road selected. The map starts on the base map that you give. The pictures use OpenFreeMap Positron and OpenFreeMap Fiord (the dark theme).

rs.render_dashboard(
    edges, basemap="ofm_positron",
    color_options={"Class": {}, "Speed": {"color_by": "maxspeed_kmh"}},
    dashboard={"panel": {"sections": [{"id": "q", "part": "query"}, {"id": "road", "part": "road_card"}]}},
)

The dashboard on a desktop: Monaco, a road selected in the panel at the left, and the toolbox at the right edge

The dashboard in the dark theme on the OpenFreeMap Fiord base map

The dashboard on a phone: the one-row bar at the top, the map, and the panel as a bottom sheet

Mono palette¶

Shades of grey on a blank canvas: a quiet base under your own data colours. The other palettes are amber (the default), carto and highsat.

rs.render_edges(edges, palette="mono", basemap="blank")

All of Monaco in the mono palette on the blank canvas

Base maps¶

The same map on another background. The base maps are OpenFreeMap Positron (the default), OpenFreeMap Liberty, OpenStreetMap, Esri Gray, Esri Streets, Esri Satellite and a blank canvas that works offline.

rs.render_edges(edges, basemap="blank")

Monaco in 3D on the blank canvas