map-generator_skill

Overview

This skill generates interactive Leaflet maps packaged as MicroSims ready for iframe embedding in narrow MkDocs pages. It produces a complete directory with HTML, CSS, JavaScript, JSON data, and documentation optimized for minimal margins, responsive behavior, and a navbar/TOC-friendly layout. Use it to create geographic visualizations, location-based displays, or educational map modules.

How this skill works

The skill collects map requirements (purpose, region, markers, layers, zoom, interactive features) and builds a docs/sims/[map-name] package. It creates map-data.json for markers/GeoJSON, main.html with Leaflet assets, style.css tuned for iframe embedding, script.js with map initialization and layers, index.md with iframe embed and docs, and metadata.json for discovery. The output is tested for responsiveness, marker popups, and browser compatibility.

When to use it

• Create interactive maps for textbooks, tutorials, or classroom pages
• Display location-based data like landmarks, campuses, or historical sites
• Embed a compact, responsive map inside narrow MkDocs Material pages
• Visualize routes, choropleths, or highlighted regions with GeoJSON
• Provide an interactive map with layer controls and custom markers

Best practices

• Collect center coords, zoom level, and structured marker data upfront
• Limit visible markers to under 100 or use marker clustering for large sets
• Keep body margins and padding at zero and set a fixed #map height for iframes
• Use OpenStreetMap as default tile layer and document any custom tile URLs and attribution
• Add descriptive popup text, keyboard access notes, and high-contrast styles for accessibility

Example use cases

• A MicroSim showing major universities in a state with custom icons and popups
• An interactive campus map with building markers and layer toggles for transit vs. satellite
• A historical map highlighting ancient city boundaries using GeoJSON polygons
• A travel guide page with route visualization and step-by-step popups
• A classroom activity that asks students to identify geographic patterns and submit answers