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

add zipcodes maplibre example

Browse Source
This commit is contained in:
Brandon Liu
2021-10-03 11:15:35 +08:00
parent c8ebe51eed
commit ed070af998
2 changed files with 80 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
examples/maplibre_zipcodes.html Normal file
View File

@@ -0,0 +1,73 @@
<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@0.3.1/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>