# Map Data Sources

# Overview

Data sources define the data that can be used on the map. Each data source must have a unique ID and cannot be duplicated.

Each data source must specify a source type. The available source types are:

["vector", "raster", "geojson", "image", "video"];

# vector Type Description

The vector type represents vector data, provided as a vector tile service with data returned in protobuf format.

Detailed description:

map.addSource("Source1", {
  /*Source1 is the data source ID, must be unique and cannot be duplicated*/
  type: "vector" /*Data source type*/,
  tiles: ["http://yourwebsite/{z}/{x}/{y}.mvt"] /*Data source request URL, can be multiple*/,
});

1
2
3
4
5

# raster Type Description

The raster type represents raster data, provided as a tile service with raster images returned.

Detailed description:

map.addSource("Source1", {
  /*Source1 is the data source ID, must be unique and cannot be duplicated*/
  type: "raster" /*Data source type*/,
  tileSize: 256 /*Returned raster image size, defaults to 512 if not specified*/,
  tiles: ["http://yourwebsite/{z}/{x}/{y}.png"] /*Data source request URL, can be multiple*/,
});

1
2
3
4
5
6

# geojson Type Description

The geojson type represents GeoJSON data, provided as GeoJSON structure and loaded in one batch.

Detailed description:

Example 1:

map.addSource("jsonSource", { /*jsonSource is the data source ID, must be unique and cannot be duplicated*/
    "type": "geojson",   /*Data source type*/
    "data": "./data.json"
    /*data parameter is GeoJSON format data, supports two structures: 1. URL form returning GeoJSON format; 2. Concrete GeoJSON format data*/
});

1
2
3
4
5

Example 2:

var jsonData = {"type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [116.46, 39.92]
        },
        "properties": {
            "title": "University"
        }
    }]
};
map.addSource("jsonSource", {
    "type": "geojson",
    "data": jsonData
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

To update GeoJSON data source content, call the setData method:

map.addSource("jsonSource", {
    "type": "geojson",
    "data": {"type": "FeatureCollection","features": []}    /*Empty data*/
});

//  In some scenarios, define GeoJSON data source first with empty data, add specific layers, then update data via setData when business data is ready

map.getSource('jsonSource').setData(json) /*json parameter can be URL or concrete GeoJSON data*/

1
2
3
4
5
6
7
8

# image Type Description

The image type represents image data. Supported formats include gif, png, jpg, jpeg.

Detailed description:

map.addSource("imageSource", { /*imageSource is the data source ID, must be unique and cannot be duplicated*/
    "type": "image",   /*Data source type*/
    "url": "./images/flash.gif",    /*Image URL*/
    "coordinates": [[106.45, 29.93],[106.47, 29.93],[106.47, 29.91],[106.45, 29.91]]
    /*Image coordinate bounds on the map, in clockwise order: top-left, top-right, bottom-right, bottom-left.*/
});

1
2
3
4
5
6

# video Type Description

The video type represents video data. Supported formats include mp4, etc.

Detailed description:

map.addSource("videoSource", { /*videoSource is the data source ID, must be unique and cannot be duplicated*/
    "type": "video",   /*Data source type*/
    "urls": ["http://yourwebsite/assets/v.mp4"],    /*Video request URL, can be multiple*/
    "coordinates": [[106.45, 29.93],[106.47, 29.93],[106.47, 29.91],[106.45, 29.91]]
    /*Video coordinate bounds on the map, in clockwise order: top-left, top-right, bottom-right, bottom-left.*/
});

1
2
3
4
5
6

← Switch Map Map Layers →