Merge pull request #1 from neo-garaix/add-demo-3044

Add new demo with Bundeslander and OSM on EPSG:3044
3liz · Oct 10, 2024 · 867f098 · 867f098
2 parents e778d04 + bf54027
commit 867f098
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 6 deletions.
diff --git a/bundeslander-3044.js b/bundeslander-3044.js
@@ -0,0 +1,43 @@
+import Map from 'ol/Map.js';
+import Projection from 'ol/proj/Projection.js';
+import View from 'ol/View.js';
+import {proj4} from 'proj4rs/proj4.js';
+import {register} from 'ol/proj/proj4.js';
+import {OSM, Vector} from "ol/source";
+import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
+import {getCenter} from 'ol/extent.js';
+import {createLoader} from "flatgeobuf/lib/mjs/ol";
+
+
+proj4.defs(
+  'EPSG:3044',
+  '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
+);
+register(proj4);
+
+const projection = new Projection({
+  code: 'EPSG:3044',
+  extent: [-500148.9813, 5090138.2818, 1858594.5902, 6300956.2195],
+});
+
+const source = new Vector();
+const loader = createLoader(source, '../fgb/axis_orientation_neu_3044.fgb', 'EPSG:3044');
+source.setLoader(loader)
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+    new VectorLayer({
+      source
+    })
+  ],
+  target: 'map',
+  view: new View({
+    projection: projection,
+    center: getCenter(projection.getExtent()),
+    zoom: 2,
+    extent: projection.getExtent()
+  })
+});
diff --git a/demo-pages/bundeslander-3044.html b/demo-pages/bundeslander-3044.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Bundeslander on EPSG:3044</title>
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="stylesheet" href="../ressources/css/style.css">
+    <link rel="stylesheet" href="../ressources/css/codeStyle.css">
+</head>
+<body>
+<header>OpenLayers + Proj4rs</header>
+<h4 id="title">Bundeslander on EPSG:3044</h4>
+<div id="map" class="map simple"></div>
+<p class="demo-description">
+    Proj4rs can integrate the ESPG:3044 projection.
+</p>
+<div class="code-section">
+        <pre class="left" tabindex="0">
+            <h3>proj4 OpenLayers</h3>
+            <code class="language-js">
+<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'ol/Map.js'</span>;
+<span class="token keyword">import</span> Projection <span class="token keyword">from</span> <span class="token string">'ol/proj/Projection.js'</span>;
+<span class="token keyword">import</span> View <span class="token keyword">from</span> <span class="token string">'ol/View.js'</span>;
+<span class="change"><span class="token keyword">import</span> proj4 <span class="token keyword">from</span> <span class="token string">'proj4'</span>;</span>
+<span class="token keyword">import</span> {register} <span class="token keyword">from</span> <span class="token string">'ol/proj/proj4.js'</span>;
+<span class="token keyword">import</span> {OSM, Vector} <span class="token keyword">from</span> <span class="token string">'ol/source'</span>;
+<span class="token keyword">import</span> {Tile <span class="token keyword">as</span> TileLayer, Vector <span class="token keyword">as</span> VectorLayer} <span class="token keyword">from</span> <span class="token string">'ol/layer.js'</span>;
+<span class="token keyword">import</span> {getCenter} <span class="token keyword">from</span> <span class="token string">'ol/extent.js'</span>;
+<span class="token keyword">import</span> {createLoader} <span class="token keyword">from</span> <span class="token string">'flatgeobuf/lib/mjs/ol'</span>;
+...</code>
+        </pre>
+    <pre class="right" tabindex="0">
+            <h3>proj4rs</h3>
+            <code class="language-js">
+<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'ol/Map.js'</span>;
+<span class="token keyword">import</span> Projection <span class="token keyword">from</span> <span class="token string">'ol/proj/Projection.js'</span>;
+<span class="token keyword">import</span> View <span class="token keyword">from</span> <span class="token string">'ol/View.js'</span>;
+<span class="change"><span class="token keyword">import</span> {proj4} <span class="token keyword">from</span> <span class="token string">'proj4rs/proj4.js'</span>;</span>
+<span class="token keyword">import</span> {register} <span class="token keyword">from</span> <span class="token string">'ol/proj/proj4.js'</span>;
+<span class="token keyword">import</span> {OSM, Vector} <span class="token keyword">from</span> <span class="token string">'ol/source'</span>;
+<span class="token keyword">import</span> {Tile <span class="token keyword">as</span> TileLayer, Vector <span class="token keyword">as</span> VectorLayer} <span class="token keyword">from</span> <span class="token string">'ol/layer.js'</span>;
+<span class="token keyword">import</span> {getCenter} <span class="token keyword">from</span> <span class="token string">'ol/extent.js'</span>;
+<span class="token keyword">import</span> {createLoader} <span class="token keyword">from</span> <span class="token string">'flatgeobuf/lib/mjs/ol'</span>;
+...</code>
+        </pre>
+</div>
+
+<nav>
+    <a class="navLabel" href="../index.html">Home</a><br>
+    <a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
+    <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
+    <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
+    <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
+    <a class="navLabel" href="vector-projections.html">Vector projections</a><br>
+    <a id="navLabelActive" class="navLabel" href="bundeslander-3044.html">Bundeslander EPSG:3044</a>
+</nav>
+
+<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
+<script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
+<script type="module" src="../bundeslander-3044.js"></script>
+</body>
+</html>
diff --git a/demo-pages/reprojection-image.html b/demo-pages/reprojection-image.html
@@ -63,7 +63,8 @@ <h3>proj4rs</h3>
         <a id="navLabelActive" class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
         <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
         <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
