ArcGIS JavaScript Maps

A collection of interactive, mobile-responsive maps built with the ArcGIS JavaScript SDK and Calcite Design System.

🌐 View Live Demos

✨ Features

• Mobile-First Design: All demos feature responsive layouts with collapsible panels and touch-optimized controls
• Real-Time Data: Integration with OpenStreetMap Overpass API and ArcGIS Living Atlas
• Interactive Visualizations: 3D scenes, clustering, hex binning, and temporal filtering
• Consistent UI/UX: Shared design patterns and mobile responsiveness framework
• Modern Web Standards: Dynamic viewport height, hardware-accelerated animations, and accessibility features

🗺️ Demo Maps

Interactive Data Exploration

• OSM Real-Time Amenities Explorer - Query OpenStreetMap data in real-time with 8 amenity categories
• Alternative Fuel Sources - Interactive map showcasing alternative fuel sources across the United States
• US Power Plants Clustering - Clustered visualization of power plants by fuel type

3D Visualizations

• Maryland Traffic Cameras - 3D map with live traffic camera feeds
• Buildings Scene - 3D building visualization with height-based rendering

Temporal & Historical Data

• Wildfires Map - Active and historic wildfire incidents with temporal filtering

Geographic Boundaries

• Point, Line, and Polygon Demo - Basic geometry types with custom styling
• Toronto Roads - Road network visualization
• Philadelphia County Boundaries - County boundaries from GeoJSON data
• Two-State Solution Map - Geographic boundaries visualization

📱 Mobile Responsiveness

All demos implement a consistent mobile-first design pattern:

• Collapsible Control Panels: Slide-up panels on mobile devices
• Touch-Optimized Controls: Minimum 44x44px touch targets
• Dynamic Viewport Height: Accounts for mobile browser chrome
• Responsive Positioning: UI elements adapt to screen size
• Search & Location: Built-in search and geolocation widgets

See MOBILE_RESPONSIVENESS_GUIDE.md for implementation details.

🚀 Quick Start

Local Development

1. Clone the repository:

   git clone https://github.com/kdmonroe/arcgis-js-maps.git
   cd arcgis-js-maps

2. Set up your API key:

   cp shared/config.template.js shared/config.js
   # Edit shared/config.js and add your ArcGIS API key

3. Start a local server:

   # Using Python
   python -m http.server
   
   # Or using Node.js http-server
   npx http-server

4. Visit http://localhost:8000 in your browser

Creating a New Demo

1. Copy the template:

   cp shared/map_template.html demos/your_new_demo.html

2. Include the mobile-responsive stylesheet:

   <link rel="stylesheet" href="../shared/mobile-responsive.css">

3. Follow the patterns in MOBILE_RESPONSIVENESS_GUIDE.md

4. Add your demo to index.html

🛠️ Technologies

• ArcGIS Maps SDK for JavaScript 4.32 - Interactive mapping platform
• Calcite Design System 1.9.2 - UI components and styling
• Font Awesome 6.4.0 - Icons and visual elements
• OpenStreetMap Overpass API - Real-time OSM data queries
• GitHub Pages - Static site hosting
• GitHub Actions - Automated deployment

📚 Documentation

• Mobile Responsiveness Guide - Comprehensive mobile patterns and best practices
• Project Overview - Architecture and development guidelines
• GitHub Pages Deployment - Deployment configuration
• Image Replacement Guide - Asset management

🔑 API Key Management

This project uses separate API keys for development and production:

• Development: No referrer restrictions (for localhost)
• Production: Restricted to GitHub Pages domain

Production keys are injected via GitHub Secrets during deployment. Never commit API keys to version control.

See Project Overview for detailed API key setup instructions.

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

1. Follow the established mobile-responsive patterns
2. Test across multiple devices and browsers
3. Update documentation for new features
4. Maintain consistent code style
5. Add your demo to the index page

📄 License

MIT License - see the project for more details.

👤 Author

Keon Monroe

• Website: kdmonroe.dev
• GitHub: @kdmonroe

---

Built with ❤️ using the ArcGIS JavaScript SDK and Calcite Design System