Building a Lightweight, Dependency-Free Web Map Engine in TypeScript

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'
});