Everything vectorstream does

Every tool of the editor on one page, grouped by task: what it does and where it stops. Each feature here can be tried in the playground.

Try the playground See solutions

At a glance

vectorstream is a geometry editor for web maps. It draws and edits points, lines and areas on Leaflet, OpenLayers or MapLibre GL, and where two areas on the same layer meet, it stores their border once, so an edit on one side is an edit on both. Shapes come in and go out as GeoJSON.

Editing model: Topology: shared borders are stored once
Map libraries: Leaflet, OpenLayers, MapLibre GL
Data: GeoJSON import with geometry check, GeoJSON export
Saving: Several documents, saved automatically in the browser
Parts: Free (MIT license) and Pro (proprietary license)
Status: Pre-release, no package published yet

Draw

Tools that put new points, lines and areas on the map.

Points and markers

Click to place a point or a pin marker. A selected point can be dragged to a new position.

Use the point tool for a plain point or the marker tool for a pin.
Select a point and drag it to move it.

Try it in the playground: Points and markers FAQ question about Points and markers

Lines

Click point after point and press Enter to finish a line. Its length shows while you draw.

New points snap onto nearby corners and edges.
The line tool can trace along existing borders.

Try it in the playground: Lines FAQ question about Lines

Rectangles

Drag from one corner to the opposite one to draw an axis-aligned rectangle. Both corners snap onto nearby corners and edges.

Try it in the playground: Rectangles FAQ question about Rectangles

Polygons

Click corner after corner and close the ring to draw a polygon.

Each new corner snaps onto nearby corners and edges.
A polygon drawn on the corners of a neighbour shares that border with it.
The polygon tool can trace along existing borders.

Try it in the playground: Polygons FAQ question about Polygons

Circles

Drag out from the centre to draw a circle. It is stored as a polygon.

A free-standing circle has a radius handle for changing its size.
Once its outline is reshaped, the circle is an ordinary polygon.

Try it in the playground: Circles FAQ question about Circles

Text labels

Click an area or an empty spot and type a label. A free label can be dragged within its area.

Try it in the playground: Text labels FAQ question about Text labels

Freehand areas

Draw an area in one stroke. Its corners can be refined afterwards.

The stroke is thinned out into fewer corners while its shape is kept.
No snapping while drawing freehand.

Try it in the playground: Freehand areas FAQ question about Freehand areas

Triangle and star stamps

Triangle and star stamps are placed with a click or a drag.

Try it in the playground: Triangle and star stamps FAQ question about Triangle and star stamps

Edit and transform

Tools that reshape, move, select, copy and remove what is already drawn.

Edit corners

Drag a corner to reshape the outline. A point on a line can be removed with Alt-click.

A corner where more than two edges meet cannot be removed.
Dragging a corner shared by two areas reshapes both.

Try it in the playground: Edit corners

Midpoint handles

Use the midpoint handle of an edge to add a corner there.

Try it in the playground: Midpoint handles

Move

The transform tool moves the selected areas and points.

Shift-click extends the selection.
Lines are not moved with the transform tool.

Try it in the playground: Move

Rotate and scale

The transform tool also rotates and scales the selected areas and points.

Drag the rotation handle to turn the selection around its centre.
Drag a corner handle to scale it.

Try it in the playground: Rotate and scale

Lasso selection

Draw a loop with the lasso to select every area it encloses completely.

Try it in the playground: Lasso selection FAQ question about Lasso selection

Copy and paste areas

Copy areas by dragging them with the copy tool, or with copy and paste.

A selection is copied as a whole.
Copying works on areas only.

Try it in the playground: Copy and paste areas

Remove

Click an area with the removal tool to remove it, or press Delete to remove the selected areas.

Try it in the playground: Remove

Combine and split

Tools that cut, merge, split and thin out the areas you already have.

Cut a strip off the edge

Draw a shape across the outer edge of your areas, and the cut tool removes it from every area it covers. The strip that is cut away does not stay as a shape.

The drawn shape has to reach across the outer edge.
A cut that would leave a piece in the middle of an area is rejected.
Hold Shift to trace along existing borders while you cut.

