Transportation Network Maps using OSMLeaflet Overpass API JavaScript

01011001

00110101

10010011

01011001

00110101

10010011 Simon Legner (simon04)

8 Mai 2014

Data Source (1)

Public transport relations in OSM

ltosm version=06 copyright=OpenStreetMap and contributorsgtltrelation id=63302gtltmember type=node ref=2062486722 role=stopgtltmember type=way ref=145583185 role=platformgtltmember type=way ref=154352821 role=gtltmember type=way ref=195831030 role=gtlttag k=type v=routegtlttag k=route v=traingtlttag k=network v=VORgtlttag k=operator v=OBBgtlttag k=ref v=S1gtlttag k=colour v=0061AFgt

ltrelationgtltosmgt

httpswwwopenstreetmaporgrelation63302

313

Data Source (2)

httpwwwoverpass-apideapiinterpreterdata=[outjson](relation[operator=OumlBB][name~Schnellbahn][type=route]node(r)-gtxway(r)node(w))outbody

413

Rendering | Dynamic Map (1)

1 Load via Overpass API

2 Transform to GeoJSON (JavaScript)Mostly construct route out of ways and nodes

3 Add GeoJSON Layers via Leaflet APIDisplay on top of standard (blackwhite) OSM map

513

Rendering | Dynamic Map (2)

Some features Route colour from OSM Semicircle for halts (mostly for one-way routes) Switchable label for stop names Tool-tip for routestop names

613

Rendering | Dynamic Map (3)

Cartographic generalization needed

713

Rendering | Dynamic Map (3)

Cartographic generalization needed

713

Rendering | Dynamic Map (4)

Positioning of labels manually via CSS

leaflet-div-icon margin -10px 0 0 10px important

Terminal-Marktplatz Maria-Theresien-Strasse

margin-top 5px importantBergisel

margin-left 15px importantmargin-top -20px important

Stubaitalbahnhof

margin-left -115px important

813

Static Image

1 Maximize browser window

2 $ usrbinscrot --select

3 Manually stitch w GIMP

913

Static Image

1 Maximize browser window

2 $ usrbinscrot --select

3 Manually stitch w GIMP

913

Live Demo | Code

httpsgithubcomsimon04POImaphttpsgithubcomsimon04POImaptreewikipedia_wien

1213

Summary

Simple transportation network maps Based on OSM data No local OSM database rendering infrastructure needed

Thank You

Map data ccopy OpenStreetMap contributors Creative Commons Attribution-ShareAlike 20

These slides are licensed under a Creative Commons Attribution-ShareAlike 40 International

1313