ol-pmtiles 0.0.2: basic first-class support for OpenLayers

openlayers/README.md

@@ -0,0 +1,75 @@
+# PMTiles for OpenLayers
+
+## Example Usage
+
+Based on the [OpenLayers Quick Start](https://openlayers.org/doc/quickstart.html)
+
+`npm install ol-pmtiles`
+
+### Raster tiles
+
+```js
+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
+
+```js
+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,
+  }),
+});
+```