[GEOS-11371] Refactor inline JavaScript in the GetMap OpenLayers format

geoserver · Apr 19, 2024 · f94a2c9 · f94a2c9
1 parent a4376db
commit f94a2c9
Show file tree

Hide file tree

Showing 7 changed files with 747 additions and 604 deletions.
diff --git a/src/extension/authkey/src/test/java/org/geoserver/security/AuthenticationKeyOWSTest.java b/src/extension/authkey/src/test/java/org/geoserver/security/AuthenticationKeyOWSTest.java
@@ -6,6 +6,8 @@
 package org.geoserver.security;
 
 import static org.custommonkey.xmlunit.XMLAssert.assertXpathEvaluatesTo;
+import static org.hamcrest.MatcherAssert.assertThat;
+import static org.hamcrest.Matchers.containsString;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
 
@@ -302,7 +304,11 @@ public void testOpenLayersMapOutput() throws Exception {
                                 + citeKey);
         byte[] responseContent = getBinary(response);
         String htmlDoc = new String(responseContent, StandardCharsets.UTF_8);
-        assertTrue(
-                htmlDoc.indexOf("http://localhost:8080/geoserver/cite/wms?authkey=" + citeKey) > 0);
+        assertThat(
+                htmlDoc,
+                containsString(
+                        "<input type=\"hidden\" id=\"servicePath\" value=\"cite/wms?authkey="
+                                + citeKey
+                                + "\"/>"));
     }
 }
diff --git a/src/wms/src/main/java/org/geoserver/wms/map/AbstractOpenLayersMapOutputFormat.java b/src/wms/src/main/java/org/geoserver/wms/map/AbstractOpenLayersMapOutputFormat.java
@@ -127,17 +127,15 @@ public RawMap produceMap(WMSMapContent mapContent) throws ServiceException, IOEx
             String templateName = getTemplateName(mapContent);
             Template template = cfg.getTemplate(templateName);
             HashMap<String, Object> map = new HashMap<>();
-            map.put("context", mapContent);
-            boolean hasOnlyCoverages = hasOnlyCoverages(mapContent);
-            map.put("pureCoverage", hasOnlyCoverages);
-            map.put("supportsFiltering", supportsFiltering(mapContent));
+            map.put("pureCoverage", Boolean.toString(hasOnlyCoverages(mapContent)));
+            map.put("supportsFiltering", Boolean.toString(supportsFiltering(mapContent)));
             map.put("styles", styleNames(mapContent));
             GetMapRequest request = mapContent.getRequest();
             map.put("request", request);
-            map.put("yx", String.valueOf(isWms13FlippedCRS(request.getCrs())));
+            map.put("yx", Boolean.toString(isWms13FlippedCRS(request.getCrs())));
             map.put(
                     "maxResolution",
-                    Double.valueOf(getMaxResolution(mapContent.getRenderingArea())));
+                    Double.toString(getMaxResolution(mapContent.getRenderingArea())));
             ProjectionHandler handler = null;
             try {
                 handler =
@@ -150,7 +148,7 @@ public RawMap produceMap(WMSMapContent mapContent) throws ServiceException, IOEx
             }
             map.put(
                     "global",
-                    String.valueOf(
+                    Boolean.toString(
                             handler != null && handler instanceof WrappingProjectionHandler));
 
             String baseUrl =
@@ -351,7 +349,7 @@ private List<Map<String, String>> getLayerParameter(Map<String, String> rawKvp)
         }
         if (!exceptionsFound) {
             Map<String, String> map = new HashMap<>();
-            map.put("name", "exceptions");
+            map.put("name", "EXCEPTIONS");
             map.put("value", "application/vnd.ogc.se_inimage");
             result.add(map);
         }

diff --git a/src/wms/src/main/resources/org/geoserver/wms/map/OpenLayers2MapTemplate.ftl b/src/wms/src/main/resources/org/geoserver/wms/map/OpenLayers2MapTemplate.ftl
@@ -12,6 +12,11 @@
                 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                 font-size: small;
             }
+            iframe {
+                width: 100%;
+                height: 250px;
+                border: none;
+            }
             /* Toolbar styles */
             #toolbar {
                 position: relative;
@@ -105,42 +110,43 @@
         <!-- Import OpenLayers, reduced, wms read only version -->
         <script src="${relBaseUrl}/openlayers/OpenLayers.js" type="text/javascript">
         </script>
+        <script src="${relBaseUrl}/webresources/wms/OpenLayers2Map.js" type="text/javascript"></script>
     </head>
-    <body onload="init()">
+    <body>
         <div id="toolbar" class="d-none">
             <ul>
                 <li>
                     <a>WMS version:</a>
-                    <select id="wmsVersionSelector" onchange="setWMSVersion(value)">
+                    <select id="wmsVersionSelector">
                         <option value="1.1.1">1.1.1</option>
                         <option value="1.3.0">1.3.0</option>
                     </select>
                 </li>
                 <li>
                     <a>Tiling:</a>
