GEOS-11488: MapML Double click to copy attributes to feature caption …

…template (geoserver#7813)

* GEOS-11488: MapML Double click to copy attributes to feature caption template
Co-authored-by: Andrea Aime <[email protected]>

doc/en/user/source/extensions/mapml/installation.rst

@@ -16,8 +16,31 @@ Configuration can be done using the Geoserver administrator GUI. The MapML confi
 
 .. figure:: images/mapml_config_ui.png
 
+*Attributes to <feature caption> mapping* section allows to define a template so that feature caption can include attribute values.
+Double clicking on one entry of the List of Attributes, will append an *${attribute}* placeholder at the end of the Feature Caption Template String text area.
+
+For example, for the State layer, you can define a template showing the State Name and the number of persons,
+by following these steps:
+
+  #. Write "State Name:" on the text area
+  #. Double click on the *STATE_NAME* attribute from the list of attributes, which will result in appending the *${STATE_NAME}* placeholder to the previous text.
+  #. Continue writing ", Persons:" on the text area
+  #. Double click on the *PERSONS* attribute from the list of attributes, which will result in appending the *${PERSONS}* placeholder to the previous text.
+
+See the following gif showing the result.
+
+.. figure:: images/mapml_feature_caption.gif
+
+After having saved the configuration, the WFS output will looks like this, where on mouseover, you can see the feature caption being setup on top of the defined template:
+
+.. figure:: images/mapml_feature_captions_wfs.png
+
+
+
+
 There is also a MapML-specific global WMS setting in the *MapML Extension* section of the ``WMS`` Services Settings Page.  This setting is used to control the handling of multi-layer requests.  
 
+
 .. figure:: images/mapml_config_wms.png
 
 If the ``Represent multi-layer requests as multiple elements`` is checked (and the configuration is saved), an individually accessible <map-extent> element will be generated for each requested layer.  The default is to represent the layers as a single (hidden) <map-extent>.

src/extension/mapml/src/main/java/org/geoserver/mapml/MapMLLayerConfigurationPanel.html

@@ -99,6 +99,7 @@ <h3>
                             </label>
                             <textarea id="featureCaptionTemplate" wicket:id="featureCaptionTemplate"
                                       class="field textarea" rows="5" cols="30"></textarea>
+                            <script src="mapml/js/feature-caption-selector.js" type="text/javascript"></script>
                         </li>
                     </ul>
                 </fieldset>

src/extension/mapml/src/main/resources/applicationContext.xml

@@ -41,6 +41,7 @@
         <constructor-arg ref="wms"/>
     </bean>
     <mvc:resources mapping="/mapml/viewer/**" location="classpath:/viewer/"/>
+    <mvc:resources mapping="/mapml/js/**" location="classpath:/org/geoserver/mapml/"/>
     <bean class="org.geoserver.mapml.MapMLMessageConverter" id="mapmlMessageConverter"/>
     <util:map id="prefixMap" value-type="java.lang.String" key-type="java.lang.String" map-class="java.util.HashMap">
         <entry key="http://www.w3.org/1999/xhtml" value=""/>

src/extension/mapml/src/main/resources/org/geoserver/mapml/feature-caption-selector.js

@@ -0,0 +1,28 @@
+function insertTextAtCaret(text) {
+    var template = $('#featureCaptionTemplate');
+    var start = template[0].selectionStart;
+    var end = template[0].selectionEnd;
+
+    // Get the text before and after the caret position
+    var beforeText = template.val().substring(0, start);
+    var afterText = template.val().substring(end);
+
+    // Insert the text at the caret position
+    template.val(beforeText + text + afterText);
+
+    // Move the caret to the end of the inserted text
+    var newCaretPosition = start + text.length;
+    template[0].selectionStart = template[0].selectionEnd = newCaretPosition;
+
+    // Set focus back to the textarea
+    template.focus();
+}
+
+$(document).ready(function() {
+    $(this).on('dblclick', 'option', function() {
+        var selectedAttribute = $(this).text();
+        var formattedAttribute = '${' + selectedAttribute + '}';
+        insertTextAtCaret(formattedAttribute);
+    });
+});
+