maps_skill

Overview

This skill provides two Vue 3 map components for building geographic visualizations: TopoJSONMap for full-featured region maps and DottedMap for stylized dot-matrix world maps. It is optimized for choropleths, point markers, links, and minimalist global views. Use it to turn geographic data into interactive, production-ready visuals in Vue applications.

How this skill works

TopoJSONMap renders geographic areas from a TopoJSON object and overlays data-driven fills, points, and links. You provide topoJson, a mapFeatureKey to match data entries to features, and optional accessors for colors, sizes, and labels. DottedMap renders a dot-grid representation of landmasses and places pins using latitude/longitude; it accepts options for grid shape, per-country colors, region cropping, and precomputed maps for performance.

When to use it

• Create choropleth maps by coloring regions based on metrics (population, sales, risk).
• Show city or office locations with labeled pins and size-scaled points.
• Visualize network links between geographic points (routes, flows).
• Design minimalist global overviews or product presence maps using dot matrices.
• Focus on a specific region or subset of countries with region or country filters.

Best practices

• Always supply valid TopoJSON for TopoJSONMap; match features using a stable mapFeatureKey.
• Use accessor functions for areaColor, pointColor, and linkColor to keep styling logic separate from data.
• Limit the DottedMap mapHeight (or mapWidth) to balance fidelity and performance; precompute maps for large or static displays.
• Use ISO 3166-1 alpha-3 country codes when targeting specific countries in DottedMap.
• Provide fitView, zoomExtent, and sensible padding for interactive TopoJSONMap views to ensure good initial framing.

Example use cases

• US state-level choropleth showing population or revenue using TopoJSONMap with custom areaColor accessor.
• Global office footprint using DottedMap pins for HQ and regional offices with distinct colors and radii.
• Flight or trade lanes drawn with TopoJSONMap links connecting city points to highlight flows.
• Regional sales heatmap: crop DottedMap or TopoJSONMap to a lat/lng region and render per-country color scale.
• Minimal product availability map: DottedMap with selected countryColors and a dark background for dashboards.