GeoJS feature data format

README.md

Overview

The top level object passed to geojs should be a GeoJSON FeatureCollection.

{
  "type": "FeatureCollection",
  "features": [],              // Array of feature objects (required)
  "crs": {},                   // [optional] Coordinate reference system (default EPSG:4326)
  "bbox": []                   // [optional] Maximum bounds
}

Each feature should be a GeoJSON Feature object:

{
  "type": "Feature",
  "geometry": {},              // A single geometry type
  "properties": {},            // A mapping of property values
  "id": ""                     // [optional] A unique identifier
}

Geometries

Features can have one of three geometries. GeoJSON multi-geometries are not supported.

• Point

{
  "type": "Point",
  "coordinates": [x, y, z]
}

• LineString

{
  "type": "LineString",
  "coordinates": [[x1, y1, z1], [x2, y2, z2], ...]
}

• Polygon

{
  "type": "Polygon",
  "coordinates": [
    [[x1, y1, z1], [x2, y2, z2], ...], // Exterior boundary
    [[x3, y3, z3], [x4, y4, z4], ...], // Interior boundary 1
    ...                                // etc.
  ]
}

When rendering, GeoJS will accumulate all common geometries into a minimal number of geo.feature objects as follows:

var points = geojson.features.filter(d => d.geometry.type === 'Point');
var lines = geojson.features.filter(d => d.geometry.type === 'LineString');
var polygons = geojson.features.filter(d => d.geometry.type === 'Polygon');

layer.createFeature('point').data(points);
layer.createFeature('line').data(lines);
layer.createFeature('polygon').data(polygon);

Embedded styles

Property objects can contain styling directives that configure the appearance of the features. Each geometry type has different style options, these are documented below.

Point

Property	Type
fill	<bool>
fillColor	<color>
stroke	<bool>
strokeColor	<color>
strokeWidth	<length>
radius	<length>

LineString

Property	Type
strokeColor	<color>
strokeWidth	<length>

Polygon

Property	Type
fillColor	<color>

Style types

• <color>: Four element array of numbers between 0 and 1 providing the intensity of red, green, and blue respectively. The fourth element provides the opacity from 0 (transparent) to 1 (opaque).
• <length>: A single number describing distance in units of pixels.
• <bool>: A number 0 (false) or 1 (true) indicating the absence or presence of an attribute.

Example

A complete example:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [0, 10, 0]
      },
      "properties": {
        "fill": 1,
        "fillColor": [1, 0, 0, 1],
        "stroke": 1,
        "strokeColor": [0, 0, 0, 1],
        "strokeWidth": 2,
        "radius": 10
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [[-10, -5, 0], [10, -5, 0]]
      },
      "properties": {
        "strokeColor": [0, 1, 0, 0.5],
        "strokeWidth": 3
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [[-10, 0, 0], [10, 0, 0], [0, 20, 0], [-10, 0, 0]],
          [[0, 0, 0], [5, 10, 0], [-5, 10, 0], [0, 0, 0]]
        ]
      },
      "properties": {
        "fillColor": [0, 0, 1, 0.75]
      }
    }
  ]
}

schema.json

{}