Skip to main content

MapWeave Basics

MapWeave is a library for geospatial visualization of connected data and events. It provides an API for both React and plain JavaScript.

You can use MapWeave to visualize complex networks on a map, track and observe movements of entities, highlight interesting patterns and behaviors, filter and analyze your data and much more. Thanks to its open architecture, MapWeave can be integrated with a wide range of tiles, assets and third party basemap libraries.

To use MapWeave, there are adapters available for a number of selected third party basemap libraries, or a standalone adapter which doesn't require a basemap library as a dependency.

MapWeave offers different visualization layers which have been designed for a particular type of data and use case, and which can be overlaid on the basemap.

intro

Adapters​

MapWeave offers three adapters:

  • MapLibre - for the open-source MapLibre basemap library. Uses https://demotiles.maplibre.org/style.json tileset by default.
  • Mapbox - for the commercial Mapbox basemap library. Uses mapbox://styles/mapbox/dark-v11 tileset by default.
  • Standalone - for adding raster tiles from a tile server.

Only one adapter can be used in a MapWeave application at a time.

Useful APIs:
Useful Examples:

Layers​

There are four visualization layers available:

You can use multiple layers in your application at the same time, as well as use multiple layers of the same type.

Layers are stacked in the order in which they are added, with the first loaded layer at the bottom. To add, remove or reorder layers, you can pass an array of layer references to layers(). If multiple layers overlap, the top layer is picked during user interactions.

In the following code, the GeoJSON layer would be rendered first, then the observations layer and finally, the network layer at the top.

const myGeoLayer = new GeoJsonLayer({
  data: geojsonData,
});
const myObsLayer = new ObservationsLayer({
  data: observationsData,
});
const myNetworkLayer = new NetworkLayer({
  data: networkData,
});

mapweave.layers([myGeoLayer, myObsLayer, myNetworkLayer]);
Useful APIs:

MapLibre layers() | Mapbox layers() | Standalone layers()

Useful Examples: