Map Generator

Map Generator Skill

This skill creates interactive Leaflet maps as MicroSims for intelligent textbooks built with MkDocs Material theme.

When to Use This Skill

Use this skill when users request:

• Geographic visualizations (regions, countries, cities)
• Location-based data displays (historical sites, landmarks)
• Campus or facility maps
• Travel route visualizations
• Custom maps with markers, layers, or highlighted borders
• Educational geography content

Workflow

Step 1: Gather Map Requirements

Ask the user for the following information:

1. Map Purpose: What geographic data are we visualizing? 2. Geographic Region: Region name, country, city, or coordinates 3. Markers/Points: What locations need markers? (names, coordinates, descriptions) 4. Map Layers: Do you need multiple layers (satellite, terrain, street map)? 5. Borders/Regions: Do any borders or regions need to be highlighted? 6. Zoom Level: Initial zoom level (1-18, where 1 is world view, 18 is building level) 7. Interactive Features: Popups, custom markers, layer controls? 8. Educational Context: Related concepts, Bloom's taxonomy level, target audience

Example user input: "Create a map showing major universities in California with markers for each campus"

Step 2: Create Directory Structure

Create the MicroSim directory:

docs/sims/[map-name]/

Naming convention: Use kebab-case (e.g., california-universities, ancient-rome-map, world-capitals)

Step 3: Create map-data.json (Optional)

If the map includes markers or GeoJSON data, create a map-data.json file:

{
  "center": {
    "lat": 37.7749,
    "lng": -122.4194
  },
  "zoom": 10,
  "title": "Map Title",
  "subtitle": "Map Subtitle",
  "markers": [
    {
      "lat": 37.7749,
      "lng": -122.4194,
      "title": "Location Name",
      "description": "Location description",
      "category": "category-name"
    }
  ]
}

For borders/regions: Use GeoJSON format for complex geometries.

Step 4: Create main.html

Create main.html using the template from assets/template-iframe-main.html:

Key elements:

• Leaflet CDN links (CSS and JS)
• Map container div with id="map"
• Optional controls section for layer toggles
• Script reference to script.js
• Minimal padding/margins for iframe embedding

Replace placeholders:

• {{TITLE}} - Map title
• {{SUBTITLE}} - Map subtitle
• {{MAP_HEIGHT}} - Map container height (default: 400px)

Step 5: Create style.css

Create style.css using the template from assets/template-iframe-style.css:

Critical requirements for iframe embedding:

• body { margin: 0; padding: 0; } - No body margins
• Minimal margins throughout (2px max for headings)
• Fixed height for #map container
• Responsive breakpoints for mobile
• aliceblue background (repository standard)

Customization options:

• Map height (adjust based on content needs)
• Control button styling
• Marker popup styling

Step 6: Create script.js

Create script.js using the template from assets/template-script.js:

Core functionality:

1. Initialize Leaflet map with center coordinates and zoom level 2. Add tile layer (OpenStreetMap default, or custom) 3. Add markers with popups 4. Optional: Add GeoJSON layers for borders/regions 5. Optional: Add layer controls for toggling map types

Replace placeholders:

• {{CENTER_LAT}}, {{CENTER_LNG}} - Map center coordinates
• {{ZOOM}} - Initial zoom level
• {{MARKERS}} - Marker data array
• {{TILE_LAYER}} - Tile layer URL (OpenStreetMap, satellite, etc.)

Common tile layers:

• OpenStreetMap: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
• Satellite: https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
• Terrain: https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png

Step 7: Create index.md

Create index.md using the template from assets/template-index.md:

Structure:

• Title and overview
• iframe embed (width="100%", height="700", frameborder="0")
• Link to fullscreen view
• Features section (interactive elements)
• Customization guide (how to modify the map)
• Technical details (library version, dependencies)
• Use cases
• References

iframe embed format:

<iframe src="main.html" width="100%" height="700" frameborder="0"></iframe>

[View Fullscreen](main.html){:target="_blank"}

Step 8: Create metadata.json

Create metadata.json using the template from assets/template-metadata.json:

Dublin Core fields:

• title, description, subject, creator, date, type, format, language
• coverage, rights, audience

Map-specific fields:

