Skip to content

Commit 9c132de

Browse files
authored
[chore] docs update (#3180)
* [chore] docs update Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> * update Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> * nit Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> * add layers info to docs Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> * update Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> * more raster instructions Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> --------- Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
1 parent d4d8d18 commit 9c132de

6 files changed

Lines changed: 169 additions & 37 deletions

File tree

Lines changed: 61 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
# Types of Layers
22

33
## Single Feature Layers
4-
Single feature layers renders 1 feature
4+
5+
Single feature layers render 1 feature
6+
57
## Point
68

7-
![Point layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image34.png "Point layer")
9+
![Point layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image34.png 'Point layer')
810

911
Point layers draw points for a given event or object based on its location - latitude and longitude.
1012

1113
## Arc
1214

13-
![Arc layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-arc-layer.png "Arc layer")
15+
![Arc layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-arc-layer.png 'Arc layer')
1416

1517
Arc layers draw an arc between two points. They’re useful for visualizing the distance between two points as well as comparing distances in 3D. Note that arc layers don’t show routes between points, but simply the distance between the two points. The tallest arc represents the greatest distance.
1618

@@ -20,90 +22,94 @@ Layer Attributes: Color/ Color Based On, Opacity, Stroke Width/ Stroke Based On,
2022

2123
## Line
2224

23-
![Line layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-line-layer.png "Line layer")
25+
![Line layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-line-layer.png 'Line layer')
2426

2527
Line layers are the 2D version of arc layers. Both draw a line between two points to represent distance, but in a line layer, the drawing lies flat on the map.
2628

2729
Layer Attributes: Color, Stroke, High Precision Rendering
2830

2931
## Hexbin
3032

31-
![Hexbin layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-hexbin-layer.png "Hexbin layer")
33+
![Hexbin layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-hexbin-layer.png 'Hexbin layer')
3234

3335
Hexbin aggregates points into hexagons. The counts can be represented through color and/or height.
3436

3537
Layer Attributes: Color/ Color Based On, Filter by Count Percentile, Opacity, Hexagon Radius (km), Coverage (Radius), Enable Height, Elevation Scale/ Height Based On, High Precision Rendering
3638

3739
## Heatmap
3840

39-
![Heatmap layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-heat-map.png "Heatmap layer")
41+
![Heatmap layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-heat-map.png 'Heatmap layer')
4042

4143
Heatmap is a graphical representation of data in which data values are represented as colors.
4244

4345
Layer Attributes: Color, Opacity, Radius, Weight
4446

4547
## Cluster
4648

47-
![Cluster layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-cluster-layer.png "Cluster layer")
49+
![Cluster layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-cluster-layer.png 'Cluster layer')
4850

4951
Cluster layers visualize aggregated data based on a geospatial radius.
5052

5153
Layer Attributes: Color, Cluster Size
5254

5355
## Icon
5456

55-
![Icon layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image33.png "Icon layer")
57+
![Icon layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image33.png 'Icon layer')
5658

5759
Icon layers are a type of point layer. They allow you to differentiate between points by assigning icons to points based on a field. For example, you might use icons to differentiate between types of venues and points of interest.
5860

5961
Layer Attributes: Color, Radius, Label, High Precision Rendering
6062

6163
To see the icon menu, create a new icon layer and click how to draw an icon layer:
6264

63-
![How to Draw Icon Layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image38.png "How to Draw Icon Layer")
65+
![How to Draw Icon Layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image38.png 'How to Draw Icon Layer')
6466

6567
## Grid
6668

67-
![Grid layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image21.png "Grid layer")
68-
![3D Grid layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-grid-layer.png "3D Grid layer")
69+
![Grid layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image21.png 'Grid layer')
70+
![3D Grid layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-grid-layer.png '3D Grid layer')
6971

7072
Grids layers are similar to heatmaps. They show the density of points. They provide visual discrepancy in a map where multiple heatmap-style layers are present.
7173

7274
Layer Attributes: Color, Radius, Height, High Precision Rendering
7375

7476
## GeoJSON
7577

76-
![GeoJSON layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image20.png "GeoJSON layer")
77-
![Polygon geoJSON layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image7.png "Polygon geoJSON layer")
78+
![GeoJSON layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image20.png 'GeoJSON layer')
79+
![Polygon geoJSON layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image7.png 'Polygon geoJSON layer')
7880

7981
GeoJSON layers can display either paths, polygons or points. For example, a path GeoJSON layer can display data like trip routes. A polygon GeoJSON layer is essentially a [choropleth](https://en.wikipedia.org/wiki/Choropleth_map) layer and works best for rendering geofences. To add a GeoJSON layer, your dataset must contain geometry data.
8082

8183
# H3
8284

83-
![H3 layer - contour](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-h3-layer.png "H3 layer")
85+
![H3 layer - contour](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/c-h3-layer.png 'H3 layer')
8486

8587
H3 layers visualize spatial data using [H3 Hexagonal Hierarchical Spatial Index](https://eng.uber.com/h3/).
8688

8789
To use H3 layer, you need a `hex_id` in your dataset, which can be generated using [h3-js](https://github.com/uber/h3-js) from latitude, longitude and resolution.
8890

8991
# S2 Layer
9092

91-
![S2 Layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/l-s2.png 'Grid layer')
93+
![S2 Layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/l-s2.png 'S2 layer')
9294

9395
To use S2 layer, you need to assign a column containing S2 tokens.
9496

9597
## Vector Tile Layer
9698

99+
![Vector Tile layer](https://4sq-studio-public.s3.us-west-2.amazonaws.com/statics/keplergl/documentation/layer-types/vector-tile.png 'Vector Tile Layer')
100+
97101
Vector Tile Layer makes it possible to visualize very large datasets through MVTs (Mapbox Vector Tiles). To optimize performance, the layer only loads and renders tiles containing features that are visible within the current viewport.
98102

99103
Supported URL templates:
100104

101105
- MVT (https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=your-mapbox-acceess-token)
102106
- pmtiles (https://your-cdn/filename.pmtiles)
103107

104-
[Back to table of contents](../README.md)
108+
For step-by-step instructions, see [Vector Tile Layer — How to add](./m-vector-tile-layer.md).
109+
110+
## Raster Tile Layer (experimental)
105111

106-
## Raster Tile Layer
112+
![Raster Tile layer](https://4sq-studio-public.s3.us-west-2.amazonaws.com/statics/keplergl/documentation/layer-types/raster-tile.png 'Raster Tile Layer')
107113

108114
Raster layers are used to show satellite and aerial imagery. They allow you to work interactively directly with massive, image collections stored in .pmtiles (in raster format) or Cloud Optimized GeoTIFF format.
109115

@@ -112,7 +118,41 @@ Supported URL templates:
112118
- Users can reference remote **.pmtiles files in raster format** for raster layers by supplying a direct link to the file.
113119

114120
- **Cloud-Optimized GeoTIFFs (COG)** can also be used in raster layers by providing standardized Spatio-Temporal Asset Catalog (STAC) metadata.
115-
- The metadata file must be a valid *STAC Item* or *STAC Collection*, version 1.0.0 or higher.
116-
- Raster data referenced in STAC assets should be Cloud-Optimized GeoTIFFs and need to be publicly accessible via HTTPS.
117-
- STAC item and collections *must have Electro-Optical and Raster extensions*, and at least one asset must have both eo:bands and raster:bands information. common_name must be provided in eo:bands and data_type must be provided in raster:bands.
118-
- Users must use their own instances of raster tile servers, such as Titiler. [TODO: add instructions]
121+
122+
- The metadata file must be a valid _STAC Item_ or _STAC Collection_, version 1.0.0 or higher.
123+
- Raster data referenced in STAC assets should be Cloud-Optimized GeoTIFFs and need to be publicly accessible via HTTPS.
124+
- STAC item and collections _must have Electro-Optical and Raster extensions_, and at least one asset must have both eo:bands and raster:bands information. common_name must be provided in eo:bands and data_type must be provided in raster:bands.
125+
- To use COGs with STAC metadata, you must run your own raster tile server (e.g., TiTiler). Example implementation: [kepler-raster-server](https://github.com/igorDykhta/kepler-raster-server).
126+
127+
Examples of supported STAC Items:
128+
129+
- Bangladesh rivers — https://4sq-studio-public.s3.us-west-2.amazonaws.com/sdk/examples/sample-data/raster/planet-skysat-opendata.json
130+
- Antarctica ice — https://4sq-studio-public.s3.us-west-2.amazonaws.com/sdk/examples/sample-data/raster/sentinel-2-l2a.json
131+
- Kiribati island — https://4sq-studio-public.s3.us-west-2.amazonaws.com/sdk/examples/sample-data/raster/stac-example.json
132+
133+
Examples of supported STAC Collections:
134+
135+
- sentinel-2-l1c — https://earth-search.aws.element84.com/v1/collections/sentinel-2-l1c
136+
- modis-09A1-061 — https://planetarycomputer.microsoft.com/api/stac/v1/collections/modis-09A1-061
137+
- landsat-c2-l1 — https://planetarycomputer.microsoft.com/api/stac/v1/collections/landsat-c2-l1
138+
139+
For step-by-step instructions, see [Raster Tile Layer — How to add](./n-raster-tile-layer.md).
140+
141+
### WMS Layer (experimental)
142+
143+
![WMS layer](https://4sq-studio-public.s3.us-west-2.amazonaws.com/statics/keplergl/documentation/layer-types/wms.png 'WMS Layer')
144+
145+
- Web Map Service (WMS) layers render raster tiles from OGC WMS servers.
146+
- This feature is experimental and disabled by default. To try it, enable `enableWMSLayer: true` in the application configuration.
147+
- When enabled, add a WMS service via the Tilesets modal by providing the service URL and selecting a named layer. Feature info on click is supported for queryable layers.
148+
149+
Examples of supported WMS Tiles:
150+
151+
- https://ows.terrestris.de/osm/service
152+
- https://opengeo.ncep.noaa.gov/geoserver/conus/conus_cref_qcd/ows
153+
- https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi
154+
- https://geo.stadt-muenster.de/mapserv/starkregen_serv
155+
156+
For step-by-step instructions, see [WMS Layer — How to add](./o-wms-layer.md).
157+
158+
[Back to table of contents](../README.md)

docs/user-guides/c-types-of-layers/k-trip.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
Trip layer can display animated path.
44

5-
![Trip layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/k-trip.gif 'Grid layer')
5+
![Trip layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/k-trip.gif 'Trip layer')
66

77
### How to use trip layer to animate path
88

99
**Data format**
1010
Currently trip layer support a special `geoJSON` format where the coordinate `linestring` has a 4th element denoting timestamp.
1111

12-
In order to animate the path, the `geoJSON` data needs to contain `LineString` in its features' geometry, and the coordinates in the `LineString` need to have 4 elements in the format of `[longitude, latitude, altitude, timestamp]`, with the last element being a timestamp. Valid timestamp formats include unix in seconds such as `1564184363` or in milliseconds such as `1564184363000`.
12+
In order to animate the path, the `geoJSON` data needs to contain `LineString` in its features' geometry, and the coordinates in the `LineString` need to have 4 elements in the format of `[longitude, latitude, altitude, timestamp]`, with the last element being a timestamp. Valid timestamp formats include unix in seconds such as `1564184363` or in milliseconds such as `1564184363000`.
1313

1414
**Sample data**
1515

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
# S2 Layer
22

3-
![S2 Layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/l-s2.png 'Grid layer')
3+
![S2 Layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/l-s2.png 'S2 layer')
44

55
To use S2 layer, you need to assign a column containing S2 tokens.
66

77
### Naming Convention
8-
Kepler.gl __auto generates__ S2 layer from column named `s2` or `s2_token`
98

9+
Kepler.gl **auto generates** S2 layer from column named `s2` or `s2_token`
1010

1111
### Simple Dataset
12-
token | value |
13-
|----------|:------:|
14-
80858004 | 0.5979242952642347 |
15-
8085800c | 0.5446256069712141 |
16-
80858014 | 0.1187171597109975 |
17-
8085801c | 0.2859146314037557 |
18-
80858024 | 0.19549012367504126 |
19-
80858034 | 0.3373452974230604 |
20-
8085803c | 0.9218176408795662 |
21-
80858044 | 0.23470692356446143 |
22-
8085804c | 0.1580509670379684 |
23-
80858054 | 0.15992745628743954 |
12+
13+
| token | value |
14+
| -------- | :-----------------: |
15+
| 80858004 | 0.5979242952642347 |
16+
| 8085800c | 0.5446256069712141 |
17+
| 80858014 | 0.1187171597109975 |
18+
| 8085801c | 0.2859146314037557 |
19+
| 80858024 | 0.19549012367504126 |
20+
| 80858034 | 0.3373452974230604 |
21+
| 8085803c | 0.9218176408795662 |
22+
| 80858044 | 0.23470692356446143 |
23+
| 8085804c | 0.1580509670379684 |
24+
| 80858054 | 0.15992745628743954 |
2425

2526
[Back to table of contents](../README.md)
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Vector Tile Layer — How to add
2+
3+
Follow these steps to add a Vector Tile layer (MVT or pmtiles):
4+
5+
1. Open Add Data → Tilesets.
6+
2. Select Vector Tile tileset type.
7+
3. Enter a tileset URL:
8+
- Mapbox Vector Tiles (MVT) template, e.g.
9+
`https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=YOUR_TOKEN`
10+
- pmtiles URL, e.g. `https://your-cdn/filename.pmtiles`
11+
4. Click Add. A new Vector Tile layer will appear in the Layers panel.
12+
5. Style the layer (color, stroke, height, dynamic color) in the Layers panel.
13+
14+
Notes:
15+
16+
- Use Vector Tile layer for vector data in MVT/pmtiles formats. For raster pmtiles or COG/STAC imagery, use Raster Tile layer.
17+
18+
Example Vector Tile sources:
19+
20+
- US population — https://4sq-studio-public.s3.us-west-2.amazonaws.com/vector-tile/cb_v2/{z}/{x}/{y}.pbf
21+
- New Zealand buildings — https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles
22+
- US Zip Codes - https://r2-public.protomaps.com/protomaps-sample-datasets/cb_2018_us_zcta510_500k.pmtiles
23+
- Railways — https://4sq-studio-public.s3.us-west-2.amazonaws.com/pmtiles-test/161727fe-7952-4e57-aa05-850b3086b0b2.pmtiles
24+
25+
[Back to layer overview](./README.md)
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Raster Tile Layer — How to add (experimental)
2+
3+
Use Raster Tile layer to visualize satellite/aerial imagery from raster pmtiles or COGs via STAC metadata.
4+
5+
1. Open Add Data → Tilesets.
6+
2. Select Raster Tile tileset type.
7+
3. Paste URL to the tileset:
8+
- pmtiles (raster format): provide a direct HTTPS URL to a .pmtiles file containing raster imagery. Raster pmtiles don't require dedicated raster tile servers, unless you want to use elevation meshes.
9+
- STAC Item/Collection (COGs): provide a HTTPS URL to a STAC Item or Collection (v1.0.0+ with EO + Raster extensions). For this option you need to provide a [compatible raster tile server](https://github.com/igorDykhta/kepler-raster-server).
10+
4. Click Add.
11+
5. Style band selection and opacity as needed in Layers panel.
12+
13+
Important notes for COGs via STAC:
14+
15+
- The STAC Item/Collection must include EO and Raster extensions with `eo:bands` and `raster:bands` .
16+
- COG assets must be publicly accessible over HTTPS.
17+
- You must run your own raster tile server (e.g., TiTiler). Example implementation that supports collections and elevations: [kepler-raster-server](https://github.com/igorDykhta/kepler-raster-server).
18+
19+
# Elevation
20+
21+
To enable elevation rendering, you must provide one or more compatible raster tile servers when adding the tileset. Enter them in the "Raster tile servers" field of the Add Tileset form.
22+
23+
- For STAC Items/Collections: compatible raster tile servers are required.
24+
- For raster .pmtiles: raster tile servers are optional for imagery, but required if you plan to use elevation.
25+
- The server must expose COGs as XYZ tiles and support elevation/DEM tiles. Example implementation: [kepler-raster-server](https://github.com/igorDykhta/kepler-raster-server) (TiTiler-based).
26+
27+
Example Raster .pmtiles:
28+
29+
- Mount Whitney - https://pmtiles.io/usgs-mt-whitney-8-15-webp-512.pmtiles
30+
- Swiss historical - https://public-bucket-for-tests.s3.us-east-1.amazonaws.com/historic-swis-18xx.pmtiles
31+
32+
Example STAC Items:
33+
34+
- Bangladesh rivers — https://4sq-studio-public.s3.us-west-2.amazonaws.com/sdk/examples/sample-data/raster/planet-skysat-opendata.json
35+
- Antarctica ice — https://4sq-studio-public.s3.us-west-2.amazonaws.com/sdk/examples/sample-data/raster/sentinel-2-l2a.json
36+
- Kiribati island — https://4sq-studio-public.s3.us-west-2.amazonaws.com/sdk/examples/sample-data/raster/stac-example.json
37+
38+
Example STAC Collections:
39+
40+
- sentinel-2-l1c — https://earth-search.aws.element84.com/v1/collections/sentinel-2-l1c
41+
- modis-09A1-061 — https://planetarycomputer.microsoft.com/api/stac/v1/collections/modis-09A1-061
42+
- landsat-c2-l1 — https://planetarycomputer.microsoft.com/api/stac/v1/collections/landsat-c2-l1
43+
44+
[Back to layer overview](./README.md)
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# WMS Layer — How to add (experimental)
2+
3+
Use WMS Layer to render imagery from OGC Web Map Service (WMS) endpoints.
4+
5+
1. Open Add Data → Tilesets.
6+
2. Select WMS tileset type.
7+
3. Enter the WMS service URL (GetCapabilities endpoint or base service URL).
8+
4. Click Add. A new WMS layer will appear in the Layers panel.
9+
5. In the Layers panel you can select a named layer from the service.
10+
11+
Notes:
12+
13+
- Feature info on click is supported for queryable layers (`queryable=true`).
14+
15+
Example WMS services:
16+
17+
- https://ows.terrestris.de/osm/service
18+
- https://opengeo.ncep.noaa.gov/geoserver/conus/conus_cref_qcd/ows
19+
- https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi
20+
- https://geo.stadt-muenster.de/mapserv/starkregen_serv
21+
22+
[Back to layer overview](./README.md)

0 commit comments

Comments
 (0)