[Users] KML layer pop up

[Andreas Hocevar]

Hi,

According to your screenshot, you already have the description (but not
the title). BTW, are you sure you want to use GeoExt when the only
GeoExt feature you use is the MapPanel? Or are you asking about how to
use GeoExt.Popup?

Please narrow your question.

Regards,
Andreas.

On 2009-12-09 12:07, Minika Bjørge wrote:
>
> Hello,
>
>  
>
> I am quite new to GeoExt (5 days old) and I have gone through the
> tutorials.  I have created a kML layer but I am a bit confused about
> how to show the "description" in the KML file in the popup.
>
>  
>
> Can anyone help me please.  I am really getting frustrated.
>
>  
>
> Many thanks,
>
>  
>
> *This is my code:*
>
>  
>
> var lon = 11.8;
>
>     var lat = 64.5;
>
>     var zoom = 3;
>
>     var map, layer, layer2, layer3, gmap, kmlLayer, selectControl;
>
>                  
>
>                 Ext.onReady(function() {
>
>   
>
>         map = new OpenLayers.Map('map');
>
>                                
>
>                                 //Base Layers
>
>         layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
>
>                 "http://labs.metacarta.com/wms/vmap0", {layers:
> 'basic'}, {isBaseLayer: true} );             
>
>                                
>
>                                 layer2 = new
> OpenLayers.Layer.WMS("Global Imagery",
>
>                 "http://maps.opengeo.org/geowebcache/service/wms",
>
>                                                                
> {layers: "bluemarble"}, {isBaseLayer: true});
>
>                                
>
>                                 var europa = new
> OpenLayers.Layer.WMS("Europa kart",
>
>                                
> "http://gatekeeper1.geonorge.no/BaatGatekeeper/gk/gk.cache?gkt=myToken",
>
>         {layers: 'europa', format:'image/jpeg'}, {isBaseLayer: true});
>
>                                
>
>                                 //Overlayers
>
>         layer3 = new OpenLayers.Layer.WMS("Snøskredfare",
>
>                
> "http://www.ngu.no:80/wmsconnector/com.esri.wms.Esrimap/SkredSnoWMS?",
>
>                                                                
> {layers: 'Kartblad,Utlopsomrade,Utlosningsomrade', format:
> 'image/png', transparent: 'true'},
>
>                                                                
> {singleTile: 'True'});
>
>                             layer3.setIsBaseLayer(false);
>
>                             layer3.setVisibility(false);
>
>                             layer3.setOpacity(0.5);     
>
>                                
>
>                                 kmlLayer = new
> OpenLayers.Layer.Vector("KML test");                
>
>                                 var store = new GeoExt.data.FeatureStore({
>
>            layer: kmlLayer,
>
>            proxy: new GeoExt.data.ProtocolProxy({
>
>               protocol: new OpenLayers.Protocol.HTTP({
>
>               url: "vannstandstasjoner2.kml",
>
>               format: new OpenLayers.Format.KML()
>
>              })
>
>           }),                   
>
>           fields: [
>
>              {name: 'name', type: 'string'},
>
>              {name: 'description', type: 'string'}
>
>           ],
>
>           autoLoad: true
>
>         });
>
>                                
>
>                                 // create select feature control
>
>                                 selectControl = new
> OpenLayers.Control.SelectFeature(kmlLayer);
>
>                                
>
>                                                                
>
>                                 kmlLayer.events.on({
>
>                 "featureselected": onFeatureSelect,
>
>                 "featureunselected": onFeatureUnselect
>
>          });
>
>  
>
>                                  map.addControl(selectControl);
>
>          selectControl.activate(); 
>
>                                  
>
>                                  function onPopupClose(evt) {
>
>                                                
>  selectControl.unselectAll();
>
>                                  }
>
>                                  
>
>                                 function onFeatureSelect(event) {
>
>                                                 var feature =
> event.feature;
>
>                                                 var detail =
> feature.attributes['description'];
>
>                                                 var content = "<div
> style='font-size:.8em; width:120px;'><strong>"+
> feature.attributes.title + "</strong><hr />" + detail + "</div>";
>
>            
>
>             popup = new OpenLayers.Popup.FramedCloud("chicken",
>
>                    feature.geometry.getBounds().getCenterLonLat(),
>
>                    new OpenLayers.Size(100,100),
>
>                    content,
>
>                    null, true, onPopupClose);
>
>                                                 popup.border = '1px
> solid black';
>
>             popup.opacity = .7;           
>
>             popup.panMapIfOutOfView = true;
>
>                                                
>
>             feature.popup = popup;                                  
>
>             map.addPopup(popup);
>
>                     }
>
>                                
>
>                                 function onFeatureUnselect(event) {
>
>                                 var feature = event.feature;
>
>                     if(feature.popup) {
>
>                       map.removePopup(feature.popup);
>
>                       feature.popup.destroy();
>
>                       delete feature.popup;
>
>                                 }
>
>                  }
>
>                                  
>
>                                 map.addLayer(layer);
>
>                                 map.addLayer(layer2);
>
>                                
> map.addLayer(europa);                               
>
>                                 map.addLayer(layer3); 
>
>                                 map.addLayer(kmlLayer)
>
>                                
>
>                                 map.addControl(new
> OpenLayers.Control.LayerSwitcher());     
>
>         map.addControl(new OpenLayers.Control.PanZoomBar());
>
>         map.addControl(new
> OpenLayers.Control.MousePosition());                           
>
>                                
>
>         var mapPanel = new GeoExt.MapPanel({
>
>            title: "Vannstandsmålere",
>
>            map: map,
>
>            renderTo: 'mapPanel',
>
>            height: 600,
>
>            width: 600,
>
>           zoom:5,
>
>         center: [11.8,64.5]
>
>         });
>
>                                
>
>  
>
> });
>
>  
>
>

-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20091210/87e4a383/attachment-0001.htm