[Users] KML layer pop up

[Minika Bjørge]

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]

        });

                                

 

});

 

Screenshot:

 

 

Minika Bjørge

Statens Kartverk Sjø

minika.bjorge at statkart.no

Tel: +47 51 85 87 26

Mob: +47 90 03 40 63

 

  <http://www.statkart.no/> 

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20091209/68bfe171/attachment-0001.htm 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 3052 bytes
Desc: image001.jpg
Url : http://www.geoext.org/pipermail/users/attachments/20091209/68bfe171/attachment-0001.jpeg 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 406294 bytes
Desc: image002.png
Url : http://www.geoext.org/pipermail/users/attachments/20091209/68bfe171/attachment-0001.png