Toggle between drawing mode and regular map interaction
Project Screens
Visual Experience
A closer look at the project interface, structure, and digital experience delivered by Xino Solutions.
Project Overview
MapLibre Drawing Tool with Konva (Vue 3 + TypeScript)
Built an interactive map-based sketching tool using Vue 3, MapLibre GL JS, and Konva. Users can draw, erase, undo, redo, and save drawings over a live map interface. Designed for geospatial annotations, planning, and creative mapping tasks.
Project Features
What We Built
Core features and product capabilities delivered inside this project.
Adjustable brush size slider (1px–20px)
Freehand smooth sketching with Konva canvas
Multiple brush colors: orange, blue, green, black
Eraser mode implemented via shape masking
Undo and redo drawing actions with history stack
Clear all drawings with confirmation prompt
Export final sketch as PNG image
MapLibre GL JS used for open-source map rendering
Responsive UI powered by @vueuse/core utilities
Want A Project Like This?
Let’s create a modern, scalable, and future-ready digital product for your business.
Start Your Project