mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 02:41:09 +00:00
eb23c33ab0
Bumps [rollup](https://github.com/rollup/rollup) from 4.21.2 to 4.22.4. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v4.21.2...v4.22.4) --- updated-dependencies: - dependency-name: rollup dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
PMTiles for OpenLayers
Live Examples
Usage
Based on the OpenLayers Quick Start
npm install ol-pmtiles
Raster tiles
import "./style.css";
import { Map, View } from "ol";
import WebGLTile from "ol/layer/WebGLTile";
import { PMTilesRasterSource } from "ol-pmtiles";
import { useGeographic } from 'ol/proj';
const rasterLayer = new WebGLTile({
source: new PMTilesRasterSource({
url:"https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
attributions:["https://github.com/tilezen/joerd/blob/master/docs/attribution.md"],
tileSize: [512,512]
})
});
useGeographic();
const map = new Map({
target: "map",
layers: [rasterLayer],
view: new View({
center: [0,0],
zoom: 1,
}),
});
Vector tiles
import "./style.css";
import { Map, View } from "ol";
import VectorTile from "ol/layer/VectorTile";
import { PMTilesVectorSource } from "ol-pmtiles";
import { Style, Stroke, Fill } from 'ol/style';
import { useGeographic } from 'ol/proj';
const vectorLayer = new VectorTile({
declutter: true,
source: new PMTilesVectorSource({
url: "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles",
attributions: ["© Land Information New Zealand"],
}),
style: new Style({
stroke: new Stroke({
color: "gray",
width: 1,
}),
fill: new Fill({
color: "rgba(20,20,20,0.9)",
}),
}),
});
useGeographic();
const map = new Map({
target: "map",
layers: [vectorLayer],
view: new View({
center: [172.606201,-43.556510],
zoom: 7,
}),
});