map-visualization

Map Visualization

Use this skill when the user asks to:

• Show locations on a map with markers.
• Visualize a route or path between points.
• Outline an area or boundary on a map.
• Combine markers, routes, and regions in one map.
• Turn structured location data into a rendered map block.

This skill outputs map markdown for the in-app message renderer (the chat message list UI) using fenced code blocks:

```map
{ ...json... }
```

Core Rules

• Always output valid JSON inside ```map blocks.
• Keep numeric fields as numbers, not strings.
• Use lat and lon for every coordinate.
• Keep each map focused on one spatial question.
• If data is incomplete or ambiguous, state assumptions briefly before the map.

Runtime Target

• Target renderer: any chat/message renderer that supports ```map fenced blocks.
• Expected format: fenced code block with language tag map and a JSON object.
• If unsure, still output the exact ```map + JSON structure.

Supported Fields

• title
• height
• center
• span
• markers
• polylines
• polygons

JSON Schema

{
  "title": "SF Delivery Route",
  "height": 260,
  "center": { "lat": 37.7749, "lon": -122.4194 },
  "span": 0.05,
  "markers": [
    {
      "lat": 37.7749,
      "lon": -122.4194,
      "title": "Warehouse",
      "tint": "blue"
    },
    {
      "lat": 37.7849,
      "lon": -122.4094,
      "title": "Dropoff",
      "tint": "#FF5A36"
    }
  ],
  "polylines": [
    {
      "coordinates": [
        { "lat": 37.7749, "lon": -122.4194 },
        { "lat": 37.7798, "lon": -122.4140 },
        { "lat": 37.7849, "lon": -122.4094 }
      ],
      "color": "blue"
    }
  ],
  "polygons": [
    {
      "coordinates": [
        { "lat": 37.7700, "lon": -122.4300 },
        { "lat": 37.7800, "lon": -122.4300 },
        { "lat": 37.7800, "lon": -122.4100 },
        { "lat": 37.7700, "lon": -122.4100 }
      ],
      "fillColor": "#22AA66",
      "strokeColor": "green"
    }
  ]
}