-        <a class="navLabel" href="vector-projections.html">Vector projections</a>
+        <a class="navLabel" href="vector-projections.html">Vector projections</a><br>
+        <a class="navLabel" href="bundeslander-3044.html">Bundeslander EPSG:3044</a>
     </nav>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

diff --git a/demo-pages/reprojection.html b/demo-pages/reprojection.html
@@ -90,7 +90,8 @@ <h3>proj4rs</h3>
         <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
         <a id="navLabelActive" class="navLabel" href="reprojection.html">Raster reprojection</a><br>
         <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
-        <a class="navLabel" href="vector-projections.html">Vector projections</a>
+        <a class="navLabel" href="vector-projections.html">Vector projections</a><br>
+        <a class="navLabel" href="bundeslander-3044.html">Bundeslander EPSG:3044</a>
     </nav>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

diff --git a/demo-pages/sphere-mollweide.html b/demo-pages/sphere-mollweide.html
@@ -59,7 +59,8 @@ <h3>proj4rs</h3>
         <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
         <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
         <a id="navLabelActive" class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
-        <a class="navLabel" href="vector-projections.html">Vector projections</a>
+        <a class="navLabel" href="vector-projections.html">Vector projections</a><br>
+        <a class="navLabel" href="bundeslander-3044.html">Bundeslander EPSG:3044</a>
     </nav>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

diff --git a/demo-pages/vector-projections.html b/demo-pages/vector-projections.html
@@ -71,7 +71,8 @@ <h3>proj4rs</h3>
     <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
     <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
     <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
-    <a id="navLabelActive" class="navLabel" href="vector-projections.html">Vector projections</a>
+    <a id="navLabelActive" class="navLabel" href="vector-projections.html">Vector projections</a><br>
+    <a class="navLabel" href="bundeslander-3044.html">Bundeslander EPSG:3044</a>
 </nav>
 
 <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

diff --git a/demo-pages/wms-image-custom-proj.html b/demo-pages/wms-image-custom-proj.html
@@ -53,7 +53,8 @@ <h3>proj4rs</h3>
         <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
         <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
         <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
-        <a class="navLabel" href="vector-projections.html">Vector projections</a>
+        <a class="navLabel" href="vector-projections.html">Vector projections</a><br>
+        <a class="navLabel" href="bundeslander-3044.html">Bundeslander EPSG:3044</a>
     </nav>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

diff --git a/fgb/axis_orientation_neu_3044.fgb b/fgb/axis_orientation_neu_3044.fgb
diff --git a/index.html b/index.html
@@ -44,6 +44,13 @@ <h4 id="title">Image Reprojection</h4>
             <p class="description">This example shows a GeoJSON layer that is well converted between various projections.</p>
           </a>
         </div>
+        <div class="col-md-4 col-sm-6">
+          <a class="example  bg-light border rounded" href="demo-pages/bundeslander-3044.html">
+            <strong>Bundeslander on EPSG:3044</strong><br>
+            <small>(bundeslander-3044.html)</small>
+            <p class="description">Proj4rs can integrate the ESPG:3044 projection.</p>
+          </a>
+        </div>
       </container>
     </body>
   </html>
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
+    "flatgeobuf": "^3.35.0",
     "ol": "latest",
     "proj4rs": "^0.1.6",
     "vite-plugin-wasm": "^3.3.0"

diff --git a/ressources/css/style.css b/ressources/css/style.css
@@ -174,7 +174,7 @@ nav {
   top: 15vh;
   display: flex;
   flex-direction: column;
-  text-indent: -460%;
+  text-indent: -600%;
   transition: ease 200ms;
 }
 
@@ -204,6 +204,7 @@ nav:hover {
 .navLabel {
   border-right: solid 3px #000000;
   color: black;
+  background-color: white;
   width: 40px;
   height: 50px;
   transition: ease 200ms;