Dynamic styling for colors

Created on 21 March 2016, almost 9 years ago
Updated 14 March 2023, almost 2 years ago

Hi,

I would like to use dynamic styling in OL3 - for colors. I have field with RGBA color - i am using this field in openlayer view, but if i put ${field_style} to Fill color configuration in edit of style, it does not work for me.

thank you for help

regards
Eduard

πŸ› Bug report
Status

Fixed

Version

3.0

Component

OL Styles

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΈπŸ‡°Slovakia sano

    This is still a problem. Style values delivered by variables from Views are still not honored.

    If I knew what file in this module makes the api call to the OL library when rendering a map, I would try finding the culprit.

    By the way, I tried also the recommendation in #4, but see no change using this code:

    var map = data.map;
    
        var styleCache = {};
        var styleFunction = function(feature, resolution) {
    
          var name = feature.get('php_1');
          var radius = 5;
    
          var style = styleCache[radius];
          if (!style) {
            style = [new ol.style.Style({
              image: new ol.style.Circle({
                radius: radius,
                fill: new ol.style.Fill({
                  color: 'rgba(255, 153, 0, 0.4)'
                }),
                stroke: new ol.style.Stroke({
                  color: name,
                  width: 10
                })
              })
            })];
            styleCache[radius] = style;
          }
          return style;
        };
    
        map.getLayers().forEach(function(layer){
           var source = layer.getSource();
           if (source.mn == 'openlayers_geofield_source_vector') {
               layer.setStyle(styleFunction);
           }
        });
  • πŸ‡ΈπŸ‡°Slovakia sano

    I fixed this issue by modifying the Circle.js taking inspiration from the Icon.js, where token replacements work. I would create a patch, but my attempt to clone the repository failed.

    I am not a JS programmer, so there likely are bugs in the attached file.

  • Status changed to Needs review almost 2 years ago
  • πŸ‡¬πŸ‡§United Kingdom ken-g

    Thank you for your further comments in #13. Taking each of your points:

    I believe that token replacement already works for the GEOMETRY * styles in the Circle.js and RegularShape.js plugins. The key line of code in both plugins is:

    var geometry_style = data.opt[geometry] || data.opt['default'];.

    This will use the specific GEOMETRY if it has been enabled, or the default otherwise. Either way, the token replacements will work on the resulting geometry style. I tested this using quite a GEOMETRYCOLLECTION - it worked well.

    Regarding the issue of HTML embellishments carried over from Views, now that you have explained how the field configuration should be set to prevent HTML wrappers being passed through to Openlayers, I have removed the redundant code from the OL plugins. I have left a comment in each plugin stating our assumption.

    Finally, if you are now happy with all of this, I will probably issue a new version of the Openlayers module (7.x-3.3) in the next few days...

  • πŸ‡ΈπŸ‡°Slovakia sano

    I tested the default section stroke color and width using the most recent dev version and all works as expected. Thank you for your work.

  • Status changed to Fixed almost 2 years ago
  • πŸ‡¬πŸ‡§United Kingdom ken-g

    Fixed in 7.x-3.3 release.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024