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.


In the network tab is reported

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

Property unknow "user-select". Declaration omitted.


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



(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


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

  • 1
    What's the dimensions (width/height) of the image? Commented Oct 25, 2015 at 18:23
  • Uff... was 45x55px, size in the style was 50x50... Oh, I'm so sorry for the stupid question. I tried reducing the dimensions of the image and the size, now all work with dimensions and size 15x19px. Thank you so much!
    – MLuca
    Commented Oct 25, 2015 at 19:00

3 Answers 3


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.

  • Thank you for the answer, but I think it's not that the problem. The style is content in a .js file named towers_style.js, located in a folder called styles; the folder is located in the same folder as the index.html file. I tried to put the png image everywhere and, obviously, tried to change the path too, but without results. Maybe the problem is related to the structure made by the plugin, but i search in other files if there was relation to the default contents of the style and I didn't find anything.
    – MLuca
    Commented Oct 25, 2015 at 13:57
  • I would still recommend checking the request created to verify that the browser loads the image. Once that is confirmed, any other issue could be easier to find. Also, please describe how "it doesn't work". Do the features disappear? Do they keep the old style? Commented Oct 25, 2015 at 16:05
  • Sorry, I edit my question with what I read in the network tab. With "it doesn't work" i meant that the custom icon isn't showed.
    – MLuca
    Commented Oct 25, 2015 at 17:33

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.

  • It's a good news, but cause that plugin wasn't suitable to what I had to do I learned to do what I needed writing ol code. Thank you anyway!
    – MLuca
    Commented Dec 4, 2015 at 21:41

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) {

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

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

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
          new ol.control.Control({

jsfiddle working code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.