Create a "smart" layer for rendering query results.

examples/desktop/mapbook.xml

@@ -42,6 +42,7 @@
 		<attribute name="label_only" type="checkbox" default-value="false" label="Only show label in print?"/>
 	</map-source>
 
+    <!--
 	<map-source name="highlight" type="vector">
         <layer name="highlight" status="on">
             <style><![CDATA[
@@ -58,6 +59,7 @@
             ]]></style>
         </layer>
 	</map-source>
+    -->
 
 	<map-source name="census_cities" type="wfs" active="true" srs="EPSG:4269"> 
 		<style><![CDATA[
@@ -88,15 +90,15 @@
 	</map-source>
 
 	<map-source name="minnesota_places" type="wfs" active="true" srs="EPSG:4326">
-        <layer name="gm:minnesota_places"/>
-
-		<style type="stylemap"><![CDATA[
-		{
-			"fill-outline-color" : "#f00",
-            "fill-color" : "#000077",
-			"label" : "${name}"
-		}
-		]]></style>
+        <layer name="gm:minnesota_places">
+            <style type="stylemap"><![CDATA[
+            {
+                "fill-outline-color" : "#f00",
+                "fill-color" : "#000077",
+                "label" : "${name}"
+            }
+            ]]></style>
+        </layer>
 
 		<url>/mapserver/cgi-bin/tinyows</url>
 
@@ -116,6 +118,12 @@
 
     <map-source name="vector-parcels" type="mapserver-wfs">
         <layer name="ms:parcels" selectable="true" title="Parcels">
+            <style><![CDATA[
+            {
+                "line-color" : "#00A138",
+                "line-width" : 2
+            }
+            ]]></style>
             <template name="identify"><![CDATA[
                 <div class="identify-result">
                     <div class="feature-class">Vector Parcel</div>
@@ -172,32 +180,25 @@
             ]]></template>
             <template name="gridRow"><![CDATA[
             <tr 
-              onmouseenter="app.changeFeatures('highlight/highlight', {'PIN' : '{{ properties.PIN }}'}, {'displayClass' : 'red'})"
-              onmouseleave="app.changeFeatures('highlight/highlight', {'displayClass' : 'red'}, {'displayClass' : 'blue'})"
+              onmouseenter="app.highlightFeatures({'PIN' : '{{ properties.PIN }}'}, true)"
+              onmouseleave="app.clearHighlight()"
             >
-                <td>
-                  <a onClick="app.removeFeatures('highlight/highlight', {'PIN' : '{{ properties.PIN }}'}) ; app.removeQueryResults('{{ query }}', {'PIN' : '{{ properties.PIN }}'})">
-                    <i title="Remove from results" class="fa fa-trash"></i>
-                  </a>
-                </td>
                 <td>
                   <a onClick="app.zoomToExtent([{{ properties.boundedBy | join }}], 'EPSG:4326')" class="zoomto-link">
                     <i class="fa fa-search"></i> 
-                    {{ properties.PIN }}
                   </a>
                 </td>
+                <td>
+                  {{ properties.PIN }}
+                </td>
                 <td>{{ properties.OWNER_NAME }}</td>
                 <td style="text-align: right">${{ properties.EMV_TOTAL | number | localize }}</td>
-            </td>
+            </tr>
             ]]></template>
+
+            <transform attribute="EMV_TOTAL" function="number"/>
         </layer>
-		<file>./demo/parcels/parcels.map</file>
-        <style><![CDATA[
-		{
-			"line-color" : "#00A138",
-            "line-width" : 2
-		}
-        ]]></style>
+        <file>./demo/parcels/parcels.map</file>
 
     </map-source>
 

package.json

@@ -19,8 +19,8 @@
     ]
   },
   "jest": {
-    "transformIgnorePatterns" : [
-        "node_modules/(?!ol|mapbox)"
+    "transformIgnorePatterns": [
+      "node_modules/(?!ol|mapbox)"
     ],
     "setupFiles": [
       "./tests/setup.js"
@@ -68,6 +68,7 @@
     "mapbox-to-ol-style": "^2.4.2",
     "mapskin": "^1.0.0",
     "markup-js": "^1.5.21",
+    "md5": "^2.2.1",
     "ol": "^4.1.1",
     "papaparse": "^4.1.2",
     "proj4": "^2.4.3",

src/gm3/actions/mapSource.js

@@ -30,10 +30,16 @@ import { MAPSOURCE } from '../actionTypes';
 
 import * as util from '../util';
 
+var MS_Z_INDEX = 100000;
+
 /** Add a map-source using a MapSource
  *  object.
  */
 export function add(mapSource) {
+    if(typeof(mapSource.zIndex) !== 'number') {
+        mapSource.zIndex = MS_Z_INDEX;
+        MS_Z_INDEX--;
+    }
     return {
         type: MAPSOURCE.ADD,
         mapSource
@@ -146,8 +152,6 @@ function mapServerToWFS(msXml, conf) {
     return wfs_conf;
 }
 
-var MS_Z_INDEX = 100000;
-
 /** Add a map-source from XML
  *
  */
@@ -162,17 +166,13 @@ export function addFromXml(xml, config) {
         zIndex: xml.getAttribute('z-index'),
         queryable: util.parseBoolean(xml.getAttribute('queryable'), true),
         refresh: null,
-        style: null,
         layers: [],
         params: {}
     }
 
     // handle setting up the zIndex
     if(map_source.zIndex) {
         map_source.zIndex = parseInt(map_source.zIndex);
-    } else {
-        map_source.zIndex = MS_Z_INDEX;
-        MS_Z_INDEX--;
     }
 
     // try to get an opacity,  if it won't parse then default to 1.0
@@ -206,18 +206,6 @@ export function addFromXml(xml, config) {
         }
     }
 
-    // check to see if there are any style definitions
-    let style = util.getTagContents(xml, 'style', false);
-    if(style && style.length > 0) {
-        // convert to JSON
-        try {
-            map_source.style = JSON.parse(style);
-        } catch(err) {
-            console.error('There was an error parsing the style for: ', map_source.name);
-            console.error('Error details', err);
-        }
-    }
-
 
     // mix in the params
     Object.assign(map_source.params, parseParams(xml));
@@ -236,7 +224,10 @@ export function addFromXml(xml, config) {
             selectable: util.parseBoolean(layerXml.getAttribute('selectable')),
             label: layer_title ? layer_title : map_source.label,
             templates: {},
-            legend: null
+            legend: null,
+            style: null,
+            filter: null,
+            transforms: {},
         };
 
         // user defined legend.
@@ -270,6 +261,29 @@ export function addFromXml(xml, config) {
             }
 
             layer.templates[template_name] = template_def;
+
+
+        }
+
+        // catalog the transforms for the layer
+        const transforms = layerXml.getElementsByTagName('transform');
+        for(const transform of transforms) {
+            layer.transforms[transform.getAttribute('attribute')] =
+                transform.getAttribute('function');
+        }
+
+
+
+        // check to see if there are any style definitions
+        let style = util.getTagContents(layerXml, 'style', false);
+        if(style && style.length > 0) {
+            // convert to JSON
+            try {
+                layer.style = JSON.parse(style);
+            } catch(err) {
+                console.error('There was an error parsing the style for: ', map_source.name);
+                console.error('Error details', err);
+            }
         }
 
         map_layers.push(addLayer(map_source.name, layer));

src/gm3/application.jsx

@@ -113,6 +113,56 @@ class Application {
     }
 
     populateMapbook(mapbookXml) {
+
+        // add a layer that listens for changes
+        //  to the query results.  This hs
+        this.store.dispatch(mapSourceActions.add({
+            name: 'results',
+            urls: [],
+            type: 'vector',
+            label: 'Results',
+            opacity: 1.0,
+            queryable: false,
+            refresh: null,
+            layers: [],
+            params: {},
+            // stupid high z-index to ensure results are
+            //  on top of everything else.
+            zIndex: 200000,
+        }));
+        this.store.dispatch(mapSourceActions.addLayer('results', {
+            name: 'results',
+            on: true,
+            style: {
+                'circle-radius': 4,
+                'circle-color': '#ffff00',
+                'circle-stroke-color': '#ffff00',
+                'line-color': '#ffff00',
+                'line-width': 4,
+                'fill-color': '#ffff00',
+                'fill-opacity': 0.25,
+                'line-opacity': 0.25,
+            },
+            filter: []
+        }));
+        // the "hot" layer shows the features as red on the map,
+        //  namely useful for hover-over functionality.
+        this.store.dispatch(mapSourceActions.addLayer('results', {
+            name: 'results-hot',
+            on: true,
+            style: {
+                'circle-radius': 4,
+                'circle-color': '#ff0000',
+                'circle-stroke-color': '#ff0000',
+                'line-color': '#ff0000',
+                'line-width': 4,
+                'fill-color': '#ff0000',
+                'fill-opacity': 0.50,
+                'line-opacity': 0.50,
+            },
+            filter: ['==', 'displayClass', 'hot']
+        }));
+
         // load the map-sources
         let sources = mapbookXml.getElementsByTagName('map-source');
         for(let i = 0, ii = sources.length; i < ii; i++) {
@@ -132,6 +182,26 @@ class Application {
         for(let action of toolbar_actions) {
             this.store.dispatch(action);
         }
+
+        // Add the selection layer,
+        //  this is used to preview the user's selection.
+        /*
+        mapSourceActions.add({
+            type: 'vector',
+            name: 'selection',
+            style: {
+                'circle-radius': 4,
+                'circle-color': '#ffff00',
+                'circle-stroke-color': '#ffff00',
+                'line-color' : '#ffff00',
+                'line-width' : 4,
+                'fill-color' : '#ffff00',
+                'fill-opacity' : 0.25
+            }
+        });
+        */
+
+
     }
 
     loadMapbook(options) {
@@ -323,6 +393,25 @@ class Application {
         this.store.dispatch(mapSourceActions.changeFeatures(ms_name, layer_name, filter, properties));
     }
 
+    /* Shorthand for manipulating result features.
+     */
+    changeResultFeatures(filter, properties) {
+        this.changeFeatures('results/results', filter, properties);
+    }
+
+    /* Short hand for toggling the highlight of features.
+     */
+    highlightFeatures(filter, on) {
+        const props = {displayClass: on ? 'hot' : ''};
+        this.changeResultFeatures(filter, props);
+    }
+
+    /* Clear highlight features
+     */
+    clearHighlight() {
+        this.highlightFeatures({displayClass: 'hot'}, false);
+    }
+
     /** Clears the UI hint.  Used by applications to indicate
      *  that the previous "hint" has been handled.
      */

src/gm3/components/grid.jsx

@@ -63,35 +63,35 @@ class FilterModal extends ModalDialog {
     setFilter() {
         const value = this.state.value;
         const property = this.props.column.property;
-        let filter_def = '';
+
+        const new_filters = [];
 
         if(this.props.column.filter.type === 'list') {
-            filter_def = {
-                type: 'list',
-                value: value
-            }
+            new_filters.push(["in", property].concat(value));
         } else if(this.props.column.filter.type === 'range') {
-            filter_def = {
-                type: 'range'
-            }
             if(this.state.min !== '') {
-                filter_def.min = this.state.min;
+                new_filters.push([">=", property, this.state.min]);
             }
             if(this.state.max !== '') {
-                filter_def.max = this.state.max;
+                new_filters.push(["<=", property, this.state.max]);
             }
         } else {
             // straight equals...
-            filter_def = value;
+            new_filters.push(["==", property, value]);
         }
 
-        const new_filter = {};
-        new_filter[property] = filter_def;
-
-        // add/update this filter.
+        // remove the filters from the property
         this.props.store.dispatch(
-            addFilter(this.props.queryId, new_filter)
+            removeFilter(this.props.queryId, property)
         );
+
+        // add the new filtres.
+        for(const new_filter of new_filters) {
+            // add/update this filter.
+            this.props.store.dispatch(
+                addFilter(this.props.queryId, new_filter)
+            );
+        }
     }
 
     close(status) {