Skip to main content

GeoJsonLayer

Description​

The GeoJSON layer uses the GeoJSON data format to draw geometric objects over the map. See the GeoJSON Layer docs for details.

GeoJsonLayer​

Constructors​

new GeoJsonLayer(def)​

Creates a new instance of the layer.

Parameters​

def

​
object

optional

The layer definition object.

data

​
GeoJsonLayerData

optional

Initial data to load into this layer. Data can be changed after instantiation via layer.data().

id

​
string

optional

A unique identifier for this layer. If omitted one will be generated automatically.

options

​
GeoJsonLayerOptions

optional

Initial options to set on this layer. Options can be changed after instantiation via layer.options() or layer.resetOptions().

visible

​
boolean

optional

Initial visibilty of this layer. Visibilty can be changed after instantiation via layer.visible().

Returns​
GeoJsonLayer

Properties​

id​

string

readonly

A unique id of the layer.

Methods​

data(data)​

Gets or sets the current data for this layer.

Parameters​

data

​
GeoJsonLayerData

optional

The layer data to be displayed.

Returns​
GeoJsonLayerData

A reference to the data object it was most recently passed.

options(options)​

Gets or sets the layer options while preserving any previously set options.

Parameters​

options

​
GeoJsonLayerOptions

optional

The layer options to be set.

Returns​
object

An object containing all layer options and their current values.

resetOptions(options)​

Sets the provided layer options while resetting any other previously set options to default values.

Parameters​

options

​
GeoJsonLayerOptions

optional

The layer options to be set.

Returns​
void

visible(state)​

Gets or sets the layer visibility.

Parameters​

state

​
boolean

optional

Whether the layer is visible.

Returns​
boolean

GeoJsonFeatureStyle​

The styling for the geometric objects.

const geoJsonData = {
  type: 'Feature',
  id: 'EiffelTower_linestring',
  properties: {
    color: 'rgba(0,0,255,0.7)',    // custom color
    width: 10,                     // custom line width
  },
  geometry: {
    type: 'LineString',
    coordinates: [
      [2.2955, 48.8594],
      [2.2935, 48.8594],
    ],
  },
};

Properties​

border​

object

optional

Defines the border styling for Polygon, MultiPolygon, Point and MultiPoint features.

color​
string

optional

default value

'#404040'

The color of the border.

width​
number

optional

default value

0

The width of the border. Set the units in units.

color​

string

optional

default value

'#808080'

The fill color for the GeoJSON feature.

radius​

number

optional

default value

1

The radius for Point and MultiPoint features. Set the units in units.

width​

number

optional

default value

2

The width for LineString and MultiLineString features. Set the units in units.

GeoJsonLayerData​

GeoJsonLayerData

​
GeoJSON | Feature[]

The data describing the geometric object in GeoJSON format. Accepts a single GeoJSON object or an array of GeoJSON feature objects.

const geoJsonData = {
  type: 'Feature',
  id: 'EiffelTower_polygon',
  properties: {
    color: 'rgba(0,255,0,0.3)',
  },
  geometry: {
    type: 'Polygon',       // the polygon is a rectangle around the Eiffel Tower
    coordinates: [
      [
        [2.2935, 48.8574], // bottom-left
        [2.2955, 48.8574], // bottom-right
        [2.2955, 48.8594], // top-right
        [2.2935, 48.8594], // top-left
      ],
    ],
  },
};

GeoJsonLayerOptions​

The options to set on this layer.

 const geoJsonOptions = {
   filled: false,
   units: 'pixels'
 };

// ...

mapweave.addLayer(
  new GeoJsonLayer({
    data: geoJsonData,
    options: geoJsonOptions
  }),
);

Properties​

filled​

boolean

optional

default value

true

Set to true to fill the Polygon, MultiPolygon, Point and MultiPoint features with the color set in color.

units​

"meters" | "pixels"

optional

default value

'pixels'

Sets the units used for border.width, width and radius.