Try it in the playground: Cut a strip off the edge FAQ question about Cut a strip off the edge

Difference

The difference tool removes a drawn shape only from the selected areas, with the same outer-edge rule as cut.

Areas outside the selection stay as they are.
Hold Shift to trace along existing borders.

Try it in the playground: Difference FAQ question about Difference

Merge neighbouring areas

The union tool merges areas that share at least one edge, also a whole selection in one step.

Areas that are not neighbours are rejected.
Areas that touch only at a corner are rejected too.

Try it in the playground: Merge neighbouring areas FAQ question about Merge neighbouring areas

Split between two corners

The split tool divides one area along a straight line between two of its corners.

Click two corners of the area to set the line.
Each split divides one area.

Try it in the playground: Split between two corners FAQ question about Split between two corners

Simplify outlines

The simplify tool thins out the boundary of the clicked or selected areas.

Try it in the playground: Simplify outlines

Topology and undo

How vectorstream keeps neighbouring areas together and takes back any step exactly.

Shared borders, stored once

Where two areas on the same layer meet, vectorstream stores the border once. Dragging a shared corner or a straight edge of it reshapes both areas.

A polygon drawn on the corners of a neighbour shares that border.
Areas on different layers do not share borders.

Try it in the playground: Shared borders, stored once FAQ question about Shared borders, stored once

No gaps along a shared border

Both neighbours use the same border, so an edit on one side is an edit on the other, and no gap or overlap opens along it.

Try it in the playground: No gaps along a shared border FAQ question about No gaps along a shared border

Exact undo and redo

Undo restores the previous state exactly, including every neighbour an edit touched. Redo works the same way.

Try it in the playground: Exact undo and redo FAQ question about Exact undo and redo

Precision

Help for placing corners exactly where they belong.

Snapping

New points snap onto nearby corners and edges while you draw.

Rectangle corners and line points snap too.
The freehand tool does not snap.

Try it in the playground: Snapping FAQ question about Snapping

Hold Alt to suspend snapping

Hold Alt to place a point without snapping, or turn snapping off with the switch in the toolbar.

Try it in the playground: Hold Alt to suspend snapping FAQ question about Hold Alt to suspend snapping

Flush docking when moving

Move a polygon with the transform tool against a neighbour and it docks flush to that edge. From then on the two share the border.

Hold Alt while moving to place it without docking.
Undo separates the two areas again.

Try it in the playground: Flush docking when moving

Trace along existing borders

The polygon and line tools trace along existing borders. The cut and difference tools trace too while Shift is held.

Try it in the playground: Trace along existing borders

Straighten with live measurements

The straighten tool squares up corners that are nearly right angles. It previews the result and shows its measurements live.

Try it in the playground: Straighten with live measurements FAQ question about Straighten with live measurements

Layers and documents

How shapes are organised and kept between visits.

Layer tree

Organise shapes in a tree of layers. Layers can be added, renamed, hidden, locked and reordered.

Try it in the playground: Layer tree FAQ question about Layer tree

Separate borders per layer

Shapes on different layers do not share borders, so each layer keeps its own set of shared borders.

Try it in the playground: Separate borders per layer FAQ question about Separate borders per layer

Several documents, saved automatically

Keep several documents. Each one is saved automatically in the browser, in IndexedDB.

Try it in the playground: Several documents, saved automatically FAQ question about Several documents, saved automatically

Data and maps

How shapes get in and out of vectorstream and which map libraries it runs on.

GeoJSON import with geometry check

GeoJSON is imported after a geometry check. A file with broken geometry is refused with a message.

Try it in the playground: GeoJSON import with geometry check FAQ question about GeoJSON import with geometry check

GeoJSON export

A document exports as one GeoJSON FeatureCollection.

Try it in the playground: GeoJSON export FAQ question about GeoJSON export

Leaflet, OpenLayers and MapLibre GL

Adapters for Leaflet, OpenLayers and MapLibre GL run the same editing core.

