Skip to content

Map Development Prompts

This page documents the prompts used to create the interactive map application.

Initial Status Check

Prompt: 

check on the status of the maplibre html

Result: Claude analyzed the existing project structure and reported on:

  • index.html - MapLibre version
  • js/app.js - JavaScript implementation
  • css/style.css - Styling
  • data/units.geojson - Polygon boundaries
  • data/offices.geojson - Point locations

Starting the Development Server

Prompt: 

run the serve on port 8080

Result: Started Python HTTP server. When port 8080 was occupied:

Follow-up Prompt: 

try 8081

Result: Port 8081 also occupied, server started on port 8082.

WebGL Error Resolution

Context: MapLibre failed with WebGL context creation error on remote VM.

Error Message: 

Failed to initialize WebGL: Could not create a WebGL context,
GL_RENDERER = ANGLE (Mesa, llvmpipe...), Sandboxed = no

Prompt: 

yes, I am running on remote VM

Context: User confirmed they needed a non-WebGL solution.

Leaflet Version Creation

Prompt: 

[Confirmed need for Leaflet fallback after WebGL discussion]

Result: Claude created:

  • index-leaflet.html - HTML using Leaflet instead of MapLibre
  • js/app-leaflet.js - Leaflet JavaScript implementation

Key features of the Leaflet version:

  • Canvas rendering (preferCanvas: true)
  • No WebGL dependency
  • OpenStreetMap tiles
  • Same UI/UX as MapLibre version

Layer Ordering Fix

Prompt: 

move the regional polygons to the bottom of the rendering so I can click
on the smaller national forest units inside of them

Result: Claude modified js/app-leaflet.js to:

  1. Separate features into regionFeatures and unitFeatures
  2. Render regional boundaries first (bottom layer)
  3. Render smaller units second (top layer)
  4. Apply different styling to regions:
  5. 25% opacity (more transparent)
  6. Dashed outline
  7. Thinner stroke

Code Change: 

// Types that should be rendered on bottom (large regions)
const REGION_TYPES = ['Regional Office'];

// Add regions layer FIRST (renders on bottom)
regionsLayer = L.geoJSON(regionFeatures, {
    style: (feature) => ({
        ...getPolygonStyle(feature),
        fillOpacity: 0.25,
        weight: 1,
        dashArray: '5, 5'
    }),
    // ...
}).addTo(map);

// Add units layer SECOND (renders on top)
unitsLayer = L.geoJSON(unitFeatures, {
    // ...
}).addTo(map);

Key Implementation Details

Map Configuration

const MAP_CONFIG = {
    center: [40, -110],  // Centered on western US
    zoom: 4,
    minZoom: 2,
    maxZoom: 18
};

Agency Color Scheme

const AGENCY_COLORS = {
    'USFS': {
        'National Forest': '#228B22',
        'Regional Office': '#006400',
        default: '#228B22'
    },
    'BLM': { default: '#DAA520' },
    'NPS': { default: '#8B4513' },
    'BIA': { default: '#800080' },
    'Tribal': { default: '#800080' }
};

Interactive Features

  • Click handlers on polygons and markers
  • Hover effects with style changes
  • Popup generation with unit details
  • Sidebar selection synchronization
  • Mobile-responsive toggle