Route Map Visualizer

A Copilot Studio skill that visualizes pre-ordered routes and location collections as richly formatted maps — PNG for chat, interactive HTML for the browser, plus optional GeoJSON/KML exports, deep links, and QR codes.

When to use this skill

Use it after an upstream connector call returns coordinates, road geometry, or leg details:

• An Azure Maps / Bing Maps / HERE / Mapbox connector has returned the ordered stops, distances, and a road polyline → pass them all here for visualization.
• A Dataverse / CRM / SharePoint query has returned a list of locations with lat/lon → plot them on a marker map.
• The agent web-searched a set of addresses and resolved their coordinates → visualize the result.

Design principle: This skill does not perform routing optimization. It trusts the caller to supply the correct stop order and, optionally, the road geometry. Offline straight-line rendering is retained as an explicitly schematic fallback.

Features

Road geometry from a connector makes PNG and HTML more accurate. Without it, PNG uses straight lines (labeled schematic) and HTML calls OSRM browser-side.

Payload

Minimal — route (stops in provided order)

{
  "kind": "route",
  "title": "Delivery run",
  "stops": [
    { "name": "Depot",  "lat": -33.8600, "lon": 151.2100 },
    { "name": "Stop A", "lat": -33.9021, "lon": 151.1814 },
    { "name": "Stop B", "lat": -33.8825, "lon": 151.1490 }
  ]
}

With connector road data

{
  "kind": "route",
  "title": "Delivery run — Azure Maps",
  "stops": [
    { "name": "Depot",  "lat": -33.860, "lon": 151.210, "icon": "home" },
    { "name": "Stop A", "lat": -33.902, "lon": 151.181, "icon": "shop" },
    { "name": "Stop B", "lat": -33.882, "lon": 151.149, "icon": "shop" }
  ],
  "route_geometry": [
    { "lat": -33.860, "lon": 151.210 },
    { "lat": -33.864, "lon": 151.207 },
    { "lat": -33.872, "lon": 151.195 },
    { "lat": -33.882, "lon": 151.181 },
    { "lat": -33.902, "lon": 151.181 }
  ],
  "legs": [
    { "from": "Depot",  "to": "Stop A", "distance_m": 5200, "duration_s": 420, "summary": "via Parramatta Rd" },
    { "from": "Stop A", "to": "Stop B", "distance_m": 3100, "duration_s": 280, "summary": "via Church St" }
  ],
  "route_source": "azure_maps",
  "total_distance_m": 8300,
  "total_duration_s": 700,
  "profile": "driving",
  "html": true,
  "map_links": true
}

Marker map (weather / CRM data / site list)

{
  "kind": "map",
  "title": "Field site weather",
  "points": [
    { "name": "Sydney CBD",    "lat": -33.8688, "lon": 151.2093, "value": "28 C", "icon": "sunny" },
    { "name": "Parramatta",    "lat": -33.8150, "lon": 151.0020, "value": "31 C", "icon": "hot" },
    { "name": "Bondi Beach",   "lat": -33.8915, "lon": 151.2767, "value": "24 C", "icon": "partly-cloudy" },
    { "name": "Manly",         "lat": -33.7969, "lon": 151.2870, "value": "22 C", "icon": "cloudy" }
  ]
}

Schematic ordering (opt-in offline fallback)

Add "schematic_order": true to let the script sort stops with a nearest-neighbour + 2-opt heuristic (uses straight-line distances — suitable only when a routing connector is unavailable):

{
  "kind": "route",
  "title": "Estimated visit order",
  "stops": [...],
  "schematic_order": true,
  "round_trip": true
}

Payload field reference

Top-level

Per stop / point

Result keys

Dependencies

matplotlib>=3.8.0       # PNG map
Pillow>=10.0.0          # QR code rasterization
reportlab>=3.6.0        # QR encoder (qrencoder module)

CLI (for local testing)

cd submissions/route-map-visualizer
python scripts/map_generator.py --payload assets/sample_with_geometry.json
python scripts/map_generator.py --payload assets/sample_stops_coords.json --out-prefix out/test