Most modern web maps rely on heavy libraries like Leaflet or Mapbox GL. While those are powerful, I wanted to explore how far we could push modern web standards by building a fully dependency-free, high-performance web map engine from scratch in TypeScript.
The result is Map Atlas — an open-source mapping engine and Progressive Web App with zero external mapping dependencies.
- 🌐 Live App: mapapp-lovat.vercel.app
- ⚡ Cloudflare Edge Mirror: map-atlas.apkscope.workers.dev
- 📦 npm Package:
npm i map-atlas - 🐙 GitHub Repository: github.com/jojin1709/map-atlas
🚀 Key Features
- Custom Canvas 2D Tile Engine: High-performance tile rendering implementing Web Mercator projections ($EPSG:3857$) entirely in raw TypeScript and HTML5 Canvas.
- Interactive 3D WebGL Globe: Switch smoothly from flat 2D maps to an interactive 3D textured globe with atmosphere rendering and raycasting.
- Live Weather Radar & Traffic: Real-time Doppler precipitation radar overlays powered by RainViewer and live road congestion data from TomTom.
- 360° Street View: Street-level spherical panorama viewer built directly into the interface.
- PWA & Offline Manager: Installable on mobile and desktop with Service Worker caching to store map tiles locally for offline viewing.
- Turn-by-Turn Routing & Geocoding: Waypoint navigation, elevation profiles, and address autocomplete via OpenStreetMap / Nominatim.
📦 Using it as an npm Library
The core engine is compiled and published as a standalone library with zero external dependencies:
npm install map-atlas import { MapEngine } from 'map-atlas'; import 'map-atlas/dist/map-atlas.css'; const container = document.getElementById('map'); const map = new MapEngine(container, { center: [40.7128, -74.0060], zoom: 12, minZoom: 1, maxZoom: 19 }); map.addMarker({ id: 'nyc-marker', lngLat: [-74.0060, 40.7128], title: 'New York City' }); 
