Add custom style option with image or text

[fisuda]

Hi @aarranz,

How are you? I'd like to add new feature to this widget. It would be great if you could review this PR.

The PR adds a feature for creating a custom marker style with image or text. This allows you to draw PoIs with a style as circle or text on a map. The feature is enabled when receiving a entity with a style that has the image, context and text attributes as shown:

style: {
    image: function (ol, style, resolution) {
        return new ol.style.Circle({
            fill: new ol.style.Fill({
                color: 'rgba(255, 252, 76, 0.5)'
            }),
            radius: (1000 / resolution) * style.radius,
            stroke: new ol.style.Stroke({
                color: 'rgba(255, 252, 76, 1)',
                width: 1
            })
        });
    },
    radius: 1000,
    context: function (ol, style, feature, resolution) {
        var radius = feature.get('data').style.radius;
        radius = (1000 / resolution) * radius;
        style.getImage().setRadius(radius);
    },
    text: function (ol, style) {
        return new ol.style.Text({
            font: '12px serif',
            text: style.value,
            fill: new ol.style.Fill({
                color: '#00008B'
            })
        });
    },
    value: 'test'
}

• The image attribute is specified a function that returns an ol.style.Circle object.
• The context attribute is specified a function that is called when zooming.
• The text attribute is specified a function that returns an ol.style.Text object.

Use Case

For instance, this feature allows you to create a bubble map as shown:

How to setup

1. You do wiring the Json injector, the ol3 bubble map and this OpenLayers Map widget as shown:

• https://github.com/lets-fiware/json-injector
• https://github.com/lets-fiware/ol3-bubble-map-operator

2. You send a following json data with the Json injector. A circle centered on Madrid will be drawn on a map.

[
  {
    "id": "place001",
    "type": "PointOfInterest",
    "name": "Madrid",
    "location": {
      "type": "Point",
      "coordinates": [-3.703,40.417]
    },
    "radius": 1000
  }
]

Live Demo

• https://mashup.lab.fisuda.jp/letsfiware/covid19-world-map#view=workspace&tab=%E3%82%BF%E3%83%96

Thanks!

[aarranz]

Hi @fisuda,

Sorry, I was a bit busy those days. Definitely, this is a great addition and I'll try to work on this as soon as possible.

Best regards,
Álvaro

[fisuda]

Hi @aarranz,
It's no problem. I'm not in a hurry.
Thank you.