[Users] KML layer pop up

Andreas Hocevar ahocevar at opengeo.org
Thu Dec 10 15:19:16 CET 2009


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]
>
>         });
>
>                                
>
>  
>
> });
>
>  
>
> *Screenshot:*
>
>  
>
> Minika Bjørge
>
> Statens Kartverk Sjø
>
> minika.bjorge at statkart.no
>
> Tel: +47 51 85 87 26
>
> Mob: +47 90 03 40 63
>
>  
>
> cid:image001.jpg at 01CA352F.AF8DEED0 <http://www.statkart.no/>
>
>  
>
>
> _______________________________________________
> Users mailing list
> Users at geoext.org
> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>   


-- 
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/2aeacbcb/attachment-0001.htm 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 406294 bytes
Desc: not available
Url : http://www.geoext.org/pipermail/users/attachments/20091210/2aeacbcb/attachment-0001.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 3052 bytes
Desc: not available
Url : http://www.geoext.org/pipermail/users/attachments/20091210/2aeacbcb/attachment-0001.jpeg 


More information about the Users mailing list