roadstyle

roadstyle

Python から美しく、インタラクティブな道路地図を作成できます。
実際の道路地図、Google Street View、JavaScript API を備えたオフライン対応の HTML ファイルを 1 つ作成します。

インストール · クイックスタート · ギャラリー · ライブマップ · AI エージェント · ドキュメント

roadstyle を選ぶ理由

• 実際の道路地図。 ケーシングと塗りつぶし、ズームに応じて変化する道路幅、道路名、一方通行の矢印、下を通るトンネルと上を渡る橋、オプションの 3D 橋桁を表示します。
• オフライン対応ファイル 1 つ。 地図、データ、スタイルを 1 つの HTML ページにまとめています。サーバーなしで開いたり、メールで送ったり、あらゆるウェブサイトに掲載したりできます。
• Street View を内蔵。 道路をクリックすると、その道路の進行方向を向いた Google Street View を表示します。
• あらゆる道路データに対応。 GeoDataFrame、ファイル、DuckDB、Arrow、osmnx または duckOSM を利用できます。
• データに基づく色分け。 速度、交通量、その他の任意の列で色分けでき、凡例と色分けメニューも表示できます。
• スクリプトから操作可能。 独自のダッシュボード向けに、window.rs* JavaScript API とイベントを利用できます。
• AI エージェントですぐに利用可能。 MCP サーバーとエージェントスキルを備えています。

インストール

pip install roadstyle              # core
pip install "roadstyle[all]"       # + studio, numeric ramps, vector tiles, lonboard, DuckDB, …

Python ≥ 3.10。個別の追加機能と開発環境のセットアップについては、インストールを参照してください。

クイックスタート

OpenStreetMap から作成する場合。データは不要です。 osmnx を使えば、任意の場所を指定できます（pip install osmnx）。

import osmnx as ox
import roadstyle as rs

G = ox.graph_from_place("Tartu, Estonia", network_type="drive", simplify=False)
G = ox.simplify_graph(G, edge_attrs_differ=["bridge", "tunnel"])   # keep tunnels and bridges apart
rs.render_edges(ox.graph_to_gdfs(G, nodes=False)).save("tartu.html")

独自のデータから作成する場合。 ラインジオメトリと highway 列を含む、任意のファイルまたは GeoDataFrame を利用できます。

import geopandas as gpd
import roadstyle as rs

edges = gpd.read_file("edges.gpkg")        # LineStrings + a `highway` column, any CRS
rs.render_edges(edges).save("map.html")    # open map.html: no server (Street View needs one)

他のスタイル：

rs.render_edges(edges, basemap="dark_matter", view_3d=True)            # dark, 3D bridge decks
rs.render_edges(edges, palette="carto", basemap="positron")            # the classic OSM look
rs.render_edges(edges, color_by="aadt", cmap="viridis")                # colour by your data
rs.render_edges(edges, palette="mono", color_options={                 # several colourings,
    "Traffic": {"color_by": "aadt", "cmap": "viridis"},                #   switched in the browser
    "Speed":   {"color_by": "maxspeed_kmh", "cmap": "magma"}})
rs.render_edges(edges, tiles=True)                                     # 100k+ edges
rs.render_dashboard(edges).save("dashboard.html")                      # map + query sidebar
rs.render_street_view(edges).save("street_view.html")                  # map and Street View side by side

Python を使わない場合は、roadstyle edges.gpkg -o map.html --basemap dark_matter を実行するか、ワークベンチで操作してください：pip install "roadstyle[studio]" && roadstyle studio。

ギャラリー

道路地図風の表示 rs.render_edges(edges)	橋とトンネル rs.render_edges(edges)	データに応じた色分け color_by="maxspeed_kmh"
3D の橋 view_3d=True	ストリートビュー 道路をクリック	ダッシュボード rs.render_dashboard(edges)

各表示とそのコードはこちら：ギャラリー。

入力データ

必須なのは geometry と highway のみです。ほかの列を指定すると機能が有効になります。

