DEV Community: Frédéric Junod

Multi-Line Editing in edittrack: Work with Multiple Routes Simultaneously

Frédéric Junod — Mon, 09 Feb 2026 09:05:10 +0000

Planning complex routes often requires more than a single track. Whether you're mapping a multi-day trek, comparing alternative paths, or managing a network of interconnected trails, keeping all your routes in one workspace lets you see the full picture and maintain context while editing each part independently.

Starting with version 2.0-beta, edittrack introduces multi-line editing—the ability to create, edit, and manage multiple independent tracks within the same TrackManager. This post walks through the feature, its real-world applications, and how to work with it.

What multi-line editing offers

Multi-line editing lets you work with multiple independent line strings—called "parts"—in a single edittrack workspace. Each part is a complete track with its own control points, segments, POIs, and routing configuration. You can:

Create as many parts as you need
Switch between parts to edit them individually
See all parts simultaneously for context
Style active and inactive parts differently for visual clarity
Delete parts you no longer need

When you draw, move points, or add POIs, only the currently active part is affected. Other parts remain untouched, letting you refine one route without disrupting others.

Real-world use cases

Multi-day trips

Break a long journey into daily segments. Each day becomes its own part, so you can edit day 3 without accidentally moving points from day 1. All days remain visible on the map, giving you a sense of the full itinerary while you tweak individual stages.

Alternative routes

Present options to clients or collaborators by drawing multiple variations side-by-side:

Scenic route vs. fastest route
Technical mountain bike trail vs. beginner-friendly path
Main highway vs. scenic backroads

Compare distances, elevation profiles, and surface types across alternatives before committing to one.

Route networks

Build interconnected trail systems where a main route has optional side trips:

A primary hiking trail with viewpoint spurs
Different starting points converging at a common destination
Loop routes with shortcut options

Each branch is its own part, making it easy to modify without tangling the entire network.

Activity segments

Separate parts based on how you'll travel:

Walk to the trailhead (part 0), bike the main trail (part 1), drive home (part 2)
Approach routes vs. main climbing routes
Paved access roads vs. off-road trails

Each part can use different routing profiles or snapping configurations if needed.

Version control and experimentation

Keep your original route as part 0, then create part 1 for an optimized version. Compare them directly on the map. If the experiment doesn't work, simply delete the new part or switch back to the original.

Working with multiple parts: the API

If you're familiar with edittrack from the first blog post, working with multiple parts builds naturally on what you already know. The key difference: instead of managing one track, you now manage multiple parts and switch between them.

Creating new parts

Start with an existing TrackManager instance. Call createNewPart() to add a new empty part:

const partIndex = trackManager.createNewPart();
// Returns the index (0, 1, 2, etc.) and automatically switches to that part

The new part becomes the active part, and you can immediately start drawing on it. The first part you create is always part 0.

Switching between parts

To edit a different part, use workOnPart():

trackManager.workOnPart(1); // Switch to part 1

After switching, all drawing, point manipulation, and POI operations affect only that part. To check which part is currently active:

const currentPart = trackManager.activePart();
console.log(`Editing part ${currentPart}`);

Managing parts

Find out how many parts you have:

const total = trackManager.partsCount();

Delete a part you no longer need:

trackManager.deletePart(2); // Remove part 2

Deleting a part removes all its features—control points, segments, and POIs—and renumbers subsequent parts to maintain a sequential index. If you delete the active part, edittrack automatically switches to another available part.

Automatic switching on drag

By default, edittrack lets you grab features from any part and automatically switches to that part when you start dragging. This makes quick edits intuitive: just grab a point from part 2, and edittrack switches context so you can move it.

To disable this behavior (e.g., to prevent accidental edits to inactive parts):

trackManager.switchPartOnDrag = false;

With this set to false, dragging features from inactive parts is blocked entirely, enforcing strict isolation between parts.

Getting data from all parts

The familiar methods—getSegments(), getControlPoints(), and getPOIs()—return data only from the currently active part. If you need data from all parts at once, use the "all" variants:

const allSegments = trackManager.getAllSegments(); // Returns Feature[][]
const allControlPoints = trackManager.getAllControlPoints();
const allPOIs = trackManager.getAllPOIs();