-                    <select id="tilingModeSelector" onchange="setTileMode(value)">
+                    <select id="tilingModeSelector">
                         <option value="untiled">Single tile</option>
                         <option value="tiled">Tiled</option>
                     </select>
                 </li>
                 <li>
                     <a>Transition effect:</a>
-                    <select id="transitionEffectSelector" onchange="setTransitionMode(value)">
+                    <select id="transitionEffectSelector">
                         <option value="">None</option>
                         <option value="resize">Resize</option>
                     </select>
                 </li>
                 <li>
                     <a>Antialias:</a>
-                    <select id="antialiasSelector" onchange="setAntialiasMode(value)">
+                    <select id="antialiasSelector">
                         <option value="full">Full</option>
                         <option value="text">Text only</option>
                         <option value="none">Disabled</option>
                     </select>
                 </li>
                 <li>
                     <a>Format:</a>
-                    <select id="imageFormatSelector" onchange="setImageFormat(value)">
+                    <select id="imageFormatSelector">
                         <option value="image/png">PNG 24bit</option>
                         <option value="image/png8">PNG 8bit</option>
                         <option value="image/gif">GIF</option>
@@ -151,7 +157,7 @@
                 </li>
                 <li>
                     <a>Styles:</a>
-                    <select id="imageFormatSelector" onchange="setStyle(value)">
+                    <select id="styleSelector">
                         <option value="">Default</option>
                         <#list styles as style>          
                           <option value="${style}">${style}</option>  
@@ -162,15 +168,15 @@
                      order to list the available palettes
                 <li>
                     <a>Palette:</a>
-                    <select id="paletteSelector" onchange="setPalette(value)">
+                    <select id="paletteSelector">
                         <option value="">None</option>
                         <option value="safe">Web safe</option>
                     </select>
                 </li>
                 -->
                 <li>
                     <a>Width/Height:</a>
-                    <select id="widthSelector" onchange="setWidth(value)">
+                    <select id="widthSelector">
                         <!--
                         These values come from a statistics of the viewable area given a certain screen area
                         (but have been adapted a litte, simplified numbers, added some resolutions for wide screen)
@@ -185,7 +191,7 @@
                         <option value="1600">1600</option>
                         <option value="1900">1900</option>
                     </select>
-                    <select id="heigthSelector" onchange="setHeight(value)">
+                    <select id="heightSelector">
                         <option value="auto">Auto</option>
                         <option value="300">300</option>
                         <option value="400">400</option>
@@ -205,13 +211,13 @@
                         <option value="fid">FeatureID</option>
                     </select>
                     <input type="text" size="80" id="filter"/>
-                    <img id="updateFilterButton" src="${baseUrl}/openlayers/img/east-mini.png" onClick="updateFilter()" title="Apply filter"/>
-                    <img id="resetFilterButton" src="${baseUrl}/openlayers/img/cancel.png" onClick="resetFilter()" title="Reset filter"/>
+                    <img id="updateFilterButton" src="${relBaseUrl}/openlayers/img/east-mini.png" title="Apply filter"/>
+                    <img id="resetFilterButton" src="${relBaseUrl}/openlayers/img/cancel.png" title="Reset filter"/>
                 </li>
             </ul>
         </div>
         <div id="map">
-            <img id="options" title="Toggle options toolbar" src="${baseUrl}/options.png"/>
+            <img id="options" title="Toggle options toolbar" src="${relBaseUrl}/options.png"/>
         </div>
         <div id="wrapper">
             <div id="location">location</div>
@@ -221,5 +227,21 @@
         <div id="nodelist">
             <em>Click on the map to get feature info</em>
         </div>
+        <input type="hidden" id="pureCoverage" value="${pureCoverage}"/>
+        <input type="hidden" id="supportsFiltering" value="${supportsFiltering}"/>
+        <input type="hidden" id="minX" value="${request.bbox.minX?c}"/>
+        <input type="hidden" id="minY" value="${request.bbox.minY?c}"/>
+        <input type="hidden" id="maxX" value="${request.bbox.maxX?c}"/>
+        <input type="hidden" id="maxY" value="${request.bbox.maxY?c}"/>
+        <input type="hidden" id="SRS" value="${request.SRS}"/>
+        <input type="hidden" id="yx" value="${yx}"/>
+        <input type="hidden" id="maxResolution" value="${maxResolution}"/>
+        <input type="hidden" id="baseUrl" value="${baseUrl}"/>
+        <input type="hidden" id="servicePath" value="${servicePath}"/>
+        <input type="hidden" id="units" value="${units}"/>
+        <input type="hidden" id="layerName" value="${layerName}"/>
+        <#list parameters as param>
+        <input type="hidden" class="param" title="${param.name}" value="${param.value}"/>
+        </#list>
     </body>
 </html>