duckOSM（duckosm export-gis）は、この形式をそのままエクスポートします。また、osmnx のエッジもそのまま使えます：rs.render_edges(ox.graph_to_gdfs(G, nodes=False))。

JavaScript から操作する

保存したページでは、window.rs* 関数と rs:* イベントが公開されます。

const ids = rsQuery(p => p.maxspeed_kmh > 30); // feature ids whose properties match
rsColor(ids, "#ff00aa");  rsFocus(ids);       // paint them, fit the camera
document.addEventListener("rs:select", e => console.log(e.detail.properties));

すべての関数とイベントについては、JavaScript APIをご覧ください。

AI エージェント向け

MCP サーバー。 MCP 対応の AI アプリ（Claude Code、Claude Desktop、Cursor など）で、コードを書かずに道路地図を描画できます。render_place("Tartu, Estonia")、render_file("roads.gpkg")、snapshot を使います。 それぞれ HTML 地図を保存し、そのパスとエージェントが確認できる PNG プレビューを返します。

claude mcp add roadstyle -- uvx roadstyle-mcp

{"mcpServers": {"roadstyle": {"command": "uvx", "args": ["roadstyle-mcp"]}}}

Claude Code プラグイン。 MCP サーバーと以下のスキルをまとめてインストールできます。

/plugin marketplace add Khoshkhah/roadstyle
/plugin install roadstyle@roadstyle

コードを書くエージェント向け：

• skills/roadstyle/SKILL.md：roadstyle を 使う エージェント向けのスキルです（1 回の呼び出し、データ契約、JS API、注意点）。 Claude Code にインストールするには：

  mkdir -p ~/.claude/skills/roadstyle && curl -fsSL -o ~/.claude/skills/roadstyle/SKILL.md \
    https://raw.githubusercontent.com/Khoshkhah/roadstyle/main/skills/roadstyle/SKILL.md
  

• AGENTS.md：このリポジトリで 作業する エージェント向けです。
• llms.txt：LLM 向けにリンク一覧としてまとめたドキュメントサイトです。

API キー

どちらのキーも任意です。キーがなくても roadstyle は動作しますが、機能が一部制限されます。

• CARTO：デフォルトのベースマップに使用します。キーがない場合、タイルに API KEY REQUIRED と表示されます。CARTO_API_KEY を設定するか、キー不要のベースマップ（esri_street、esri_dark_gray、osm、blank）を使ってください。
• Google Maps：ストリートビューに使用します。ストリートビューはキーなしでも使えます。キーを追加すると Linked モードが使えるようになります。実際のパノラマに合わせて、地図上のマーカーが一緒に移動し、向きを変えます。

export CARTO_API_KEY="…"                                          # environment variable

{ "config": { "api_keys": { "carto": "…" } } }

rs.render_edges(edges, street_view_key="AIza…")         # the floating Street View window
rs.render_street_view(edges, street_view_key="AIza…")   # the side-by-side page

詳細：設定とベースマップ · Google ストリートビュー。

ドキュメント

**khoshkhah.github.io/roadstyle**では、すべてのページでライブマップをご覧いただけます。

使用技術

• MapLibre GL JS（BSD-3-Clause）がすべてのウェブマップを描画します。roadstyleがスタイルと データを作成し、保存したページごとにMapLibreのコピーを埋め込むため、オフラインでも開けます。
• **OpenStreetMap**のデータ（© OpenStreetMap contributors、ODbL）と **openstreetmap-carto**のスタイルを使用しています。roadstyleはこのスタイルに従って道路のクラス、 色、幅を設定します。
• **HiGHS**が、SciPyを通じて、どの道路を最前面に描画するかを解決します。
• ジオメトリには**GeoPandasとShapelyを使用します。 ノートブック用バックエンドにはlonboard（deck.gl）とfolium** を使用します。

ライセンス

MIT。ベースマップのタイルは、独自の帰属表示と利用規約を定める サードパーティーのサービス（CARTO、OSM、Esri）から提供されています。