I'm using the following code which defines a default style, that is used to style point (and other) features in OpenLayers 3. When I use the var image to style my features everything is Ok, and the points are rendered on my map. When I try to use var icon with the same dataset instead, nothing is displayed. In my browsers devtools I see, that the icon is loaded?

Any ideas? where the mistake lies?

// -------- Defining default style settings ----------
 var fill = new ol.style.Fill({
   color: 'rgba(255,255,255,0.4)'
 var stroke = new ol.style.Stroke({
   color: '#3399CC',
   width: 1.25

 var image = new ol.style.Circle({
       fill: fill,
       stroke: stroke,
       radius: 5

 var icon = new ol.style.Icon({
          anchor: [0.5, 0.5],
          size: [52, 52],
          offset: [52, 0],
          opacity: 0.5,
          scale: 1.0,
          src: "./img/mmOrange.png"

 var style = new ol.style.Style({
     image: image,  // this works, but when I use image: icon, nothing is displayed
     fill: fill,
     stroke: stroke

I think you can try to make sure the src of image is right: just try ol.style.Icon({ src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' })); to see if something displays.

| improve this answer | |
  • Hi, I've tried it also with the new source. I can see in Firefox-dev-tools, that the icon is loaded, but it does not show up on the map? I reduced my code to the absolute minimum, but I don't get icons displayed. When using the image style everything works fine. I've tested in Firefox, Chrome and Safari. ??? – geom Jan 25 '17 at 18:13
  • Have you tried ol.style.Style without parameters 'fill/stroke' ?: var style = new ol.style.Style({ image: new ol.style.Icon ({ src: 'openlayers.org/en/v3.20.1/examples/data/icon.png' }); }); – cheesewind Jan 26 '17 at 9:27
  • Yes I did, see the code below. – geom Jan 27 '17 at 19:17
  • In your code below, why you add offset: [52, 0] ? while the size of icon.png is only 32x48 pixel. Using just 'src' as parameter. – cheesewind Jan 30 '17 at 10:32
  • Oh, You're right! I should have read the documentation better to understand the consequences of anchor, size and offset. After all it works. thanks a lot! – geom Jan 30 '17 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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