CODEWITHSUNDEEP
imagevectoriconsopenlayerslayer
user1883264
user1883264

Reputation: 31

Icon not displayed on OpenLayers when attaching a style to a feature on a vector layer

I'm trying to show an icon on the center of a circle. Here is my code :

jsFiddle : http://jsfiddle.net/61dkv8tr/2/

    (function(){

    var base64img = "data:image/gif;base64,R0lGODlhPQBEAPeoAJ[...]==";

    var extent = [0, 0, 400, 400]; 

    var sourceV = new ol.source.Vector({ wrapX: false });         

    var map = new ol.Map({
        renderer: 'canvas',
        target: 'divMap',
        layers: [        
          new ol.layer.Vector({
            source: sourceV
          })
        ],
        restrictedExtent: extent,
        view: new ol.View({        
          center: ol.extent.getCenter(extent),
          extent: extent,   //world limit drag map       
          resolution : 1
        })
      });   

    var radius = 50;
    var x = 200;
    var y = 200;

    var circleGeom = new ol.geom.Circle([x, y], radius);   
    var feature = new ol.Feature(circleGeom);
    feature.setStyle(new ol.style.Style ({
    stroke: new ol.style.Stroke({
      color: 'black',
      width: 1     
    }),
    image: new ol.style.Icon({
      src: base64img,
      color: '#4271AE',
      crossOrigin: 'anonymous',
    })
    }));  

    sourceV.addFeature(feature);

})();

The render is just the stroke of the circle. Do I miss something ? The icon is a small red bus.

PS : I also tried with a relative URL, an absolute URL, a canvas...

Thanks !

Upvotes: 1

Views: 1155

Answers (1)

user1883264
user1883264

Reputation: 31

OK I found the solution. style.Icon only works if its property 'geometry' is of type geom.Point (or if the feature owns a point as geometry type).

To get around with any type of geometry I use the method getExtent() to calculate the center of the geometry and I create a new one of type Point.

Upvotes: 1

Related Questions