Portfolio Case Study

MapLibreDrawingToolwithKonva(Vue3+TypeScript)

Frontend / GIS · Internal Tool / Personal Project · July 2025. 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.

Start Your Project All Projects

Like this build? Tell us about your product — we reply within 48 hours.

Tell us what you need

Share a short brief — we reply within 48 hours.

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.

Toggle between drawing mode and regular map interaction

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