[GIS] OpenLayers: png as external graphic marker

markersopenlayers-2png

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",
                                    }       
                            })
                          ]
                       })
                });

Best Answer

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

Related Question