[Users] KML layer pop up

[Andreas Hocevar]

Hi,

your code is ok. It seems that with Firefox, OpenLayers is unable to
parse the CDATA sections in your KML file.

Regards,
Andreas.

On 2009-12-11 15:51, Minika Bjørge wrote:
>
> Many thanks Andreas,
>
> The kml layer shows and the popup works.
>
> However when you click on it, it displays the undefined on Firebox
> while it displays the KML file content in IE. The KML content that is
> not displayed on Firefox is the node <Placemark><description>blab la
> bla</description></Placemark> I have validated my kml file on
> http://kmlvalidator.com/home.htm and it has no errors. The KML file is
> http://www.sjokart.no/admin/filestore/Sjkartverket/kml/test/vannstandstasjoner2.kml
>
> My guess is that the problem is in the area highlighted in red. I have
> added screenshots of Firefox and IE
>
> *My code:*
>
> 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
>
> });
>
> //Add the layer to map
>
> map.addLayer(kmlLayer)
>
> selectControl = new OpenLayers.Control.SelectFeature(kmlLayer);
>
> map.addControl(selectControl);
>
> selectControl.activate();
>
> kmlLayer.events.on({
>
> featureselected: function(e) {
>
> createPopup(e.feature);
>
> }
>
> });
>
> function createPopup(feature) {
>
> var content = "<div style='font-size:.9em; width:270px;'><b>"+
> *feature.attributes.name* + "</b><hr />" +
> feature*.attributes.description* + "</div>";
>
> popup = new GeoExt.Popup({
>
> title: 'Vannstandstajoner',
>
> feature: feature,
>
> width:270,
>
> height:170,
>
> html: content,
>
> collapsible: true
>
> });
>
> popup.on({
>
> close: function() {
>
> if(OpenLayers.Util.indexOf(kmlLayer.selectedFeatures, this.feature) >
> -1) {
>
> selectControl.unselect(this.feature);
>
> }
>
> }
>
> });
>
> popup.show();
>
> }
>
> *From:* Andreas Hocevar [mailto:ahocevar at opengeo.org]
> *Sent:* 11. desember 2009 10:20
> *To:* Minika Bjørge; users at geoext.org
> *Subject:* Re: [Users] KML layer pop up
>
> On 2009-12-11 07:02, Minika Bjørge wrote:
>
> Hi Andreas,
>
> Yes, how do I use the GeoExt.Popup to display the description node in
> the KML?
>
>
> Something like this (untested):
>
> var popup;
>
> 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 GeoExt.Popup({
> title: "Info",
> feature: feature,
> html: content,
> width: 100,
> height: 100,
> listeners: {
> "close": function() {
> selectControl.unselect(this.feature);
> }
> }
> });
> feature.popup = popup;
> popup.show();
> }
>
> function onFeatureUnselect(event) {
> popup.close();
> }
>
> Also have a look at the popup example:
> http://dev.geoext.org/trunk/geoext/examples/popup.html
>
> Regards,
> Andreas.
>
>
> Many thanks for your help.
>
> Minika
>
> *From:* users-bounces at geoext.org <mailto:users-bounces at geoext.org>
> [mailto:users-bounces at geoext.org] *On Behalf Of *Andreas Hocevar
> *Sent:* 10. desember 2009 15:22
> *To:* users at geoext.org <mailto:users at geoext.org>
> *Subject:* Re: [Users] KML layer pop up
>
> 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"
> <http://labs.metacarta.com/wms/vmap0>, {layers: 'basic'},
> {isBaseLayer: true} );
>
> layer2 = new OpenLayers.Layer.WMS("Global Imagery",
>
> "http://maps.opengeo.org/geowebcache/service/wms"
> <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" <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?"
> <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.
>
>
>
>
> -- 
> Andreas Hocevar
> OpenGeo - http://opengeo.org/
> Expert service straight from the developers.


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