Each of these returns a nested array: one sub-array per part. For example, allSegments[0] contains segments from part 0, allSegments[1] contains segments from part 1, and so on.

Iterating through parts

To process each part individually without manually switching back and forth, use the partsGenerator() method:

for (const {index, trackData} of trackManager.partsGenerator()) {
  console.log(`Part ${index} has ${trackData.segments.length} segments`);
  // Process trackData.segments, trackData.controlPoints, trackData.pois
}

The generator automatically restores the original active part when the loop completes, so you don't have to track state manually.

History management

Undo and redo now track both features and the active part. When you undo, edittrack restores not just the previous geometry and points, but also which part you were editing:

await trackManager.undo();
await trackManager.redo();

This means you can switch parts, make edits, switch again, and undo your way back through the entire sequence—edittrack remembers which part was active at each step.

Visual feedback and user experience

To help users distinguish between parts, edittrack sets an active property on every feature. This boolean indicates whether the feature belongs to the currently active part. You can use it in your styles to make active parts stand out:

const trackLineStyle = {
  "stroke-width": 6,
  "stroke-color": ["case",
    ["==", ["get", "active"], false],
    "#00883c80",  // Semi-transparent green for inactive parts
    "#00883cff"   // Opaque green for active parts
  ],
  "text-value": ["concat", "", ["get", "part"]], // Display part number as text
  "text-fill-color": "#fff",
};

Similarly, control points can use conditional styling:

const controlPointStyle = {
  "circle-fill-color": ["case",
    ["==", ["get", "active"], false],
    "#0071ec80",  // Semi-transparent blue for inactive
    "#0071ecff"   // Opaque blue for active
  ],
};

The part property stores the numeric index (0, 1, 2, etc.) of each feature's part. Displaying this number as a label on the map helps users keep track of which part is which, especially when working with many parts.

Try it yourself

The live demo now includes three new controls:

Add a new line string: creates a new empty part
Change active line string: cycles through existing parts
Delete active line string: removes the currently active part

To experiment:

Draw a route on part 0 by clicking points on the map
Click "Add a new line string" to create part 1
Draw a second route—notice the first route becomes semi-transparent
Click "Change active line string" to switch back to part 0 and modify it
Try dragging points from inactive parts to see automatic switching in action

The demo uses the conditional styling shown above, so you'll see clear visual distinction between active and inactive parts.

License

BSD-3-Clause

Draw and edit network‑snapped tracks in OpenLayers with edittrack

Frédéric Junod — Fri, 17 Oct 2025 12:11:29 +0000

Planning a hike, a bike ride, or any route that should follow a real‑world network? edittrack lets users draw and edit tracks that snap to routing services , enrich them with elevation profiles, and manage POIs—all directly on an OpenLayers map.

This post gives you a quick tour, shows how to wire it up, and highlights tips from the built‑in demos.

What edittrack does

edittrack is a lightweight UI library focused on interactive track editing:

Snapped segments: draw lines that follow a network via routers (GraphHopper or OSRM)
Control points: add/move/delete points that define and modify segments
POIs: add metadata‑bearing points anywhere along your track
Elevation profiles: compute per‑segment XYZM profiles via profilers (Swisstopo, extract from geometry, or a fallback chain)
History: undo/redo across all edits
Densification: optional point insertion to improve geometry quality between router samples
Shadow track and mask: visualize original track state while editing and constrain drawing to an extent

The core class you’ll interact with is TrackManager.

API docs: geoblocks.github.io/edittrack/api
Live demos: simple and schm

Install

npm install @geoblocks/edittrack ol

Edittrack is ESM and ships TypeScript types
ol (OpenLayers) is a peer dependency

Quickstart

Below is a minimal setup using OSRM for routing and a profiler chain that tries to reuse segment Z values first, then falls back to Swisstopo for high‑quality elevation (if you work in Switzerland and have EPSG:2056 registered).

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Style, Stroke, Circle as CircleStyle, Fill} from 'ol/style';

import {
  TrackManager,
  OSRMRouter,
  ExtractFromSegmentProfiler,
  FallbackProfiler,
  SwisstopoProfiler,
  SnappedDensifier,
} from '@geoblocks/edittrack';