Try it in the playground: Leaflet, OpenLayers and MapLibre GL FAQ question about Leaflet, OpenLayers and MapLibre GL

Free and Pro

What is free and what is Pro

Every tool and the topology are free. Pro adds the parts that check, preview and list rules between layers. Prices are on request.

Free (MIT license)

All tools: drawing, editing, moving, rotating, scaling, split, union, difference, cut with a polygon, simplify, copy, lasso and tracing
Topology with shared borders, snapping with guide lines, undo and redo, and the validity check
GeoJSON import and export, the export of the map as an image, and the toolbar in five languages
The adapters for Leaflet, OpenLayers and MapLibre GL
Two kinds of rule between layers, within and overlap-free, with the violations as data

Pro (proprietary license)

Ten more kinds of rule between layers, with attribute conditions and rules measured in meters
The red preview, which shows a refused action before it happens
The list of rule violations as a panel
Snapping onto the target layers of the rules
The incremental check, which judges again only the elements near an edit
The circle as a cutting shape

Pro plugs into the free editor. A document with Pro rules loses nothing in the free editor: the rules are kept and saved again, but not checked. The license check of Pro makes no network call.

Free and Pro in the handbook · Pro handbook · Pricing

Limits

What vectorstream does not do

vectorstream edits shapes. These answers from the FAQ say what it leaves to your application and to other systems.

Does vectorstream provide map data?

No. vectorstream contains no parcels, zones, boundaries or other reference data. Your application brings the data as GeoJSON and the base map from its own tile source, and vectorstream is where the shapes are drawn and corrected.

Read in the FAQ: Does vectorstream provide map data?

Does vectorstream check my zones against rules or regulations?

Only the rules between layers that you define. The free editor knows the kinds within and overlap-free, and Pro adds ten more. vectorstream knows no law, permit or regulation: whether a zone meets one is decided by the people and the systems that work with the exported GeoJSON.

Read in the FAQ: Does vectorstream check my zones against rules or regulations?

Can vectorstream replace a GIS?

No. vectorstream is an editing component for web maps: it draws, edits, cuts, merges and splits shapes and keeps their borders consistent. Spatial analysis, map production and the record of the data stay in the GIS or the database that receives the GeoJSON.

Read in the FAQ: Can vectorstream replace a GIS?

What does pre-release mean for vectorstream?

Pre-release means that vectorstream works and can be tried in the playground, but nothing has been published yet: no package, no version and no price for Pro. The interface and the tools of vectorstream may still change before a release.

Read in the FAQ: What does pre-release mean for vectorstream?

Used in

Where these features do the work

The same tools in every field. These solutions pages show how each field uses them.

FAQ

Questions about the features

Which drawing tools does vectorstream have?

vectorstream draws polygons, rectangles, circles, lines, points, markers, text labels and freehand shapes, and it has triangle and star stamps. Further tools select, move, rotate and scale areas and points, copy and simplify areas, and a lasso selects several areas at once.

What does topology mean in vectorstream?

Topology means that vectorstream records which shapes touch: every corner and every border is stored once, and each area knows the borders around it. Moving a shared corner therefore reshapes every area that meets there, and vectorstream rejects an edit that would make two borders cross.

How does cutting work in vectorstream?

The cut tool of vectorstream (key S) removes a drawn shape from every area it covers, and the difference tool (key D) removes it only from the selected areas. Both cut from the outside in: the drawn shape has to reach across the outer edge of the areas, and vectorstream rejects a cut that would leave a piece in the middle of an area, with a message that says so.

Can vectorstream merge and split areas?

Yes. The union tool of vectorstream (key U) merges neighbouring areas that share at least one edge, and the split tool (key X) divides an area along a straight line between two of its corners. Areas that touch only at a single corner cannot be merged, and each merge or split is one step that a single undo takes back.

How does snapping work in vectorstream?

While you draw or edit, a new corner in vectorstream snaps onto nearby corners and edges, so neighbouring shapes meet exactly. The magnet button in the toolbar of the vectorstream editor switches snapping off, and holding Alt lifts it for a moment.