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 Jan 21 '15 at 14:20

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 Jan 21 '15 at 13:27
  • It works just with you absolute adress "i.stack.imgur.com/ynyjz.png". But why not relative? – script80 Jan 21 '15 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 Jan 21 '15 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 Jan 22 '15 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 Jan 22 '15 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 Jan 21 '15 at 14:47

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.