// Basic map and layers
const trackLayer = new VectorLayer({ source: new VectorSource() });
const shadowTrackLayer = new VectorLayer({ source: new VectorSource() });
const map = new Map({
  target: 'map',
  view: new View({ center: [0, 0], zoom: 2 }),
  layers: [
    new TileLayer({ source: new OSM() }),
    shadowTrackLayer,
    trackLayer
  ],
});

// Router (provide your own OSRM/GraphHopper URL)
const router = new OSRMRouter({
  map,
  url: 'https://router.project-osrm.org/route/v1/driving',
  // optional:
  // extraParams: 'annotations=true',
  // radius: 10000,
});

// Profiler chain (first try existing Z, then Swisstopo)
const profiler = new FallbackProfiler({
  profilers: [
    new ExtractFromSegmentProfiler({ projection: map.getView().getProjection() }),
    new SwisstopoProfiler({ projection: map.getView().getProjection() }),
  ],
});

// Optional densifier to insert points between router samples
const densifier = new SnappedDensifier({
  optimalPointDistance: 10, // meters
  maxPointDistance: 80,
  maxPoints: 8000,
});

// Style (use your own StyleLike/FlatStyleLike)
const style = [
  new Style({ stroke: new Stroke({ color: '#2563eb', width: 3 }) }),
  new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({ color: '#111827' }) }) }),
];

// Track manager
const tm = new TrackManager({
  map,
  trackLayer,
  shadowTrackLayer,
  router,
  profiler,
  densifier,
  style,
  hitTolerance: 10, // px
  // deleteCondition, addLastPointCondition, addControlPointCondition are optional
  // drawExtent, drawMaskColor are optional
});

// Start editing
tm.mode = 'edit';

// Listen to changes (update a profile or UI)
tm.addTrackChangeEventListener(() => {
  // e.g., recompute a merged elevation profile using tm.getSegments()
});

// Add an initial point by letting users click on the map (TrackInteraction handles it)

Working with the track

Add/move points: in edit mode, click to add control points; drag points or segments to update routing
Toggle snapping: tm.snapping = true | false (if false, segments become straight lines)
Undo/Redo: await tm.undo() / await tm.redo()
Reverse: await tm.reverse(true) to re‑route, or await tm.reverse(false) to just flip geometry and refresh profiles
POIs:
- Add: tm.addPOI([x, y], {name: 'Café'})
- Update meta: tm.updatePOIMeta(index, meta)
- Delete: tm.deletePOI(index)
Save/restore state:

  const snapshot = [
    ...tm.getControlPoints(),
    ...tm.getSegments(),
    ...tm.getPOIs(),
  ];
  await tm.restoreFeatures(snapshot);

Hover feedback: subscribe and map distance to your UI (e.g., highlight point on a chart)

  tm.addTrackHoverEventListener((distanceFromStart) => {
    // distanceFromStart in meters along the full track (if available)
  });

Constraining drawing and visual aids

Draw extent and mask: pass drawExtent and optionally drawMaskColor to restrict editing to a region and render a mask overlay
Shadow track: when entering edit mode, the current track is cloned into shadowTrackLayer so you can see what changed

Routers and profilers

Routers:
- GraphHopper (GraphHopperRouter): snaps segments to a GraphHopper backend
- OSRM (OSRMRouter): snaps via OSRM; supports radius, extraParams, and pixel‑based maxRoutingTolerance inherited from RouterBase
Profilers:
- SwisstopoProfiler: high‑quality elevation profile for CH (register EPSG:2056)
- ExtractFromSegmentProfiler: reuse geometry Z values if present
- FallbackProfiler: try multiple profilers in order and use the first that succeeds

Each routed segment stores:

segment.get('snapped'): boolean
segment.get('profile'): Coordinate[] with [x, y, z, m], where m is cumulative distance from the segment start
segment.get('surfaces'): optional array of surface ranges (when supported by the router)

Tips from the demos

