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. See the Map Adapters examples to learn more.

Layers

There are four visualization layers available:

network - to visualize connected data as nodes and links.
observations - to visualize observations of entities at particular points in time.
GeoJSON - to draw GeoJSON data as geometric objects over the map.
TileLayer - to display map tiles for the standalone adapter.

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 mapWeave.addLayer() is called, with the oldest loaded layer at the bottom. To add, remove or reorder layers, you can also pass an array of layer references to mapWeave.layers():

mapweave.layers([
  new GeoJsonLayer({
    data: geojsonData,
  }),
  new ObservationsLayer({
    data: observationsData,
  }),
  new NetworkLayer({
    data: networkData,
  }),
]);

Layer ordering controls layer interactions. If multiple layers overlap, the top layer is picked during user interactions.

See the Network Layer, Observations Layer, GeoJSON Layer and Standalone Adapter examples to learn more.

Adapters​

Layers​

Adapters

Layers