mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 02:41:09 +00:00
deploy: 9598b8abeb
This commit is contained in:
bdon
33
examples/leaflet.html
Normal file
33
examples/leaflet.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>PMTiles Leaflet Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.0/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/pmtiles@4.4.0/dist/pmtiles.js"></script>
|
||||
<style>
|
||||
body, #map {
|
||||
height:100vh;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="text/javascript">
|
||||
const map = L.map("map").setView([0, 0], 0);
|
||||
|
||||
const p = new pmtiles.PMTiles(
|
||||
"https://pmtiles.io/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles"
|
||||
);
|
||||
p.getHeader().then((h) => {
|
||||
let layer = pmtiles.leafletRasterLayer(p, {
|
||||
maxzoom: h.maxZoom,
|
||||
attribution:
|
||||
'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
|
||||
});
|
||||
layer.addTo(map);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
examples/maplibre.html
Normal file
85
examples/maplibre.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>PMTiles MapLibre Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.css" crossorigin="anonymous">
|
||||
<script src="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/pmtiles@4.4.0/dist/pmtiles.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#map {
|
||||
height:100%; width:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="text/javascript">
|
||||
// add the PMTiles plugin to the maplibregl global.
|
||||
// setting metadata = true fills out the "attribution" field of the source, and is required for some inspector applications,
|
||||
// but requires an additional blocking HTTP request before loading the map.
|
||||
let protocol = new pmtiles.Protocol({metadata: true});
|
||||
maplibregl.addProtocol("pmtiles", protocol.tile);
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: "map",
|
||||
zoom: 13,
|
||||
center: [11.2543435, 43.7672134],
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
example_source: {
|
||||
type: "vector",
|
||||
// For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
|
||||
// tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
|
||||
// see https://maplibre.org/maplibre-style-spec/sources/#vector
|
||||
url: "pmtiles://https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles",
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "water",
|
||||
source: "example_source",
|
||||
"source-layer": "water",
|
||||
filter: ["==",["geometry-type"],"Polygon"],
|
||||
type: "fill",
|
||||
paint: {
|
||||
"fill-color": "#80b1d3",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "buildings",
|
||||
source: "example_source",
|
||||
"source-layer": "buildings",
|
||||
type: "fill",
|
||||
paint: {
|
||||
"fill-color": "#d9d9d9",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "roads",
|
||||
source: "example_source",
|
||||
"source-layer": "roads",
|
||||
type: "line",
|
||||
paint: {
|
||||
"line-color": "#fc8d62",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "pois",
|
||||
source: "example_source",
|
||||
"source-layer": "pois",
|
||||
type: "circle",
|
||||
paint: {
|
||||
"circle-color": "#ffffb3",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
map.showTileBoundaries = true;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
104
examples/maplibre_advanced.html
Normal file
104
examples/maplibre_advanced.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>PMTiles MapLibre Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.css" crossorigin="anonymous">
|
||||
<script src="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/pmtiles@4.4.0/dist/pmtiles.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#map {
|
||||
height:calc(100% - 50px);
|
||||
width:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
Description from PMTiles metadata: <span id="description"></span>
|
||||
<script type="text/javascript">
|
||||
// Advanced MapLibre example demonstrating PMTiles JavaScript API + pmtiles:// protocol.
|
||||
|
||||
let protocol = new pmtiles.Protocol();
|
||||
maplibregl.addProtocol("pmtiles", protocol.tile);
|
||||
|
||||
let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";
|
||||
|
||||
let source = new pmtiles.FetchSource(PMTILES_URL, new Headers({'Content-Language': 'xx'}));
|
||||
|
||||
const p = new pmtiles.PMTiles(source);
|
||||
|
||||
// this is so we share one instance across the JS code and the map renderer
|
||||
protocol.add(p);
|
||||
|
||||
p.getMetadata().then((m) => {
|
||||
document.getElementById("description").textContent = m.description;
|
||||
})
|
||||
|
||||
// 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: h.maxZoom - 2,
|
||||
center: [h.centerLon, h.centerLat],
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
example_source: {
|
||||
type: "vector",
|
||||
// For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
|
||||
// tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
|
||||
// see https://maplibre.org/maplibre-style-spec/sources/#vector
|
||||
url: "pmtiles://" + PMTILES_URL,
|
||||
attribution:
|
||||
'© <a href="https://openstreetmap.org">OpenStreetMap</a>',
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "water",
|
||||
source: "example_source",
|
||||
"source-layer": "water",
|
||||
filter: ["==",["geometry-type"],"Polygon"],
|
||||
type: "fill",
|
||||
paint: {
|
||||
"fill-color": "#80b1d3",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "buildings",
|
||||
source: "example_source",
|
||||
"source-layer": "buildings",
|
||||
type: "fill",
|
||||
paint: {
|
||||
"fill-color": "#d9d9d9",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "roads",
|
||||
source: "example_source",
|
||||
"source-layer": "roads",
|
||||
type: "line",
|
||||
paint: {
|
||||
"line-color": "#fc8d62",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "pois",
|
||||
source: "example_source",
|
||||
"source-layer": "pois",
|
||||
type: "circle",
|
||||
paint: {
|
||||
"circle-color": "#ffffb3",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
map.showTileBoundaries = true;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
examples/maplibre_raster_dem.html
Normal file
59
examples/maplibre_raster_dem.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>PMTiles MapLibre Raster DEM Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.css" crossorigin="anonymous">
|
||||
<script src="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/pmtiles@4.4.0/dist/pmtiles.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#map {
|
||||
height:100%; width:100%;
|
||||
}
|
||||
#overlay {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
font: 600 16px sans-serif;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
let protocol = new pmtiles.Protocol({metadata: true});
|
||||
maplibregl.addProtocol("pmtiles", protocol.tile);
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: "map",
|
||||
zoom: 0,
|
||||
center: [0, 0],
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
example_source: {
|
||||
type: "raster-dem",
|
||||
url: "pmtiles://https://download.mapterhorn.com/planet.pmtiles",
|
||||
encoding: "terrarium",
|
||||
attribution: "<a href='https://mapterhorn.com/attribution'>© Mapterhorn</a>"
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "dem",
|
||||
source: "example_source",
|
||||
type: "hillshade",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
39
examples/openlayers/raster.html
Normal file
39
examples/openlayers/raster.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>PMTiles OpenLayers Raster Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@v9.0.0/dist/ol.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.0.0/ol.css">
|
||||
<script src="https://unpkg.com/ol-pmtiles@2.0.2/dist/olpmtiles.js"></script>
|
||||
<style>
|
||||
body, #map {
|
||||
height:100vh;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="text/javascript">
|
||||
const rasterLayer = new ol.layer.WebGLTile({
|
||||
source: new olpmtiles.PMTilesRasterSource({
|
||||
url:"https://download.mapterhorn.com/planet.pmtiles",
|
||||
attributions:["https://mapterhorn.com/attribution/"],
|
||||
tileSize: [512,512]
|
||||
})
|
||||
});
|
||||
|
||||
ol.proj.useGeographic();
|
||||
|
||||
const map = new ol.Map({
|
||||
layers: [rasterLayer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0,0],
|
||||
zoom: 1,
|
||||
multiWorld: true
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
46
examples/openlayers/vector.html
Normal file
46
examples/openlayers/vector.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>PMTiles OpenLayers Vector Example</title>
|
||||
<meta charset="utf-8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@v9.0.0/dist/ol.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.0.0/ol.css">
|
||||
<script src="https://unpkg.com/ol-pmtiles@2.0.2/dist/olpmtiles.js"></script>
|
||||
<style>
|
||||
body, #map {
|
||||
height:100vh;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="text/javascript">
|
||||
const vectorLayer = new ol.layer.VectorTile({
|
||||
declutter: true,
|
||||
source: new olpmtiles.PMTilesVectorSource({
|
||||
url: "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles",
|
||||
attributions: ["© Land Information New Zealand"]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'gray',
|
||||
width: 1,
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(20,20,20,0.9)',
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
ol.proj.useGeographic();
|
||||
const map = new ol.Map({
|
||||
layers: [vectorLayer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [172.606201,-43.556510],
|
||||
zoom: 7
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user