Convert from Mapbox GL JS to Leaflet with OpenStreetMap tiles

[Copilot]

This PR converts the earthquake monitoring application from Mapbox GL JS to Leaflet.js with OpenStreetMap tiles, addressing the requirement to migrate away from the proprietary Mapbox service.

Key Changes

🗺️ Map Library Migration

• Replaced mapbox-gl (v3.13.0) with leaflet (v1.9.4)
• Updated HTML to use Leaflet CSS instead of Mapbox GL CSS
• Removed dependency on Mapbox access tokens

📦 Bundle Size Optimization

• Reduced JavaScript bundle size from 1.6MB to 192KB (88% reduction)
• Faster loading times and improved performance

🔧 Technical Implementation

• Map Initialization: Converted mapboxgl.Map to L.map with OpenStreetMap tile layer
• Coordinate System: Updated from Mapbox's [lng, lat] to Leaflet's [lat, lng] format
• Icons & Markers: Replaced Mapbox GL's image/symbol system with Leaflet's icon-based markers
• GeoJSON Rendering: Converted Mapbox GL layers to Leaflet GeoJSON layers for tsunami forecasts
• Bounds Handling: Updated LngLatBounds to LatLngBounds throughout the codebase
• Minimap Component: Completely rewritten to use Leaflet's API while maintaining functionality

🌟 Features Preserved
All existing functionality remains intact:

• Interactive earthquake map with zoom controls
• Earthquake epicenter visualization
• Seismic intensity station plotting
• Prefecture-level earthquake data display
• Earthquake Early Warning (EEW) area rendering
• Tsunami forecast coastline visualization with flashing effects
• Minimap with viewport tracking rectangle
• Automatic map bounds fitting

📁 Files Modified

• package.json - Updated dependencies
• index.html - Switched to Leaflet CSS
• src/utils/map/initMap.js - Core map initialization
• src/lib/minimap.js - Minimap component rewrite
• src/utils/map/internal/internalBound.js - Bounds utilities
• src/utils/map/renderConditions/ - All earthquake visualization modules

The conversion maintains the same user experience while eliminating the need for Mapbox services and significantly reducing the application's footprint.

Screenshot showing the successfully converted application with Leaflet's characteristic zoom controls and preserved UI layout

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mill	❌ Failed (Inspect)			Jul 30, 2025 1:45am

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​leaflet@​1.9.4

View full report