Development

Software stack

To render road networks on the GPU in the browser, Dash Sylvereye relies on the Leaflet.js and PixiJS JavaScript libraries, transparently to the developer.

Leaflet.js supplies the tiled-map layer along with zoom and pan interactions, while PixiJS, a WebGL-accelerated 2D rendering library, draws the road-network primitives.

Leaflet.PixiOverlay bridges the two: it exposes a Leaflet.js overlay that embeds a PixiJS scene on top of the tile layer.

All of this is wrapped in a React component and then transpiled into a Plotly Dash component.

Dash Sylvereye also uses a handful of other JavaScript libraries: JSTS to define edge hit polygons, RBush to look up the hit polygons under a click efficiently, and chroma.js to compute color scales for nodes, edges, and markers.

On the Python side, the network-loading helpers use NetworkX and Shapely, which lets Dash Sylvereye import road networks from OpenStreetMap through OSMnx, or directly from GraphML files.