mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 19:01:08 +00:00
74 lines
2.9 KiB
HTML
74 lines
2.9 KiB
HTML
<html>
|
|
<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@latest/index.js"></script>
|
|
<!-- <script src="../js/dist/index.js"></script> -->
|
|
<style>
|
|
body, #map {
|
|
height:100vh;
|
|
margin:0px;
|
|
background-color: #222222;
|
|
}
|
|
|
|
#overlay {
|
|
position: absolute;
|
|
top: 0px;
|
|
padding: 1rem;
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
<title>zcta - gl</title>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div id="overlay">
|
|
displaying archive: <a href="https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles">cb_2018_us_zcta510_500k_nolimit.pmtiles</a>
|
|
<pre>ogr2ogr -t_srs EPSG:4326 cb_2018_us_zcta510_500k.json cb_2018_us_zcta510_500k.shp
|
|
tippecanoe -zg --projection=EPSG:4326 --no-tile-compression --no-feature-limit --no-tile-size-limit -o cb_2018_us_zcta510_500k_nolimit.mbtiles -l zcta cb_2018_us_zcta510_500k.json
|
|
pmtiles-convert cb_2018_us_zcta510_500k_nolimit.mbtiles cb_2018_us_zcta510_500k_nolimit.pmtiles</pre>
|
|
</div>
|
|
<script>
|
|
pmtiles.addProtocol(maplibregl)
|
|
var style = {
|
|
"version": 8,
|
|
"sources": {
|
|
"zcta": {
|
|
"type": "vector",
|
|
"tiles": ["pmtiles://https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles/{z}/{x}/{y}"],
|
|
"maxzoom":7
|
|
}
|
|
},
|
|
"layers": [
|
|
{
|
|
"id": "ztcta_fill",
|
|
"type": "fill",
|
|
"source":"zcta",
|
|
"source-layer":"zcta",
|
|
"paint": {
|
|
"fill-color":"white"
|
|
}
|
|
},
|
|
{
|
|
"id": "zcta_stroke",
|
|
"type": "line",
|
|
"source":"zcta",
|
|
"source-layer":"zcta",
|
|
"paint": {
|
|
"line-color":"steelblue",
|
|
"line-width":0.5
|
|
}
|
|
}
|
|
]
|
|
}
|
|
var map = new maplibregl.Map({
|
|
container: 'map',
|
|
center: [-101.43,44.34],
|
|
zoom: 3,
|
|
style: style
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |