Search code examples
javascriptopenlayersopenlayers-5

Weird issue with icon in OpenLayers (svg icon doesn't display, when similar icons do)

I've got a weird issue with following code 

<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet"> 
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
      view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom:11}),
      layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
      target:'map'
  });

  var tree_coordinates = [[16.9071388, 52.4901917],[16.964607, 52.483672],[16.924611, 52.422056],[16.9207344, 52.4116696],[16.931853, 52.407052],
  [16.9175298, 52.4045977],[16.9001992, 52.4026734],[16.9022317, 52.4062569],[17.021935, 52.400591],[16.82640,52.46133],[17.0587858,52.4159424],[17.022485,52.415796],
  [17.020697,52.399145],[16.916187,52.390276],[17.029799,52.395083],[16.828552,52.464013]];
  var forest_coordinates = [[16.901194,52.488556],[16.847889,52.460917],[16.841861,52.448778],[16.891983,52.452014],[16.878281,52.432017],
  [16.894575,52.425061],[16.922955,52.414592],[16.923432,52.413709],[16.888663,52.4091499],[16.8480334,52.3875927],[16.9269882,52.3785911],[16.986917,52.305361]];
  var stone_coordinates = [[16.897222,52.488056],[16.942774,52.463806],[16.881964,52.419917]];

  var tree = [];
  var forest = [];
  var stone = [];

  for(i=0;i<=15;i++){
    tree.push(this["tree"+i] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(tree_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
    }));
  }

  for(i=0;i<=11;i++){
    forest.push(this["forest"+i] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(forest_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
    }));
  }

  for(i=0;i<=2;i++){
    stone.push(this["stone"+i] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(stone_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
    }));
  }

  var tree_markers = new ol.source.Vector({
      features: tree,
  });


  var forest_markers = new ol.source.Vector({
      features: forest,
  });

  var stone_markers = new ol.source.Vector({
      features: stone,
  });


  var treeVectorLayer = new ol.layer.Vector({
      source: tree_markers,
  });


  var forestVectorLayer = new ol.layer.Vector({
      source: forest_markers,
  });

  var stoneVectorLayer = new ol.layer.Vector({
      source: stone_markers,
  });


  map.addLayer(treeVectorLayer);
  map.addLayer(forestVectorLayer);
  map.addLayer(stoneVectorLayer);

  treeVectorLayer.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
          src:'https://image.flaticon.com/icons/svg/46/46564.svg',
          scale:0.08,
      }))
  }))


  forestVectorLayer.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
          src:'https://image.flaticon.com/icons/svg/1081/1081231.svg',
          scale:0.08,
      }))
  }))

  stoneVectorLayer.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
          src:'https://image.flaticon.com/icons/svg/826/826968.svg',
          scale:0.08,
      }))
  }))



</script>
</body>
</html>

I don't understand why "setStyle" doesn't display an image icon on "stoneVectorLayer". Everything is the same as in two other vector layers, which work. Markers are there, because I can see them when I remove the "setStyle". "setStyle" somehow works, because it makes those markers disappear or at least invisible, but I don't get why it doesn't display an icon instead.

I've done some testing and it looks like an issue with the image. Some images work when I put it there, but some don't. Image used in this code doesn't work on other layers either, so the question is why OpenLayers doesn't render some images? .png copies of the same icons don't work either.

The icon is also displayed properly in the Edge browser, but not in Firefox.

Solution

  • The issue is with the icon itself (https://image.flaticon.com/icons/svg/826/826968.svg). It doesn't contain a height or a width (which all the others do).

    proof of concept (just the stone icons)

    proof of concept (original, w/ working stone icons)

    changed:

    <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">

    To (added width="590.074px" height="590.073px"):

    <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="590.074px" height="590.073px"  viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">

    screenshot of resulting map

    code snippet:

    var stone_coordinates = [
  [16.897222, 52.488056],
  [16.942774, 52.463806],
  [16.881964, 52.419917]
];

var map = new ol.Map({
  view: new ol.View({
    center: ol.proj.transform(stone_coordinates[1], 'EPSG:4326', 'EPSG:3857'),
    zoom: 11
  }),
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
  })],
  target: 'map'
});

var stone = [];

for (i = 0; i < stone_coordinates.length; i++) {
  stone.push(new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(stone_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
  }));
}

var stone_markers = new ol.source.Vector({
  features: stone,
});

var stoneVectorLayer = new ol.layer.Vector({
  source: stone_markers,
});
map.addLayer(stoneVectorLayer);

stoneVectorLayer.setStyle(new ol.style.Style({
  image: new ol.style.Icon(({
    // icon must be served over https to work on stackoverflow code snippet
    src: 'https://www.geocodezip.net/mapIcons/stone.svg',
    scale: 0.08,
  }))
}))
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<div id="map" class="map"></div>