# GeoJSON
Note: GeoJSON is a format for encoding geographic data structures. GeoJSON objects can represent geometry, features, or feature collections. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. GeoJSON features include a geometry object and a properties object. Feature collections represent a series of features.
# FeatureCollection
# GeoJSON Feature Collection Format:
This section explains how to use the
filterfield to filter feature types when a GeoJSON dataset contains multiple feature types (point, line, polygon).
Type Filter
"Point"— Pass as a string"LineString"— Pass as a string"Polygon"— Pass as a string
map.addLayer({
"id": "lineid",
"type": "line",
"source": "geojsonCollections", // Must match geojsonCollections above
"filter": ["==", "$type", "LineString"], // Key: $type is fixed syntax; types are Point, LineString, Polygon
"layout": {
...
},
"paint": {
...
}
});
2
3
4
5
6
7
8
9
10
11
12
Standard data format:
var FeaCollection = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": []
},
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [[]]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[]]]
}
}]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Point
Note: For type "Point", the "coordinates" member must be a one-dimensional array.
Standard data format:
var Point = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]},
"properties": {
"prop0": "value0"
}
}
2
3
4
5
6
7
8
9
Style options:
"paint": {
"circle-radius": 15, // radius
"circle-color": "#FF0000", // color
"circle-opacity": 0.8, // opacity
"circle-stroke-width": 5, // stroke width
"circle-stroke-color": "#0000FF", // stroke color
"circle-stroke-opacity": 0.7, // stroke opacity
"circle-translate": [0,0] // screen offset from original position (rarely used)
}
2
3
4
5
6
7
8
9
# Line
Note: For type LineString, the coordinates member must be a two-dimensional array. Each inner array represents a point set.
Standard data format:
var GeoLine = {
"type": "LineString",
"properties":{
"prop0": "value0"
},
"coordinates": [
[
114.34776306152344,
30.623436511269382
],
[
114.32510375976562,
30.63909360759635
],
[
114.30673599243164,
30.634958017061198
],
[
114.29180145263672,
30.629640569460406
]]
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Note: A linear ring is a closed line with 4 or more positions. The first and last positions are equal (they represent the same point). This refers to a ring-shaped line, not a closed polygon.
Style options:
{
"layout": {
"line-cap": "square", // butt | round | square
"line-join": "round", // bevel | round | miter
"line-miter-limit": 2,
"line-round-limit": 1.05,
"visibility": "visible", // visible | none
},
"paint": {
"line-width": 20, // width
"line-color": "#000000", // color
"line-opacity": 0.8, // opacity
"line-gap-width" : 0, // gap width (splits line into two with gap)
"line-offset" : 0, // use sparingly; large values can distort at corners
"line-dasharray": [5,2], // dash pattern (e.g. railway)
"line-blur" : 5, // blur; use with width (e.g. width 20, blur 10); must be < width
"line-pattern": "picture_name", // pattern name must match style image
"line-translate": [0,0] // screen offset (rarely used)
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Polygon
Note: For type "Polygon", the "coordinates" member must be an array of linear ring coordinate arrays (a three-dimensional array). For polygons with multiple rings, the first ring must be the exterior ring, the others must be interior rings or holes. The exterior ring is clockwise; interior rings are counterclockwise.
Note: For a simple polygon, clockwise or counterclockwise both work. For polygons with holes, use clockwise for the exterior ring and counterclockwise for interior rings for consistent display. Otherwise, the same data may render differently.
Outer clockwise, inner counterclockwise= polygon with holes.Outer clockwise, inner clockwise= concentric overlay regions.
Standard data format:
var GeoPolygon = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.32510375976562,
30.63968439181164
],
[
114.22931671142578,
30.608958829007946
],
[
114.22348022460937,
30.601275914486066
],
[
114.22931671142578,
30.580588116155223
],
[
114.32510375976562,
30.63968439181164
]
]
]
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Style options:
{
"layout": {
"visibility": "visible" // visible | none
},
"paint": {
"fill-antialias": true, // antialias; true = fill boundary gaps
"fill-color": "#000000", // color
"fill-opacity": 0.8, // opacity
"fill-outline-color": "#FFFF00", // outline color (no outline width option)
"fill-pattern":"picture_name", // pattern name must match style image
"fill-translate": [0,0] // screen offset (rarely used)
}
}
2
3
4
5
6
7
8
9
10
11
12
13
# MultiPoint
Note: For type MultiPoint, the coordinates member must be a two-dimensional array.
Standard data format:
var MultiPoint = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
114.29351806640625,
30.602457940999596
],[
114.21146392822264,
30.56580841410847
],[
114.30896759033203,
30.529145036680408
]
]
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# MultiLineString
Note: For type MultiLineString, the coordinates member must be an array of line coordinate arrays (a three-dimensional array).
Standard data format:
var MultiLine = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[ // first line
[
114.30862426757812,
30.65533885862785
],
[
114.23755645751953,
30.55191344082329
]
], // end first line
[ // second line
[
114.3134307861328,
30.677191798461496
],
[
114.38827514648437,
30.528849308009075
]
] // end second line
]
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# MultiPolygon
Note: For type MultiPlygon, the coordinates member must be an array of polygon coordinate arrays (a four-dimensional array).
Note: For type Polygon, the coordinates member must be an array of linear ring coordinate arrays (a three-dimensional array). For polygons with multiple rings, the first ring must be the exterior ring, the others must be interior rings or holes. The exterior ring is clockwise; interior rings are counterclockwise.
Note: For a simple polygon, clockwise or counterclockwise both work. For polygons with holes, use clockwise for the exterior ring and counterclockwise for interior rings for consistent display. Otherwise, the same data may render differently.
Outer clockwise, inner counterclockwise= polygon with holes.Outer clockwise, inner clockwise= concentric overlay regions.
Standard data format:
var MultiPolygon = {
"type": "Feature",
"properties": {
name: "multi-polygon"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[ // first part of multi-polygon
[ // counterclockwise ring; still valid for simple polygon
[
114.3233871459961,
30.57438091562706
],
[
114.33368682861328,
30.57851909346139
],
[
114.34587478637695,
30.586647142912706
],
[
114.33162689208984,
30.596695425524466
],
[
114.31617736816406,
30.57955361032709
],
[
114.3233871459961,
30.57438091562706
]
]
], // end first part
[ // second part
[
[
114.33454513549805,
30.479893814659587
],
[
114.38587188720703,
30.479893814659587
],
[
114.38587188720703,
30.504596494227247
],
[
114.33454513549805,
30.504596494227247
],
[
114.33454513549805,
30.479893814659587
]
]
] // end second part
]
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63