<div dir="ltr"><div>Arnd,</div><div><br></div><div>Thanks for your reply..</div><div><br></div><div>I tried something like that, but in this case the img object just has its width attribute after a load function. See the comment, plesae.</div>
<div><br></div><div> <span class="" style="white-space:pre"> </span> var context = {</div><div><span class="" style="white-space:pre"> </span> getGraphic : function (ft){</div><div><span class="" style="white-space:pre"> </span> var graphicUrl = "./" + ft.attributes["icon"];</div>
<div><span class="" style="white-space:pre"> </span> return graphicUrl;</div><div><span class="" style="white-space:pre"> </span> },</div><div><span class="" style="white-space:pre"> </span> getGraphicW : function (ft){</div>
<div><span class="" style="white-space:pre"> </span> <span class="" style="white-space:pre"> </span>var toReturn;</div><div><span class="" style="white-space:pre"> </span> var img = new Image();</div><div>
<span class="" style="white-space:pre"> </span> img.onload = function() {</div><div><span class="" style="white-space:pre"> </span> <span class="" style="white-space:pre"> </span>toReturn = this.width; // At this point I was unable to pass the method's return to getGraphicW function.</div>
<div><span class="" style="white-space:pre"> </span> <span class="" style="white-space:pre"> </span>};</div><div><span class="" style="white-space:pre"> </span> <span class="" style="white-space:pre"> </span>img.src = "./" + ft.attributes["icon"];</div>
<div><br></div><div><span class="" style="white-space:pre"> </span> return toReturn; //at this point toReturn is empty. :-(</div><div><span class="" style="white-space:pre"> </span> },</div><div><span class="" style="white-space:pre"> </span> getGraphicH : function (ft){</div>
<div><span class="" style="white-space:pre"> </span> var img = new Image();</div><div><span class="" style="white-space:pre"> </span> img.src = "./" + ft.attributes["icon"];</div>
<div><span class="" style="white-space:pre"> </span> return img.height;</div><div><span class="" style="white-space:pre"> </span> }</div><div><span class="" style="white-space:pre"> </span> };</div>
<div><br></div><div><br></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">2014-03-25 18:05 GMT-03:00 Arnd Wippermann [via OSGeo.org] <span dir="ltr"><<a href="/user/SendEmail.jtp?type=node&node=5131083&i=0" target="_top" rel="nofollow" link="external">[hidden email]</a>></span>:<br>
<blockquote style='border-left:2px solid #CCCCCC;padding:0 1em' class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div class="HOEnZb"><div class="h5">
You can try to get width an height with new Image()
<br><br> var styleMapIcon;
<br><br> var context = {
<br> getGraphic : function (ft){
<br> var graphicUrl = "./" + ft.attributes["icon"];
<br> return graphicUrl;
<br> },
<br> getGraphicW : function (ft){
<br> var img = new Image();
<br> img.src = "./" + ft.attributes["icon"];
<br> return img.width;
<br> },
<br> getGraphicH : function (ft){
<br> var img = new Image();
<br> img.src = "./" + ft.attributes["icon"];
<br> return img.height;
<br> }
<br> };
<br> var templateDefault = {
<br> fillOpacity: 0.5,
<br> pointerEvents: "visiblePainted",
<br> externalGraphic:"${getGraphic}",
<br> graphicWidth:"${getGraphicW}",
<br> graphicHeight:"${getGraphicH}"
<br> };
<br><br> var templateSelect = {
<br> fillOpacity: 1,
<br> pointRadius: 60,
<br> pointerEvents: "visiblePainted",
<br> externalGraphic:"${getGraphic}",
<br> graphicWidth:null,
<br> graphicHeight:null
<br> };
<br> styleMapIcon = new OpenLayers.StyleMap( {
<br> "default" : new OpenLayers.Style(templateDefault,
<br>{context:context}),
<br> "select" : new OpenLayers.Style(templateSelect,
<br>{context:context})
<br> });
<br> return(styleMapIcon);
<br>
<br>Arnd
<br><br>-----Ursprüngliche Nachricht-----
<br></div></div>Von: <a href="http://user/SendEmail.jtp?type=node&node=5131079&i=0" rel="nofollow" link="external" target="_blank">[hidden email]</a>
<br>[mailto:<a href="http://user/SendEmail.jtp?type=node&node=5131079&i=1" rel="nofollow" link="external" target="_blank">[hidden email]</a>] Im Auftrag von pvrsouza
<br><div class="">Gesendet: Dienstag, 25. März 2014 11:33
<br></div>An: <a href="http://user/SendEmail.jtp?type=node&node=5131079&i=2" rel="nofollow" link="external" target="_blank">[hidden email]</a>
<br>Betreff: [OpenLayers-Users] Icon in my map using his natural size
<br><div><div class="h5"><br>Hello everybody,
<br><br>It's my first time here and I didn't find any topic like this one here. Then
<br>here we go:
<br><br>I'd like to show the Icon in my map using his natural size (width and height
<br>original). How can i do it?
<br><br>Now i have this code:
<br><br>var contextResource =
<br>{
<br> getWidthIcon : function(feature){
<br> //i'm trying to get the current width
<br> },
<br> getHeightIcon : function(feature){
<br> //i'm trying to get the current height
<br> },
<br>
<br> getMarker : function(feature)
<br> {
<br> // getting the icon with a rest reponse
<br> var lstIcons = feature.attributes.satellites;
<br> var sUrlIcon =
<br>"${sBaseURL}/AvlCore/rest/icon/resource/composed/"+
<br>feature.attributes.orientation;
<br> for ( var n = 0; n < lstIcons.length; n++) {
<br> sUrlIcon = sUrlIcon + "/" + lstIcons[n];
<br> }
<br> return sUrlIcon;
<br> },
<br> getBackgroundMarker : function(feature)
<br> {
<br> ///blah blah blah
<br> }
<br>
<br> return urlBackground;
<br> },
<br> getVisibility : function(feature)
<br> {
<br> ///blah blah blah
<br> },
<br> getLabel : function(feature)
<br> {
<br> ///blah blah blah
<br> }
<br>
<br>};
<br><br>//This is my style builder
<br>var resourceStyle = new OpenLayers.Style({
<br> externalGraphic : '<% out.print("${getMarker}"); %>',
<br> backgroundGraphic : '<% out.print("${getBackgroundMarker}"); %>',
<br> graphicOpacity: 1,
<br> graphicWidth: '<% out.print("${getWidthIcon}"); %>',
<br> graphicHeight:'<% out.print("${getHeightIcon}"); %>',
<br> label: '<% out.print("${getLabel}"); %>',
<br> fontFamily: "Arial",
<br> fontSize: '11px',
<br> labelYOffset: -30,
<br> labelOutlineColor: "white",
<br> labelOutlineWidth: 3,
<br> display: '<% out.print("${getVisibility}"); %>'
<br>}, { context: contextResource });
<br><br>If I put a fixed graphicWidth and graphicHeight works normally. I want to
<br>display icons in different sizes. Is it possible using this strategy?
<br><br>Thanks
<br><br><br><br>--
<br>View this message in context:
<br><a href="http://osgeo-org.1560.x6.nabble.com/Icon-in-my-map-using-his-natural-size-tp" rel="nofollow" link="external" target="_blank">http://osgeo-org.1560.x6.nabble.com/Icon-in-my-map-using-his-natural-size-tp</a><br>
5130893.html
<br>Sent from the OpenLayers Users mailing list archive at Nabble.com.
<br>_______________________________________________
<br>Users mailing list
<br></div></div><a href="http://user/SendEmail.jtp?type=node&node=5131079&i=3" rel="nofollow" link="external" target="_blank">[hidden email]</a>
<br><a href="http://lists.osgeo.org/mailman/listinfo/openlayers-users" rel="nofollow" link="external" target="_blank">http://lists.osgeo.org/mailman/listinfo/openlayers-users</a><br><br>_______________________________________________
<br>Users mailing list
<br><a href="http://user/SendEmail.jtp?type=node&node=5131079&i=4" rel="nofollow" link="external" target="_blank">[hidden email]</a>
<br><a href="http://lists.osgeo.org/mailman/listinfo/openlayers-users" rel="nofollow" link="external" target="_blank">http://lists.osgeo.org/mailman/listinfo/openlayers-users</a><br>
<br>
<br>
<hr noshade size="1" color="#cccccc">
<div style="color:#444;font:12px tahoma,geneva,helvetica,arial,sans-serif">
<div style="font-weight:bold">If you reply to this email, your message will be added to the discussion below:</div>
<a href="http://osgeo-org.1560.x6.nabble.com/Icon-in-my-map-using-his-natural-size-tp5130893p5131079.html" target="_blank" rel="nofollow" link="external">http://osgeo-org.1560.x6.nabble.com/Icon-in-my-map-using-his-natural-size-tp5130893p5131079.html</a>
</div>
<div style="color:#666;font:11px tahoma,geneva,helvetica,arial,sans-serif;margin-top:.4em;line-height:1.5em">
To unsubscribe from Icon in my map using his natural size, <a href="" target="_blank" rel="nofollow" link="external">click here</a>.<br>
<a href="http://osgeo-org.1560.x6.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml" rel="nofollow" style="font:9px serif" target="_blank" link="external">NAML</a>
</div></blockquote></div><br><br clear="all"><div><br></div>-- <br>Atenciosamente,<br><br>Pablo Souza<br>Twitter: @pvrsouza<br>Tel.: (71) 9983-7775
</div>
<br/><hr align="left" width="300" />
View this message in context: <a href="http://osgeo-org.1560.x6.nabble.com/Icon-in-my-map-using-his-natural-size-tp5130893p5131083.html">Re: Icon in my map using his natural size</a><br/>
Sent from the <a href="http://osgeo-org.1560.x6.nabble.com/OpenLayers-Users-f3910695.html">OpenLayers Users mailing list archive</a> at Nabble.com.<br/>