Is there a way to apply a CSS class to an Openlayers 5.3 feature?

Question

We have over 2000 map points to draw in an openlayers (5.3.2) map. Performance is a big issue as we are:

creating a vector layer,
adding a feature per point (for location of tooltip),
adding an overlay per point (for material icon with css class "blink_me" applied depending on a flag per point),
adding a single overlay on mouse hover to show a tooltip dynamically filled in with whatever data is specific to the feature that's detected on that hover location.

To reduce performance issues, I've already moved the style of the feature out to the vector layer but I also want to remove the overlays for each point (not the tooltip one) and move the map icon to the feature. Only problem is that there seems to be no way to apply a css class to a feature object even though it can hold an HTMLImageElement.

It looks like you used to be able to set className on imageDiv back in openlayers 2 (OpenLayers: Adding a (css-)class to a marker?) so something like that would be perfect.

      // map pin that used to be set on overlay
      const divelement = document.createElement('i');
      divelement.classList.add('material-icons', 'text-outline');
      if (paramFlagIsTrue) { 
        // only add the blinking class if param of the
        // function where this code sits is true.
        divelement.classList.add('blink_me');
      }  
      divelement.innerHTML = 'place';
      divelement.style.fontSize = '32px';
      divelement.style.width = '32px';
      divelement.style.height = '32px';
      divelement.style.color = paramColor; 

      // feature containing location, styles etc
      const pointFeature = new Feature({
        name: 'myFeature',
        geometry: point,
        index: paramIndex
      });

// Feature style without that "blink_me" class added and using an image, rather than a material icon font letter.
// I'd look at moving the feature style back to the actual feature away from the vector layer like so if I can set a class on each feature style according to a flag.
      pointFeature.setStyle(
        new Style({
          image: new Icon(/** @type {module:ol/style/Icon~Options} */{
            anchor: [0.5, 0.96],
            color: element[3],
            crossOrigin: 'anonymous',
            src: 'assets/outline_place_black_18dp.png'
          })
        })
      );
      this.multiPointSource.addFeature(pointFeature);
      ...

Since OpenLayers 3 features are rendered to canvas and javascript drawImage doesn't use the css style of the image. If you wanted a blinking effect you would need something similar to https://openlayers.org/en/latest/examples/feature-animation.html — Mike, Jul 02 '19 at 10:44
We have in the past tried using that example but it performed really badly with less map pins so we switched over to using the overlays. — Corné, Jul 03 '19 at 03:46
Is there a better way to do icons without using features and instead using something that can use CSS classes or will you then lose the performance benefit of Canvas? — TheLearningDev, May 13 '20 at 07:03

Is there a way to apply a CSS class to an Openlayers 5.3 feature?

0 Answers0