mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 19:01:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

add Vite-based app for example TypeScript application

Browse Source
This commit is contained in:
Brandon Liu
2022-05-02 16:37:41 +08:00
parent a006dc2600
commit a1753af6df
24 changed files with 3689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/public/examples/maplibre.html Normal file
View File

@@ -0,0 +1,70 @@
<html>
<head>
</head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
<!-- <script src="../js/dist/index.js"></script> -->
<style>
body, #map {
height:100vh;
margin:0px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let cache = new pmtiles.ProtocolCache();
maplibregl.addProtocol("pmtiles",cache.protocol);
var style = {
"version": 8,
"sources": {
"tpe_sample": {
"type": "vector",
"tiles": ["pmtiles://tpe_sample.pmtiles/{z}/{x}/{y}"],
"maxzoom":14
}
},
"layers": [
{
"id": "buildings",
"type": "fill",
"source":"tpe_sample",
"source-layer":"buildings",
"paint": {
"fill-color":"black"
}
},
{
"id": "roads",
"type": "line",
"source":"tpe_sample",
"source-layer":"roads",
"paint": {
"line-color":"red"
}
},
{
"id": "mask",
"type": "fill",
"source":"tpe_sample",
"source-layer":"mask",
"paint": {
"fill-color":"white"
}
}
]
}
var map = new maplibregl.Map({
container: 'map',
center: [121.5177,25.0412],
zoom: 14,
style: style
});
</script>
</body>
</html>