give each result's extent a different color

[jeanpommier]

Currently, all the results' extents are displayed with the same color. Giving different colors helps identifying what extent goes with which data. (patch and screenshot attached) Some style is added in the Templates, to visually match the extent boxes. TODO : in my patch, the color palette is hard coded, and too short if we choose to display 50 results at a time. Would be better to generate (compute) the palette.

[fxp]

Thanks for the patch Jean.

Here is a slightly modified version for comment with the following changes:

• Default highlighter is unchanged (ie. default OL style)
• New properties:
  • Add featurecolor property to set a single color.
  • Add featurecolorCSS property to set custom CSS rules added to Template.
• New rules:
  • if no colormap and no featurecolor defined: use default OL style.
  • if featurecolor property defined: use default OL style with this color for stroke and fill.
  • if layer_style (and layer_style_hover) property defined: use it, if not use default OL style.
  • always create a colormap (which may contain only one color - default)
  • loop on color map. If number of records > color map size, loop on colormap from start.
  • do not display CSS rule if only one color set.
• Add a random colormap generator

  colormap: GeoNetwork.Util.generateColorMap(5)
  

If that sounds good to you, I could add it to trunk.

Some example:

     var metadataResultsView = new GeoNetwork.MetadataResultsView({
            catalogue: catalogue,  
            // Use a custom single color for bounding box
//             , featurecolor: '#FFFFFF'
            // Use a random color map with 2 colors 
//            , colormap: GeoNetwork.Util.generateColorMap(5)
            // Use a default color map with 10 colors
//             , colormap: GeoNetwork.Util.defaultColorMap
            // Use a custom CSS rules
//            , featurecolorCSS: "border-width: 5px;border-style: solid; border-color: ${featurecolor}"
            // Use a custom style
//            , layer_style:  new OpenLayers.Style({ 
//                          strokeOpacity: 1,
//                          strokeWidth: 4,
//                          strokeColor: "${featurecolor}",
//                          fillColor: "${featurecolor}",
//                          fillOpacity: 0.2
//                      })
//            , layer_style_hover:  new OpenLayers.Style({ 
//                strokeOpacity: 1,
//                strokeWidth: 10,
//                strokeColor: "${featurecolor}",
//                fillColor: "${featurecolor}",
//                fillOpacity: 0
//            })
         });
         

[jeanpommier]

Hi François,

This sounds great ! More flexible and robust than my proposal. Thanks ! I'm OK with it (maybe we should, later, make it customizable via one of the config files ?)

[fxp]

Committed revision 8979.

And added to the default app some settings for basic configuration:

GeoNetwork.Settings.results = {
        // Parameters to set bounding box highlighter colors
        // Use a custom single color for bounding box
        featurecolor: 'orange',
        // Use a random color map with 2 colors 
        //colormap: GeoNetwork.Util.generateColorMap(2),
        // Use a default color map with 10 colors
        //colormap: GeoNetwork.Util.defaultColorMap,
        // Use a custom color map
        //colormap: ['red', 'green', 'blue'],
        colormap: undefined,
        // Use a custom CSS rules
        //featurecolorCSS: "border-width: 5px;border-style: solid; border-color: ${featurecolor}"
        featurecolorCSS: undefined
};

Thanks for the idea & the patch Jean!