Mapixa
A high-performance, modular, and extensible suite of drawing, measurement, navigation, and layer visibility tools for MapLibre GL JS and React published on NPM.
Overview
Mapixa is an extensible, zero-framework-bloat GIS mapping toolkit engineered for MapLibre GL JS and React. Built strictly in TypeScript with modern pure CSS styling and CSS custom properties, Mapixa equips web developers with an all-in-one drawing suite (custom markers, polylines, spherical area polygons, geodesic circles, rectangles, freehand sketching, and self-intersection detector), an interactive shape eraser, and a live drawn layer manager supporting dynamic z-index reordering. It additionally bundles geodesic distance rulers, canvas bounding-box screenshot capture, fly-to coordinate jumper, dynamic raster/vector basemap switchers, and full lifecycle draw events with real-time metrics (distance in km, spherical area in m² and km², radius, and perimeter) ready for production dashboards.
Key Benchmark:
20+ production GIS map tools, zero UI framework dependencies, published on NPM
Key Engineering Features
Key Technical Challenges & Solutions
1Zero UI Framework Bloat in React & MapLibre
Architected every control and modal using pure vanilla CSS and standard CSS Custom Properties, enabling drop-in compatibility across any UI framework without style bleeding.
2High-precision Spherical and Geodesic Calculations
Engineered Haversine segment accumulation and spherical excess algorithms to provide accurate geodesic line distances and polygon areas directly in real time.
Project Specifications
- Category
- package
- Engineering Role
- Package Author & Maintainer
- NPM Package
- npm i mapixa
- Status
- Production & Active
- Live Demo
- www.npmjs.com/package/mapixa
- GitHub Repository
- github.com/seyedali-rafazi/Mapixa
