feature map added to features and feature go template

PDOK · Nov 20, 2023 · 507826f · 507826f
1 parent dfbdb3c
commit 507826f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/ogc/features/templates/feature.go.html b/ogc/features/templates/feature.go.html
@@ -23,8 +23,26 @@ <h2 class="title">{{ .Config.Title }} - {{ if and .Params.Metadata .Params.Metad
         </table>
     </div>
 
-    <div class="col-8" style="background-color: lightblue">
-        TODO: Display map with feature here
+    <div class="col4">
+
+
+            <link rel="stylesheet" type="text/css" href="view-component/styles.css">
+            <script type="text/javascript" src="view-component/main.js"></script>
+            <script type="text/javascript" src="view-component/polyfills.js"></script>
+            <script type="text/javascript" src="view-component/runtime.js"></script>
+            <app-feature-view
+                id="featuresmap"                 
+            >
+           </app-feature-view>
+
+           <script>
+                const jsonurl = new URL(window.location.href)
+                jsonurl.searchParams.set('f','json'); 
+                const map = document.getElementById('featuresmap'); 
+                map.setAttribute('items-url', jsonurl );        
+            </script>
+
+        </div>
     </div>
 
 </section>

diff --git a/ogc/features/templates/features.go.html b/ogc/features/templates/features.go.html
@@ -10,6 +10,7 @@
         url.searchParams.set(name, value);
         window.location.href = url.toString();
     }
+
 </script>
 
 <hgroup>
@@ -33,9 +34,26 @@ <h5 class="card-header">
             </div>
         </div>
     </div>
+    {{ $collId := .Params.CollectionID }}
+
+    <div class="col-4" >
+
+        <link rel="stylesheet" type="text/css" href="view-component/styles.css">
+        <script type="text/javascript" src="view-component/main.js"></script>
+        <script type="text/javascript" src="view-component/polyfills.js"></script>
+        <script type="text/javascript" src="view-component/runtime.js"></script>
+        <app-feature-view
+            id="featuresmap"                 
+        >
+       </app-feature-view>
+
+       <script>
+            const jsonurl = new URL(window.location.href)
+            jsonurl.searchParams.set('f','json'); 
+            const map = document.getElementById('featuresmap'); 
+            map.setAttribute('items-url', jsonurl );        
+        </script>
 
-    <div class="col-4" style="background-color: lightblue">
-        TODO: Display map with features here
     </div>
 
     <div class="col-8">
@@ -63,7 +81,7 @@ <h5 class="card-header">
             </ul>
         </nav>
 
-    {{ $collId := .Params.CollectionID }}
+
     {{ range $feat := .Params.Features }}
         <table class="table table-striped">
             <thead>