GeoJSON Layer

The GeoJSON layer allows you to draw geometric objects over the map using the GeoJSON data format.

These geometric objects, such as polygons, can be used to:

• Highlight areas of the map.
• Geofence the nodes defined in the network layer to an area of the map.
• Filter the trajectories defined in the observations layer to an area of the map.

Data Format

An example of a GeoJsonLayerData object is:

const vancouverDowntown = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'vancouver-downtown',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [-123.112266, 49.290164],
            [-123.10424, 49.288166],
            [-123.099288, 49.289272],
            [-123.099998, 49.27275],
            [-123.101699, 49.272972],
            [-123.111076, 49.272926],
            [-123.114448, 49.271774],
            [-123.121162, 49.269538],
            [-123.12928, 49.269531],
            [-123.13768, 49.275318],
            [-123.132331, 49.276931],
            [-123.121093, 49.284366],
            [-123.13668, 49.294456],
            [-123.134689, 49.29581],
            [-123.122711, 49.2915],
            [-123.112266, 49.290164],
          ],
        ],
      },
      properties: { name: 'Vancouver Downtown' },
    },
  ],
};

Assigning the optional id property to a GeoJSON feature allows it to be identified when using event handlers for interactions.

A full definition of the GeoJSON data format can be found at geojson.org.

Geometry Types

GeoJSON provides the following geometry types, illustrated below using data from the City of Vancouver Open Data Portal.

Points

The following map shows city voting stations as points. One voting station is a Point feature in red and other voting stations are a MultiPoint feature in blue.

MapWeave Example

Log in to view live examples

MapWeave Example

Log in to view live examples

Set the border, color and radius of the points in the feature properties.

"properties": {
    "name": "Carnegie Community Centre",
    "color": "rgb(148, 54, 81)",
    "radius": 5
  }

Lines

The map below shows cycle lanes as lines. There is a LineString - drawn in red along Pacific Boulevard - and a MultiLineString - drawn in blue as two segments along Expo Boulevard.

MapWeave Example

Log in to view live examples

MapWeave Example

Log in to view live examples

Set the color and width of the lines in the feature properties.

"properties": {
    "color": "rgb(148, 54, 81)",
    "width": 4
  }

Polygons

The map below shows two parks in Vancouver as polygons. Sunset Beach park is shown in red as a Polygon and Vanier Park is shown in blue as a MultiPolygon.

MapWeave Example

Log in to view live examples

MapWeave Example

Log in to view live examples

Set the border and color properties of the polygons in the feature properties.

"properties": {
    "name": "Sunset Beach Park",
    "color": "rgba(148, 54, 81, 0.5)",
    "border": {
      "color": "rgb(148, 54, 81)",
      "width": 1
    }
  }