Densification improves elevation smoothness and downstream analytics by adding intermediate points while keeping a hard cap (maxPoints) to avoid oversized geometries
Keep hitTolerance between 10–20 px for easier selection on touch devices
If you want to require a modifier key to delete, pass a deleteCondition that checks the event (see demos/simple/demo.js)

TypeScript and modules

Full type definitions are published under lib/types
Package is ESM‑only; use modern bundlers (Vite, Parcel, Webpack 5+, etc.)

License

BSD‑3‑Clause

Cesium Guess

Frédéric Junod — Mon, 28 Apr 2025 11:39:07 +0000

Introduction

Welcome to Cesium Guess, an interactive web application that challenges you to guess locations on a map. This project leverages powerful mapping technologies to provide an engaging and educational experience. In this blog post, we'll explore what Cesium Guess does, the technologies it uses, and how you can get started with it.

What is Cesium Guess?

Cesium Guess is a web-based game where players are presented with a random location in Switzerland and must guess where it is on the map. The game provides a fun way to test and improve your geographical knowledge of Switzerland. After making a guess, the game shows the actual location and the distance between your guess and the correct location.

Key Features

Random Location Generation: The game uses a random position generator to place the camera at a random location within Switzerland.
Interactive Map: Players can interact with the map to make their guesses.
Distance Calculation: After guessing, the game calculates and displays the distance between the guessed location and the actual location.
Responsive Design: The game is designed to work seamlessly on various devices, including desktops and mobile devices.

Technologies Used

Cesium Guess is built using a combination of modern web technologies and powerful mapping libraries. Here are the key technologies used in this project:

CesiumJS

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It provides the core functionality for rendering the 3D globe and handling interactions.

CesiumWidget: The main component for rendering the 3D globe.
ImageryLayer: Used to display map imagery.
CesiumTerrainProvider: Provides terrain data for the globe.

OpenLayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps. It is used in this project to handle the 2D map interactions.

Map: The main component for rendering the 2D map.
TileLayer: Used to display map tiles.
VectorLayer: Used to display vector data, such as points and lines.

Turf.js

Turf.js is a JavaScript library for spatial analysis. It is used in this project to generate random positions and check if they are within Switzerland's boundaries.

randomPosition: Generates random geographical positions.
booleanPointInPolygon: Checks if a point is within a polygon.
bbox: Calculates the bounding box of a polygon.

Vite

Vite is a build tool that provides a fast development environment and optimized build process. It is used to bundle and serve the application.

Web Components

The project uses Web Components for creating reusable UI elements, such as the compass bar and dialog boxes.

Getting Started

To get started with Cesium Guess, follow these steps:

Clone the Repository: Clone the project repository from GitHub.

   git clone https://github.com/fredj/cesium-guess.git
   cd cesium-guess

Install Dependencies: Install the required dependencies using npm.

   npm install

Run the Development Server: Start the development server using Vite.

   npm run start

Open the Application: Open your web browser and navigate to http://localhost:3000 to start playing the game.

Conclusion

Cesium Guess is a fun and educational project that combines modern web technologies with powerful mapping libraries. Whether you're a geography enthusiast or just looking for a fun way to pass the time, Cesium Guess offers an engaging experience. We hope you enjoy playing the game and exploring the beautiful landscapes of Switzerland!

For more information and to try the online demo, visit the Cesium Guess GitHub page.

Happy guessing!

DEV Community: Frédéric Junod

Multi-Line Editing in edittrack: Work with Multiple Routes Simultaneously

What multi-line editing offers

Real-world use cases

Multi-day trips

Alternative routes

Route networks

Activity segments

Version control and experimentation

Working with multiple parts: the API

Creating new parts

Switching between parts

Managing parts

Automatic switching on drag

Getting data from all parts

Iterating through parts

History management

Visual feedback and user experience

Try it yourself

Links

License

Draw and edit network‑snapped tracks in OpenLayers with edittrack

What edittrack does

Install

Quickstart

Working with the track

Constraining drawing and visual aids

Routers and profilers

Tips from the demos

TypeScript and modules

Links

License

Cesium Guess

Introduction

What is Cesium Guess?

Key Features

Technologies Used

CesiumJS

OpenLayers

Turf.js

Vite

Web Components

Getting Started

Conclusion