diff --git a/src/config.xml b/src/config.xml
index 6554757..f5001e6 100644
--- a/src/config.xml
+++ b/src/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='UTF-8'?>
-<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="ol3-map" version="1.2.1">
+<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="ol3-map" version="1.2.2a1">
     <details>
         <title>OpenLayers Map</title>
         <email>wirecloud@conwet.com</email>
diff --git a/src/doc/changelog.md b/src/doc/changelog.md
index fde0e37..8c55566 100644
--- a/src/doc/changelog.md
+++ b/src/doc/changelog.md
@@ -1,3 +1,7 @@
+## v1.2.2 (2020-XX-XX)
+
+- Add custom style option with image or text
+
 ## v1.2.1 (2020-03-07)
 
 - Use OSM layer by default. Previous versions of the widget were using Wikimedia
diff --git a/src/js/ol3-map-widget.js b/src/js/ol3-map-widget.js
index f7a3b76..68209a7 100644
--- a/src/js/ol3-map-widget.js
+++ b/src/js/ol3-map-widget.js
@@ -148,7 +148,16 @@
             })
         });
 
+        if (options.style.text != null) {
+            style.setText(options.style.text(ol, options.style));
+        }
+
         return (feature, resolution) => {
+            var data = feature.get('data');
+            if (data.style != null && data.style.context != null) {
+                data.style.context(ol, style, feature, resolution);
+            }
+
             if (this.selected_feature === feature) {
                 return style;
             }
@@ -207,6 +216,8 @@
                 src: icon.src,
                 scale: icon.scale
             }));
+        } else if (vector_style != null && vector_style.image != null) {
+            var image = vector_style.image(ol, vector_style, this.map.getView().getResolution());
         }
         let marker_style = build_basic_style.call(this, {
             image: image,
diff --git a/tests/js/OpenlayersWidgetSpec.js b/tests/js/OpenlayersWidgetSpec.js
index 8833811..c6c8901 100644
--- a/tests/js/OpenlayersWidgetSpec.js
+++ b/tests/js/OpenlayersWidgetSpec.js
@@ -966,6 +966,119 @@
 
             });
 
+            describe("handles the custom styles:", () => {
+                it("Add custom style image", () => {
+                    widget.init();
+                    spyOn(widget.vector_source, 'addFeature');
+                    widget.registerPoI(deepFreeze({
+                        id: '1',
+                        data: {},
+                        location: {
+                            type: 'Point',
+                            coordinates: [0, 0]
+                        },
+                        style: {
+                            image: function (ol, style, resolution) {
+                                return new ol.style.Circle({
+                                    fill: new ol.style.Fill({
+                                        color: '#111111'
+                                    }),
+                                    radius: (1000 / resolution) * style.radius,
+                                    stroke: new ol.style.Stroke({
+                                        color: '#222222',
+                                        width: 1
+                                    })
+                                });
+                            },
+                            radius: 10,
+                        },
+                    }));
+                    expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
+                    expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
+                    let feature = widget.vector_source.addFeature.calls.argsFor(0)[0];
+                    let fstyle = feature.getStyle()(feature);
+                    expect(fstyle.getImage().getFill().getColor()).toEqual('#111111');
+                    expect(fstyle.getImage().getRadius()).toEqual(65.41332273339661);
+                    expect(fstyle.getImage().getStroke().getColor()).toEqual('#222222');
+                    expect(fstyle.getImage().getStroke().getWidth()).toEqual(1);
+                });
+
+                it("Add custom style text", () => {
+                    widget.init();
+                    spyOn(widget.vector_source, 'addFeature');
+                    widget.registerPoI(deepFreeze({
+                        id: '1',
+                        data: {},
+                        location: {
+                            type: 'Point',
+                            coordinates: [0, 0]
+                        },
+                        style: {
+                            text: function (ol, style) {
+                                return new ol.style.Text({
+                                    font: '12px serif',
+                                    text: style.value.toString(),
+                                    fill: new ol.style.Fill({
+                                        color: '#333333'
+                                    })
+                                })
+                            },
+                            value: 'test',
+                        },
+                    }));
+                    expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
+                    expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
+                    let feature = widget.vector_source.addFeature.calls.argsFor(0)[0];
+                    let fstyle = feature.getStyle()(feature);
+                    expect(fstyle.getText().getFont()).toEqual('12px serif');
+                    expect(fstyle.getText().getText()).toEqual('test');
+                    expect(fstyle.getText().getFill().getColor()).toEqual('#333333');
+                });
+
+                it("Add custom style image with maxzoom", () => {
+                    widget.init();
+                    spyOn(widget.vector_source, 'addFeature');
+                    widget.registerPoI(deepFreeze({
+                        id: '1',
+                        data: {},
+                        location: {
+                            type: 'Point',
+                            coordinates: [0, 0]
+                        },
+                        maxzoom: 13,
+                        style: {
+                            image: function (ol, style, resolution) {
+                                return new ol.style.Circle({
+                                    fill: new ol.style.Fill({
+                                        color: '#444444'
+                                    }),
+                                    radius: (1000 / resolution) * style.radius,
+                                    stroke: new ol.style.Stroke({
+                                        color: '#555555',
+                                        width: 2
+                                    })
+                                });
+                            },
+                            radius: 10,
+                            context: function (ol, style, feature, resolution) {
+                                style.getImage().setRadius(20);
+                            },
+                        },
+                    }));
+
+                    expect(widget.vector_source.addFeature).toHaveBeenCalledTimes(1);
+                    expect(widget.vector_source.addFeature).toHaveBeenCalledWith(jasmine.any(ol.Feature));
+                    let feature = widget.vector_source.addFeature.calls.argsFor(0)[0];
+                    let fstyle = feature.getStyle()(feature);
+                    expect(fstyle.getImage().getFill().getColor()).toEqual('#444444');
+                    expect(fstyle.getImage().getRadius()).toEqual(20);
+                    expect(fstyle.getImage().getStroke().getColor()).toEqual('#555555');
+                    expect(fstyle.getImage().getStroke().getWidth()).toEqual(2);
+
+                });
+
+            });
+
             describe("handles the minzoom option:", () => {
                 const test = function (resolution, displayed) {
                     return () => {