diff --git a/src/wms/src/main/resources/org/geoserver/wms/map/OpenLayers3MapTemplate.ftl b/src/wms/src/main/resources/org/geoserver/wms/map/OpenLayers3MapTemplate.ftl
@@ -128,36 +128,37 @@
         }
     </style>
     <script src="${relBaseUrl}/openlayers3/ol.js" type="text/javascript"></script>
+    <script src="${relBaseUrl}/webresources/wms/OpenLayers3Map.js" type="text/javascript"></script>
     <title>OpenLayers map preview</title>
   </head>
   <body>
     <div id="toolbar" style="display: none;">
       <ul>
         <li>
           <a>WMS version:</a>
-          <select id="wmsVersionSelector" onchange="setWMSVersion(value)">
+          <select id="wmsVersionSelector">
             <option value="1.1.1">1.1.1</option>
             <option value="1.3.0">1.3.0</option>
           </select>
         </li>
         <li>
           <a>Tiling:</a>
-          <select id="tilingModeSelector" onchange="setTileMode(value)">
+          <select id="tilingModeSelector">
             <option value="untiled">Single tile</option>
             <option value="tiled">Tiled</option>
           </select>
         </li>
         <li>
           <a>Antialias:</a>
-          <select id="antialiasSelector" onchange="setAntialiasMode(value)">
+          <select id="antialiasSelector">
             <option value="full">Full</option>
             <option value="text">Text only</option>
             <option value="none">Disabled</option>
           </select>
         </li>
         <li>
           <a>Format:</a>
-          <select id="imageFormatSelector" onchange="setImageFormat(value)">
+          <select id="imageFormatSelector">
             <option value="image/png">PNG 24bit</option>
             <option value="image/png8">PNG 8bit</option>
             <option value="image/gif">GIF</option>
@@ -168,7 +169,7 @@
         </li>
         <li>
           <a>Styles:</a>
-          <select id="imageFormatSelector" onchange="setStyle(value)">
+          <select id="styleSelector">
             <option value="">Default</option>
             <#list styles as style>          
                <option value="${style}">${style}</option>  
@@ -177,7 +178,7 @@
         </li>
         <li>
           <a>Width/Height:</a>
-          <select id="widthSelector" onchange="setWidth(value)">
+          <select id="widthSelector">
              <!--
              These values come from a statistics of the viewable area given a certain screen area
              (but have been adapted a litte, simplified numbers, added some resolutions for wide screen)
@@ -192,7 +193,7 @@
                 <option value="1600">1600</option>
                 <option value="1900">1900</option>
             </select>
-            <select id="heigthSelector" onchange="setHeight(value)">
+            <select id="heightSelector">
                 <option value="auto">Auto</option>
                 <option value="300">300</option>
                 <option value="400">400</option>
@@ -212,20 +213,35 @@
                   <option value="fid">FeatureID</option>
               </select>
               <input type="text" size="80" id="filter"/>
-              <a id="updateFilterButton" href="#" onClick="updateFilter()" title="Apply filter">Apply</a>
-              <a id="resetFilterButton" href="#" onClick="resetFilter()" title="Reset filter">Reset</a>
+              <a id="updateFilterButton" href="#" title="Apply filter">Apply</a>
+              <a id="resetFilterButton" href="#" title="Reset filter">Reset</a>
           </li>
         </ul>
       </div>
     <div id="map">
-      <div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle">...</a></div>
+      <div class="ol-toggle-options ol-unselectable"><a id="options" title="Toggle options toolbar" href="#toggle">...</a></div>
     </div>
     <div id="wrapper">
         <div id="location"></div>
-        <div id="scale">
+        <div id="scale"></div>
     </div>
     <div id="nodelist">
         <em>Click on the map to get feature info</em>
     </div>
+    <input type="hidden" id="pureCoverage" value="${pureCoverage}"/>
+    <input type="hidden" id="supportsFiltering" value="${supportsFiltering}"/>
+    <input type="hidden" id="minX" value="${request.bbox.minX?c}"/>
+    <input type="hidden" id="minY" value="${request.bbox.minY?c}"/>
+    <input type="hidden" id="maxX" value="${request.bbox.maxX?c}"/>
+    <input type="hidden" id="maxY" value="${request.bbox.maxY?c}"/>
+    <input type="hidden" id="SRS" value="${request.SRS}"/>
+    <input type="hidden" id="yx" value="${yx}"/>
+    <input type="hidden" id="global" value="${global}"/>
+    <input type="hidden" id="baseUrl" value="${baseUrl}"/>
+    <input type="hidden" id="servicePath" value="${servicePath}"/>
+    <input type="hidden" id="units" value="${units}"/>
+    <#list parameters as param>
+    <input type="hidden" class="param" title="${param.name}" value="${param.value}"/>
+    </#list>
   </body>
 </html>