first version

renewestenberg · Nov 6, 2024 · 03e046b · 03e046b
1 parent 8961b04
commit 03e046b
Show file tree

Hide file tree

Showing 7 changed files with 4,082 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>OSM Vector Tiles</title>
+    <link rel="stylesheet" href="node_modules/ol/ol.css">
+    <style>
+      .map {
+        width: 100%;
+        height: 850px;
+      }
+      .map {
+        background: #f8f4f0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map" class="map"></div>
+
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,82 @@
+import Map from 'ol/Map.js';
+import VectorTileLayer from 'ol/layer/VectorTile.js';
+import OGCVectorTile from 'ol/source/OGCVectorTile.js';
+import VectorTile from 'ol/source/VectorTile.js';
+import View from 'ol/View.js';
+import MVT from 'ol/format/MVT.js';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import Projection from 'ol/proj/Projection';
+import {
+    getTopLeft
+}
+from 'ol/extent.js';
+import {
+    applyStyle
+}
+from 'ol-mapbox-style';
+
+export const PROJECTION_EXTENT = [-285401.92, 22598.08, 595401.92, 903401.92];
+export const PROJECTION = new Projection({
+    code: 'EPSG:28992',
+    extent: PROJECTION_EXTENT,
+    units: 'm'
+});
+
+const styleUrl = 'https://api.pdok.nl/lv/bgt/ogc/v1/styles/bgt_standaardvisualisatie__netherlandsrdnewquad?f=mapbox'; // Replace with your style JSON URL
+const baseUrl = 'https://api.pdok.nl/lv/bgt/ogc/v1/tiles/NetherlandsRDNewQuad'
+
+const tileGrid = new TileGrid({
+        extent: PROJECTION_EXTENT,
+        resolutions: [3440.64, 1720.32, 860.16, 430.08, 215.04, 107.52, 53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21, 0.105, 0.0525, 0.02625],
+        tileSize: [256, 256],
+        origin: getTopLeft(PROJECTION_EXTENT)
+    });
+
+const ogcVectorTileSource = new OGCVectorTile({
+    format: new MVT(),
+    projection: PROJECTION,
+    tileGrid: tileGrid,
+    url: baseUrl,
+    cacheSize: 0
+
+});
+
+const vectorTileSource = new VectorTile({
+    format: new MVT(),
+    projection: PROJECTION,
+    tileGrid: tileGrid,
+    url: `${baseUrl}/{z}/{y}/{x}`,
+    cacheSize: 0
+
+});
+
+// Create the VectorTile layer without the manual style function
+const vectorTileLayer = new VectorTileLayer({
+    source: vectorTileSource,
+    useInterimTilesOnError: false
+});
+
+const ogcVectorTileLayer = new VectorTileLayer({
+    source: ogcVectorTileSource,
+    useInterimTilesOnError: false
+});
+
+
+applyStyle(vectorTileLayer, styleUrl).then(() => {
+    console.log('Style applied successfully', styleUrl);
+}).catch(error => {
+    console.error('Error applying style:', error);
+});
+
+const map = new Map({
+    layers: [vectorTileLayer, ogcVectorTileLayer],
+
+    target: 'map',
+
+    view: new View({
+        projection: PROJECTION,
+        center: [119405, 476720],
+        zoom: 12,
+        enableRotation: false
+    }),
+});