[Users] KML layer pop up

Fri Dec 11 17:06:12 CET 2009

Hi, not sure if this is of any help: you could either file a ticket in
OpenLayers, or modify your KML file to replace

<description><![CDATA[...]]>
</description>

with either

<description>
<![CDATA[...]]>
</description>

or

<description><![CDATA[...]]></description>

Regards,
Andreas.

On 2009-12-11 16:56, Andreas Hocevar wrote:
> 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.