• map_type: "interactive", "choropleth", "route", etc.
• center_lat, center_lng: Center coordinates
• zoom_level: Initial zoom level
• marker_count: Number of markers
• concepts: Array of related concepts
• bloom_taxonomy: Cognitive level (Remember, Understand, Apply, etc.)

Step 9: Update mkdocs.yml Navigation

Add the new map to the navigation in mkdocs.yml:

nav:
  - MicroSims:
      - Introduction: sims/index.md
      - [Map Name]: sims/[map-name]/index.md

Naming: Use Title Case for navigation labels

Step 10: Test and Validate

Perform these validation steps:

1. Direct HTML test: Open docs/sims/[map-name]/main.html in browser

• Verify map loads correctly
• Test zoom and pan controls
• Click markers to verify popups
• Test responsive behavior (resize window)

2. MkDocs test: Run mkdocs serve and navigate to the map page

• Verify iframe embedding works
• Check margins/padding (should be minimal)
• Test fullscreen link
• Verify navigation link works

3. Browser compatibility: Test in Chrome, Firefox, Safari

4. Mobile test: Verify responsive behavior on mobile devices

Common Map Patterns

Simple Marker Map

Basic map with multiple markers:

const markers = [
  { lat: 40.7128, lng: -74.0060, title: "New York", description: "The Big Apple" },
  { lat: 34.0522, lng: -118.2437, title: "Los Angeles", description: "City of Angels" }
];

markers.forEach(marker => {
  L.marker([marker.lat, marker.lng])
    .bindPopup(`<b>${marker.title}</b><br>${marker.description}`)
    .addTo(map);
});

Highlighted Region (GeoJSON)

Show a highlighted border or region:

const region = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [[...]]
  }
};

L.geoJSON(region, {
  style: { color: 'red', weight: 3, fillOpacity: 0.2 }
}).addTo(map);

Layer Controls

Toggle between map types:

const street = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');

const baseMaps = {
  "Street": street,
  "Satellite": satellite
};

L.control.layers(baseMaps).addTo(map);
street.addTo(map); // Default layer

Custom Marker Icons

Use custom icons for different categories:

const universityIcon = L.icon({
  iconUrl: 'university-icon.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [0, -32]
});

L.marker([lat, lng], { icon: universityIcon }).addTo(map);

Educational Considerations

Bloom's Taxonomy Alignment

• Remember: Identify locations on a map
• Understand: Explain geographic relationships
• Apply: Use maps for problem-solving (routes, distances)
• Analyze: Compare geographic patterns
• Evaluate: Assess geographic data quality
• Create: Design custom maps for specific purposes

Accessibility

• Ensure marker popups have descriptive text
• Provide text alternatives for visual information
• Use high-contrast colors for highlighted regions
• Include keyboard navigation support

Performance

• Limit markers to <100 for optimal performance
• Use marker clustering for large datasets:

  const markers = L.markerClusterGroup();
  markers.addLayer(L.marker([lat, lng]));
  map.addLayer(markers);

Troubleshooting

Map not displaying

• Check that Leaflet CDN links are correct
• Verify #map div has a fixed height in CSS
• Ensure coordinates are in decimal format (not DMS)

Markers not appearing

• Verify latitude/longitude order (lat first, lng second)
• Check that coordinates are within valid ranges (-90 to 90 lat, -180 to 180 lng)
• Ensure markers are added after map initialization

Iframe not fitting properly

• Verify body { margin: 0; padding: 0; } in CSS
• Check iframe height in index.md (adjust if needed)
• Ensure container has minimal margins

References

• Leaflet Documentation
• Leaflet Tutorials
• OpenStreetMap Tile Usage Policy
• GeoJSON Format Specification

Version History

• v1.0 (2025-01-16): Initial release with basic marker maps, layer controls, and GeoJSON support

{{TITLE}}

{{DESCRIPTION}}

Interactive Map

<iframe src="main.html" width="100%" height="700" frameborder="0"></iframe>

View Fullscreen{:target="_blank"}

Overview

{{OVERVIEW_TEXT}}

Features

Interactive Elements

