I would like to style my point features. For some markers I use the convenient OpenLayers.StyleMap options, for few of them I would like to use an external png graphic (the camouflage circle). I use a linux system and the firefox browser. The code runs pretty if I leave out the external graphic. If I add the graphic the feature disappears. Is there something specific I have to consider? Any help is welcome.

enter image description here

This graphic has the size of 14.2 KiB and was edited with the Vector Graphics Editor. My code so far is:

var styleMap = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                graphicName: "cross",
                pointRadius: "5", // sized according to type attribute
                fillColor: '#FF8000',
                fillOpacity: "50 ",  //o.8 original
                strokeOpacity: "60", //1 original
                strokeWidth: "1",
                { // apply a rule in order to display a name next to the station point in legend
                rules : [
                        new OpenLayers.Rule({
                        name: "Stations", // this is what is displayed on legend panel
                        elseFilter: true,
                        symbolizer: {
                            graphicName: "cross",
                            pointRadius: "5",
                            fillColor: "#FF8000",
                            strokeOpacity: "60",
                            strokeWidth: "1",
                        new OpenLayers.Rule({
                            name: "Climate, Soil & Water Quality",
                            filter: new OpenLayers.Filter.Comparison({
                                        type: OpenLayers.Filter.Comparison.LIKE,
                                        property: "name",                                                            
                                        value: "Zarnekow",
                                    symbolizer: {                
                                                externalGraphic: "../img/point_camouflage1.png",// graphicName: "circle",         
                                                graphicWidth: 32,
                                                graphicHeight: 32,
                                                graphicOpacity:1,//pointRadius: "5",
                                                //fillColor: "#F27807",
                                                //strokeOpacity: "60",
                                                //strokeWidth: "1",
  • are you sure that the directory ../img is available from your browser?
    – atlefren
    Commented Jan 21, 2015 at 14:20

2 Answers 2


have you tried to move the graphic to the same folder or a subfolder?

or use an absolute adress http://jsfiddle.net/ucrtthya/

and don't forget to load the website with the http protocol, like http://localhost/mymap.html otherwise it could perhaps be a problem if you open the webpage with "file///" and try to load a image with the "http://"-protocol

  • I am 100% sure the folder path is ok. I use a Apache server, so I also use the http:// protocol. I also tried a svg. Nothing.
    – script80
    Commented Jan 21, 2015 at 13:27
  • It works just with you absolute adress "i.sstatic.net/ynyjz.png". But why not relative?
    – script80
    Commented Jan 21, 2015 at 15:01
  • perhaps some read permissions issues? have you tried to move the png into the same folder as your js-file and use externalGraphic: "point_camouflage1.png" ? or use the local adress localhost/yourfolder/img/point_camouflage1.png". I have sometimes encountered problems in the past when the image was in folders "above" the app ( ../ )
    – Thomas B
    Commented Jan 21, 2015 at 15:32
  • I tried to move the png to the same folder as my js. Nothing. But I can call it from the local adress into the browser as you mentioned. The "img" folder is one folder below the js folder. I am pretty sure that I have reading permissions for that specific folder.
    – script80
    Commented Jan 22, 2015 at 8:13
  • NOW! I understand what you meant.I don't now why I does not work the way I did before, but now it works apparently with the local address. externalGraphic: "localhost/Stations/Europe/img/point_camouflage1.png". Thank you Thomas!
    – script80
    Commented Jan 22, 2015 at 8:39

in your Javascript there are two brackets missing at the end. perhaps that's the problem. see http://jsfiddle.net/po6m5aok/2/

  • That's true. But it still does not work as I wish.I corrected the line.
    – script80
    Commented Jan 21, 2015 at 14:47

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.