Custom icon with QGIS and openlayers

Question

I've made a map with QGIS and I've tried to convert it to openlayers with the plugin qgis2web. Originally, the point layer has a custom icon made by me and it's an svg file, but when I export the map, it hasn't that icon and it seems to disappear. I tried to export the map with the point layer with default icon and it's all ok so, reading the ol3 documentation I tried to change the file style in this way:

original code

var style = [ new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5.0, 
        stroke: new ol.style.Stroke({
            color: 'rgba(0,0,0,255)', 
            lineDash: null, 
            width: 1
        }), 
        fill: new ol.style.Fill({
            color: "rgba(0,0,0,1.0)"
        })
    })
})];

modified code

var style = [ new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        size: [50, 50],
        offset: [0, 0],
        opacity: 1,
        src: 'x.png'
    })
})];

It doesn't work. I'm not a ol expert, is it possible to do something like I want to do? Am I doing something wrong? Previously I did the same thing with qgis2leaf and all was right adding a columns called icon_exp in the attribute table in qgis, but I need some rotated maps, so I need of ol.

EDIT

In the network tab is reported

Property unknow "-moz-box-shadow". Declaration omitted.

Property unknow "user-select". Declaration omitted.

file:///D:/map/tower.png

IndexSizeError: Index or size is negative or greater than the allowed amount

file:///D:/map/resources/ol.css

file:///D:/map/resources/ol3-layerswitcher.css

(declaration or statement, I'm translating from italian and I don't which is the right translation)

"-moz-box-shadow" is related to index.html

.ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);

"user-select" is related to ol.css

     .ol-unselectable{-webkit-touch-callout:none;
                        -webkit-user-select:none;
                        -khtml-user-select:none;
                        -moz-user-select:none;
                        -ms-user-select:none;
                         user-select:none;
                        -webkit-tap-highlight-color:transparent
       }

Maybe means something, I've this problem in firefox and internet explorer, in chrome the custom icon is showed.

Answer 1

You wish to use a remote image as an Icon, instead of the previous circle. There is not anything that appears to be wrong in your new style.

The src option should be a relative path to the website URL, or an absolute URL. You are using the relative version, so if your map is displayed on http://example.com/ol3/index.html the image should be located at http://example.com/ol3/x.png.

I would recommend using your browsers developer tools, the network tab, to check if the image is loaded successfully.

Also, the area of the image declared by offset and size must be within the dimensions of the original image. That is what's causing your IndexSizeError.

Answer 2

Version 0.36.0 of qgis2web now exports your SVG point markers to both OL3 and Leaflet maps. Do upgrade and try it. One thing to watch out for: some SVGs seem to work in Leaflet but not in OL3. I don't know why. This is documented in the qgis2web readme and help tab.

Answer 3

For openlayers want to use font awesome icons then

var button = document.createElement('button');
button.innerHTML = '<i class="fa fa-home"></i>';

var handleRotateNorth = function(e) {
    map.getView().setRotation(0);
};

button.addEventListener('click', handleRotateNorth, false);

var element = document.createElement('div');
element.className = 'rotate-north ol-unselectable ol-control';
element.appendChild(button);

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
    rotation: 0
  }),
  controls:ol.control.defaults().extend([
          new ol.control.Control({
            element:element
          })
        ])
});

jsfiddle working code