# Common Layers
# Drawing Layer
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "point1",
"color": "#00ffff",
"icon": "icon1"
},
"geometry": {
"coordinates": [
6971.5378667085715,
14385.014943907285
],
"type": "Point"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "polyline1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
],
"type": "LineString"
}
},
{
"id": "3",
"type": "Feature",
"properties": {
"name": "polygon1",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
[
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
]
],
"type": "Polygon"
}
}
]
}
map.getDrawLayer().set(map.toLngLat(data));
1
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
# Heatmap Layer
let heatmapLayer = new vjmap.Heatmap({
data: geoDatas,
// heatmapWeight: contribution of a point to heatmap weight, heatmap should be more visible where contribution is greater
heatmapWeight: [
'interpolate',
['linear'],
['get', 'value'],
0, // Because 0,100 min and max above, normalize these to 0,1 range
0,
100,
1
],
// heatmapRadius: radius in pixels when calculating point weight for heatmap, default 30
heatmapRadius: [
'interpolate',
['linear'],
['zoom'],
0, // level 0
10, // radius 10
9, // level 9 (other levels, linear interpolation)
50 // radius 50
],
// heatmapColor: heatmap color, set color at each heatmap value
heatmapColor: [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(33,102,172,0)',
0.2,
'rgb(103,169,207)',
0.4,
'rgb(209,229,240)',
0.6,
'rgb(253,219,199)',
0.8,
'rgb(239,138,98)',
1,
'rgb(178,24,43)'
],
// heatmapIntensity: heatmap intensity, similar to heatmapWeight but sets overall heatmap intensity
heatmapIntensity: [
'interpolate',
['linear'],
['zoom'],
0,
1,
9,
3
],
// heatmapOpacity: heatmap transparency
heatmapOpacity: [
'interpolate',
['linear'],
['zoom'],
7,
1,
9,
0
]
});
heatmapLayer.addTo(map);
1
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
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
# Background Overlay Layer
const background = new vjmap.BackgroundLayer({
backgroundColor: "yellow",
backgroundOpacity: 0.4
}
)
background.addTo(map);
1
2
3
4
5
6
2
3
4
5
6
# Custom Watermark Background Layer
// Note: image size must be power of 2, e.g. (2, 4, 8, ..., 512)
await map.loadImageEx(`testwatermark`, `https://vjmap.com/static/assets/images/testwatermark.png`);
let layers = map.getStyle().layers
const background = new vjmap.BackgroundLayer({
backgroundPattern: "testwatermark",
backgroundOpacity: 0.3
})
background.addTo(map);
// Move this layer to the bottom of all layers
map.moveLayer(background.layerId, layers[0].id)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Raster Image Layer
const mapBounds = map.getGeoBounds(0.001);
const coords = map.toLngLat(mapBounds.toPointArray());
map.addImageSource("park", {
url: "https://vjmap.com/static/assets/images/park.jpg",
coordinates: coords
})
map.addRasterLayer("parkLayer", "park", {
rasterOpacity: 0.8,
minzoom: 7,
maxzoom: 20
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Sky Layer
const sky = new vjmap.SkyLayer({
skyType: 'gradient',
skyGradient: [
'interpolate',
['linear'],
['sky-radial-progress'],
0.8,
'rgba(135, 206, 235, 1.0)',
1,
'rgba(0,0,0,0.1)'
],
skyGradientCenter: [0, 0],
skyGradientRadius: 90,
skyOpacity: [
'interpolate',
['exponential', 0.1],
['zoom'],
0,
0.3,
22,
1
]
}
)
sky.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# VJMap 3D Layer
View online demo (opens new window)
# Video Layer
map.addSource("butterfly_src", {
type: 'video',
urls: ["https://vjmap.com/static/assets/video/butterfly.mp4"],
coordinates: map.toLngLat(mapBounds.toPointArray())
});
map.addLayer({
'id': 'video_layer',
'type': 'raster',
'source': 'butterfly_src'
});
let video = map.getSource('butterfly_src');
// Play
// video.play();
// Pause
// video.pause();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15