---
title: GeoJSON
source: https://vjmap.com/en/guide/geojson.html
---

# 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 `filter` field 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

```js
  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": {
      ...
    }
  });
```

---

**Standard data format:**

```js
var FeaCollection = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": []
        },
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [[]]
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": [[[]]]
        }
      }]
    }

```

## Point

***Note:*** For type "Point", the "coordinates" member must be a one-dimensional array.

**Standard data format:**

```javascript
var Point = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]},
    "properties": {
        "prop0": "value0"
    }
}
```

**Style options:**
~~~ json
"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)
}
~~~

## Line

***Note:*** For type `LineString`, the `coordinates` member must be a two-dimensional array. Each inner array represents a point set.

**Standard data format:**

```javascript
var GeoLine = {
      "type": "LineString",
      "properties":{
          "prop0": "value0"
      },
      "coordinates": [
          [
              114.34776306152344,
              30.623436511269382
          ],
          [
              114.32510375976562,
              30.63909360759635
          ],
          [
              114.30673599243164,
              30.634958017061198
          ],
          [
              114.29180145263672,
              30.629640569460406
          ]]
  };
```

***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:**
~~~ json
{
  "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)
  }
}
~~~

## 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:**

```javascript
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
                    ]
                ]
            ]
        }
    };
```

---
**Style options:**
~~~ json
{
  "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)
  }
}
~~~


## MultiPoint

***Note:*** For type `MultiPoint`, the `coordinates` member must be a two-dimensional array.


Standard data format:
```javascript
var MultiPoint = {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "MultiPoint",
            "coordinates": [
                [
                    114.29351806640625,
                    30.602457940999596
                ],[
                    114.21146392822264,
                    30.56580841410847
                ],[
                    114.30896759033203,
                    30.529145036680408
                ]
            ]
        }
    };
```


## MultiLineString

***Note:*** For type `MultiLineString`, the `coordinates` member must be an array of line coordinate arrays (a three-dimensional array).


**Standard data format:**

```javascript
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
            ]
        }
    };
```

## 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:**
```javascript
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
        ]
      }
    }
```