[OpenLayers-Users] Icon in my map using his natural size

Arnd Wippermann arnd.wippermann at web.de
Tue Mar 25 14:03:27 PDT 2014


You can try to get width an height with new Image()

    var styleMapIcon;

    var context = {
        getGraphic : function (ft){
            var graphicUrl = "./" + ft.attributes["icon"];
            return graphicUrl;
        },
        getGraphicW : function (ft){
            var img = new Image();
            img.src = "./" + ft.attributes["icon"];
            return img.width;
        },
        getGraphicH : function (ft){
            var img = new Image();
            img.src = "./" + ft.attributes["icon"];
            return img.height;
        }
    };
    var templateDefault = {
        fillOpacity: 0.5,
        pointerEvents: "visiblePainted",
        externalGraphic:"${getGraphic}",
        graphicWidth:"${getGraphicW}",
        graphicHeight:"${getGraphicH}"
    };

    var templateSelect = {
        fillOpacity: 1,
        pointRadius: 60,
        pointerEvents: "visiblePainted",
        externalGraphic:"${getGraphic}",
        graphicWidth:null,
        graphicHeight:null
    };
    styleMapIcon = new OpenLayers.StyleMap( {
            "default" : new OpenLayers.Style(templateDefault,
{context:context}),
            "select"  : new OpenLayers.Style(templateSelect,
{context:context})
    });
    return(styleMapIcon);
 
Arnd

-----Ursprüngliche Nachricht-----
Von: openlayers-users-bounces at lists.osgeo.org
[mailto:openlayers-users-bounces at lists.osgeo.org] Im Auftrag von pvrsouza
Gesendet: Dienstag, 25. März 2014 11:33
An: openlayers-users at lists.osgeo.org
Betreff: [OpenLayers-Users] Icon in my map using his natural size

Hello everybody,

It's my first time here and I didn't find any topic like this one here. Then
here we go:

I'd like to show the Icon in my map using his natural size (width and height
original). How can i do it?

Now i have this code:

var contextResource =
{
	getWidthIcon : function(feature){
		//i'm trying to get the current width
    },
    getHeightIcon : function(feature){
		//i'm trying to get the current height
		},
	
	getMarker : function(feature) 
     {
		// getting the icon with a rest reponse
		var lstIcons = feature.attributes.satellites;
		var sUrlIcon =
"${sBaseURL}/AvlCore/rest/icon/resource/composed/"+
feature.attributes.orientation;
		for ( var n = 0; n < lstIcons.length; n++) {
			sUrlIcon = sUrlIcon + "/" + lstIcons[n];
		}
		return sUrlIcon;
	},
	getBackgroundMarker : function(feature)
	{
		///blah blah blah
	    }
				
		return urlBackground;
	},
	getVisibility : function(feature)
	{
		///blah blah blah
	},
	getLabel : function(feature)
	{
		///blah blah blah
	}
	
};

//This is my style builder
var resourceStyle = new OpenLayers.Style({
	externalGraphic : '<% out.print("${getMarker}"); %>',
	backgroundGraphic : '<% out.print("${getBackgroundMarker}"); %>',
	graphicOpacity: 1,
	graphicWidth: '<% out.print("${getWidthIcon}"); %>',
	graphicHeight:'<% out.print("${getHeightIcon}"); %>',
	label: '<% out.print("${getLabel}"); %>',
	fontFamily: "Arial",
	fontSize: '11px',
	labelYOffset: -30,
	labelOutlineColor: "white",
	labelOutlineWidth: 3,
	display: '<% out.print("${getVisibility}"); %>'
}, { context: contextResource });

If I put a fixed graphicWidth and graphicHeight works normally. I want to
display icons in different sizes. Is it possible using this strategy?

Thanks



--
View this message in context:
http://osgeo-org.1560.x6.nabble.com/Icon-in-my-map-using-his-natural-size-tp
5130893.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
_______________________________________________
Users mailing list
Users at lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users



More information about the Users mailing list