From 507826f2efd7379e8a7709a3b8432f3bcca25d2b Mon Sep 17 00:00:00 2001
From: "john.schaap@kadaster.nl" <John.Schaap@kadaster.nl>
Date: Mon, 20 Nov 2023 17:33:57 +0100
Subject: [PATCH] feature map added to features and feature go template

---
 ogc/features/templates/feature.go.html  | 22 ++++++++++++++++++++--
 ogc/features/templates/features.go.html | 24 +++++++++++++++++++++---
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/ogc/features/templates/feature.go.html b/ogc/features/templates/feature.go.html
index 06d12233..17fe88c1 100644
--- 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
index 2db5f6f5..b6d18fa2 100644
--- 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>