-
Notifications
You must be signed in to change notification settings - Fork 0
/
maplibre-pmt.html
100 lines (91 loc) · 3.53 KB
/
maplibre-pmt.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PMTiles turkey</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://api.maptiler.com/maps/dataviz/style.json?key=jHKRGcVLQieliF2glneL', // 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
let PMTILES_URL = "https://ioalexei.github.io/tur_adm2/pmt/adm2_markets.pmtiles";
const p = new pmtiles.PMTiles(PMTILES_URL)
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);
// we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then(h => {
const map = new maplibregl.Map({
container: 'map',
zoom: 6,
center: [36.5, 37.5],
style: {
version:8,
sources: {
"example_source": {
type: "vector",
url: "pmtiles://" + PMTILES_URL,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [
{
"id":"adm2",
"source": "example_source",
"source-layer":"tur_adm2",
"type": "fill",
"paint": {
"fill-outline-color": "mediumblue",
"fill-color": "steelblue",
"fill-opacity":0.2
}
},
{
"id":"shops",
"source": "example_source",
"source-layer":"markets",
"type": "circle",
"paint":{
"circle-radius":2,
"circle-color":"purple"
},
"filter":["all", ["==", "$Shop name", "A101"], ["==", "$Shop name", "Migros"], ["==", "$Shop name", "SOK"]]
},
{
"id":"atms",
"source":"example_source",
"source-layer":"markets",
"type": "circle",
"paint":{
"circle-radius":2,
"circle-color": "orange", },
"filter":["!=", "$Bank name", ""]
}
]
}
});
//map.showTileBoundaries = true;
})
// https://maplibre.org/maplibre-gl-js-docs/example/popup-on-hover/
// add rest of code for popups
</script>
</body>
</html>