This repository has been archived by the owner on Sep 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
maplibre2.html
78 lines (71 loc) · 2.23 KB
/
maplibre2.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a default marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="https://ioalexei.github.io/tur_adm2/js/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new maplibregl.Map({
container: 'map',
style: 'https://tiles.stadiamaps.com/styles/alidade_smooth.json?api_key=4c2104b1-b9f9-49bf-bb6a-b5103c46ad85', // stylesheet location
center: [36.5, 37.5], // starting position [lng, lat]
zoom: 6 // starting zoom
});
// Add navigation widget https://maplibre.org/maplibre-gl-js-docs/example/navigation/
map.addControl(new maplibregl.NavigationControl());
// load pmtiles plugin
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
// pmtiles
map.on('load', function () {
map.addSource('protomaps', {
'type': 'vector',
"url": "pmtiles://https://ioalexei.github.io/tur_adm2/pmt/adm2_markets.pmtiles"
});
map.addLayer({
'id':'adm2_lyr',
'type': 'fill',
'source':'protomaps',
'source-layer':'tur_adm2',
'layout':{},
'paint':{
"fill-outline-color": "mediumblue",
"fill-color": "steelblue",
"fill-opacity":0.2
}
});
map.addLayer({
"id":"shops",
"source": "protomaps",
"source-layer":"markets",
"type": "circle",
"paint":{
"circle-radius":2,
"circle-color":"purple"
},
"filter":["!=", "$Shop name", ""]
});
map.addLayer({
"id":"atms",
"source":"protomaps",
"source-layer":"markets",
"type": "circle",
"paint":{
"circle-radius":2,
"circle-color": "orange", },
"filter":["!=", "$Bank name", ""]
});
});
</script>
</body>
</html>