OpenLayers3图标合成图像

Question

I have a vector layer with image icons representing users. I would like to dynamically style the icons based on the user status (eg available, busy) without having to use two different icon images.

I would like to use one of the following two solutions:

1. programmatically change the icon image color (eg green user icon for available, red for unavailable). Again --> having multiple images for the different states is not an option. I need one image as the icon src with programmatically manipulated color.

2. (prefferred solution). Use the icon image and style it with extra css (eg image background???)

The only workaround that I currently have is to add 2 markers at the same location. One for the user status icon and one for the actual user.

Answer 1

I would like to suggest another option: work with SVG icons. It is possible to modify parts (lines, symbols, ect) of a SVG image with CSS .

That way, you can construct your icon as SVG, and apply classes depending on the user status.

Your SVG can look something like this (pseudo code):

<svg class="user-icon available" ... >
  <polyline class="your-icon" .../>
  <circle class="status" .../>
</svg>

You can target it with CSS like this, based on user status:

user-icon.available {
  fill: green;
}

.user-icon.busy {
  fill: red;
}