• Zoom and Pan - Use mouse wheel or touch gestures to zoom, click and drag to pan
• Marker Popups - Click on markers to view detailed information
• Layer Controls - Toggle between different map views (street, satellite, terrain)
• Reset View - Return to the initial map position and zoom level

Visual Design

• Color-coded markers for different categories
• Clear, informative popups with titles and descriptions
• Responsive layout that adapts to different screen sizes
• Minimal padding optimized for textbook integration

Map Details

Center Coordinates: {{CENTER_LAT}}, {{CENTER_LNG}}

Initial Zoom Level: {{ZOOM}}

Number of Markers: {{MARKER_COUNT}}

Base Map: {{BASE_MAP_TYPE}}

Customization Guide

This map can be customized by editing the files in the sims/{{MAP_NAME}}/ directory.

Adding Markers

To add new markers, edit the markers array in script.js:

const markers = [
    {
        lat: 40.7128,
        lng: -74.0060,
        title: "New York City",
        description: "The largest city in the United States",
        link: "https://en.wikipedia.org/wiki/New_York_City"
    },
    // Add more markers here
];

Fields:

• lat - Latitude (-90 to 90)
• lng - Longitude (-180 to 180)
• title - Marker title (shown in popup)
• description - Detailed description (optional)
• link - External link for more information (optional)

Changing the Base Map

Modify the tile layer URL in script.js:

OpenStreetMap (default):

const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
});

Satellite Imagery:

const tileLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: '© Esri'
});

Terrain Map:

const tileLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenTopoMap contributors'
});

Adjusting Map Height

Edit style.css to change the map container height:

#map {
    height: 500px;  /* Change this value */
    width: 100%;
}

Also update the iframe height in this index.md file to match.

Custom Marker Icons

Replace the default marker icons by adding custom icons in script.js:

const customIcon = L.icon({
    iconUrl: 'custom-marker.png',
    iconSize: [32, 32],
    iconAnchor: [16, 32],
    popupAnchor: [0, -32]
});

L.marker([lat, lng], { icon: customIcon }).addTo(map);

Adding GeoJSON Layers

To highlight regions or borders, add GeoJSON data:

const regionData = {
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [[...]]
    },
    "properties": {
        "name": "Region Name"
    }
};

L.geoJSON(regionData, {
    style: { color: 'red', weight: 3, fillOpacity: 0.2 }
}).addTo(map);

Technical Details

• Library: Leaflet 1.9.4
• CDN: unpkg.com (with SRI integrity checks)
• Browser Compatibility: All modern browsers (Chrome, Firefox, Safari, Edge)
• Dependencies: Leaflet CSS and JavaScript (loaded from CDN)
• Responsive: Yes - adapts to mobile, tablet, and desktop screens
• Performance: Optimized for up to 100 markers (use clustering for more)

Educational Applications

This map pattern can be adapted for various educational contexts:

Geography and History

• Historical event locations and timelines
• Ancient civilization sites
• Exploration routes and trade networks
• Geographic feature identification

Science

• Biodiversity hotspots
• Climate zones and weather patterns
• Geological formations
• Ecological regions

Social Studies

• Cultural landmarks
• Population centers
• Economic activity zones
• Political boundaries

Campus and Facility Maps

• University campus buildings
• Museum floor plans
• Park trails and facilities
• City infrastructure

Bloom's Taxonomy Alignment

This map supports multiple cognitive levels:

• Remember: Identify and locate specific places on the map
• Understand: Explain spatial relationships between locations
• Apply: Use the map to solve problems (distances, routes)
• Analyze: Compare and contrast geographic patterns
• Evaluate: Assess the significance of location-based data
• Create: Design custom maps for specific educational purposes

Accessibility Considerations

• All markers include descriptive text in popups
• Keyboard navigation supported through Leaflet controls
• High-contrast colors used for visibility
• Text alternatives provided for geographic information

References

• Leaflet Official Documentation - Complete API reference
• Leaflet Tutorials - Step-by-step guides
• OpenStreetMap Tile Usage Policy - Terms of service
• GeoJSON Format Specification - Standard for geographic data
• Map Projections - Understanding coordinate systems

Version History

• v1.0 ({{DATE}}): Initial map created with {{MARKER_COUNT}} markers

---

Generated using the map-generator skill for intelligent textbooks