1

I have point feature with name PointPhoto. This feature have attribute:

  • id
  • area
  • PhotoPath

Now I am using GeoExt popup to display this attributes, but I can't find a way to display image from image path, this is the code:

 <html> 
    <head> 
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"> 
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> 
            <script type="text/javascript" src="ext/ext-all-debug.js"></script> 
        <script src="../OpenLayers-2.9.1/OpenLayers.js"></script> 
        <script type="text/javascript" src="geoext/script/GeoExt.js"></script> 
          <link rel="stylesheet" type="text/css" href="http://localhost:8181/geoserver/openlayers/theme/default/style.css"/>
        <script type="text/javascript" src="../proj4js/lib/proj4js-compressed.js"></script>
        <link rel="stylesheet" type="text/css" href="geoext/resources/css/popup.css"> 
        <script type="text/javascript"> 
var app, items = [], controls = []; 
var store;
Ext.onReady(function() { 
            app = new Ext.Viewport({ 
                layout: "border",
                  items: items 
            }); 
        }); 
        items.push({ 
            xtype: "gx_mappanel", 
            ref: "mapPanel", 
            region: "center", 
            map: { 
                numZoomLevels: 19, 
                controls: controls 
            }, 
            extent: OpenLayers.Bounds.fromArray([ 
                    2189574.7042680467, 5418655.108865695,
                    2199298.319819289, 5426457.253025988
                    ]), 
            layers: [new OpenLayers.Layer.WMS( 
                "cite:PointPhoto", 
                "http://192.168.1.2:8181/geoserver/cite/wms", 
                {layers: "cite:PointPhoto"}, 
                {isBaseLayer: false} 
            )] ,
            }); 
            controls.push(
        new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(2, 15)}),
                new OpenLayers.Control.Navigation()
           );


controls.push(new OpenLayers.Control.WMSGetFeatureInfo({ 
autoActivate: true, 
infoFormat: "application/vnd.ogc.gml", 
maxFeatures: 3, 
eventListeners: { 
        "getfeatureinfo": function(e) { 
            var items = []; 
            Ext.each(e.features, function(feature) { 
                items.push({ 
                    xtype: "propertygrid", 
                    title: feature.fid, 
                    source: feature.attributes 
                         }); 
            }); 

            new GeoExt.Popup({ 
                title: "Feature Info", 
                width: 200, 
                height: 200, 
                layout: "accordion", 
                map: app.mapPanel, 
                location: e.xy, 
                items: items[0] 
            }).show(); 
        } 
    } 
})); 


     </script> 
    </head> 
    <body> 

    </body> 
</html>

enter image description here

My question is how I can display image inside of this popup?

Improve this question
1

Since the feature pop up is HTML code ... try wrapping the img path with :

<img src=..... />

This is how I did it on my ExtJS Grid.

enter image description here

Improve this answer
1

Previous answer is parcially correct. You have to use a html tag. the easy way to do it, since the content of the featur info window is fetched by geoserver is using a getfeatureInfo template; in the content.ftl you should put someting like :

<ul>
<#list features as feature>
  <li><b>Point of interest, "${feature.NAME.value}"</b>: <br/>
  <img src="http://host/folder${feature.PhotoPath.value}"/>
  </li>
</#list>
</ul>

for more information have a look at:

http://docs.geoserver.org/latest/en/user/tutorials/GetFeatureInfo/index.html

Improve this answer

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.