Mesh Map Tool

Interactive mesh subdivision tool for maps using Next.js and map-toolkit.

Features

• Draw polygon boundaries using the map drawing tool
• Automatically subdivide polygons into a grid of quad faces (default 3x3)
• Adjust subdivision count with sliders (rows and columns independently)
• Select individual faces by clicking on the map
• Edit face properties:
  • Color picker for fill color
  • Opacity slider
  • Optional text labels
  • Active/inactive toggle (inactive faces render with gray overlay)
• Multiple mesh support with independent subdivisions
• Real-time visual feedback with hover and selection states

Getting Started

Prerequisites

• Node.js 22+
• pnpm 10+

Installation

pnpm install

Development

pnpm dev

Open http://localhost:3000 in your browser.

Build

pnpm build

Production

pnpm start

Usage

1. Create a Mesh

   • Click the "Create Mesh" button in the toolbar
   • Click on the map to add polygon vertices
   • Double-click to finish the polygon
   • The mesh will be automatically subdivided into a 3x3 grid

2. Adjust Subdivisions

   • Select a mesh from the list in the toolbar
   • Use the "Rows" slider to change the number of horizontal divisions (2-10)
   • Use the "Columns" slider to change the number of vertical divisions (2-10)
   • The mesh updates in real-time

3. Edit Faces

   • Click on any quad face to select it
   • The property editor appears on the right
   • Change the color using the color picker
   • Adjust opacity with the slider
   • Add an optional label
   • Toggle active/inactive state

4. Manage Meshes

   • View all meshes in the sidebar list
   • Click to select a mesh
   • Delete meshes using the delete button

Architecture

Core Components

• MeshDisplayLayer - Custom deck.gl layer for rendering mesh faces
• MeshToolbar - Sidebar UI for mesh creation and subdivision controls
• FacePropertyEditor - Property panel for editing selected faces
• mesh-store - State management using createMapStore pattern
• subdivision - Grid generation and face calculation algorithms

Key Files

• src/lib/mesh/types.ts - Type definitions
• src/lib/mesh/subdivision.ts - Grid subdivision algorithm
• src/lib/mesh/mesh-utils.ts - Mesh manipulation utilities
• src/components/mesh-layer/mesh-display-layer.ts - Rendering layer
• src/hooks/mesh-store.ts - State management
• app/page.tsx - Main application page

Technology Stack

• Next.js 14 - React framework with App Router
• @accelint/map-toolkit - Map components and utilities
• deck.gl - WebGL-powered visualization
• MapLibre GL - Base map rendering
• Tailwind CSS - Styling
• TypeScript - Type safety

Implementation Details

Grid Subdivision

The mesh subdivision algorithm:

1. Calculates a bounding box around the polygon
2. Divides the box into rows × columns
3. Generates grid points at intersections
4. Creates quad faces from adjacent grid points
5. Preserves face properties when subdivision changes

Face Selection

• Click events are handled by the MeshDisplayLayer
• Selection state is managed through the mesh store
• Face highlighting uses increased border width
• Property changes trigger immediate re-renders

State Management

Uses the map-toolkit's createMapStore pattern:

• Per-map instance isolation
• Event bus integration for cross-component communication
• Automatic cleanup on unmount
• Type-safe actions and state

License

Private demo application.