<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body text="#000000" bgcolor="#ffffff">
On 2009-12-11 07:02, Minika Bjørge wrote:
<blockquote
cite="mid:BF995B0DF5FF154F93367F9D132C88FC7C3CEE@skrisrv06.statkart.no"
type="cite">
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<meta name="Generator" content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
color:black;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";
color:black;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-priority:99;
mso-style-link:"Balloon Text Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:8.0pt;
font-family:"Tahoma","sans-serif";
color:black;}
span.BalloonTextChar
{mso-style-name:"Balloon Text Char";
mso-style-priority:99;
mso-style-link:"Balloon Text";
font-family:"Tahoma","sans-serif";}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:Consolas;
color:black;}
span.EmailStyle22
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
<div class="Section1">
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);">Hi
Andreas,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);">Yes, how
do I use the
GeoExt.Popup to display the description node in the KML?</span></p>
</div>
</blockquote>
<br>
Something like this (untested):<br>
<br>
var popup;<br>
<br>
function onFeatureSelect(event) {<br>
var feature = event.feature;<br>
var detail = feature.attributes['description'];<br>
var content = "<div style='font-size:.8em;
width:120px;'><strong>" +<br>
feature.attributes.title + "</strong><hr />" +
detail + "</div>";<br>
<br>
popup = new GeoExt.Popup({<br>
title: "Info",<br>
feature: feature,<br>
html: content,<br>
width: 100,<br>
height: 100,<br>
listeners: {<br>
"close": function() {<br>
selectControl.unselect(this.feature);<br>
}<br>
}<br>
});<br>
feature.popup = popup; <br>
popup.show();<br>
}<br>
<br>
function onFeatureUnselect(event) {<br>
popup.close();<br>
}<br>
<br>
Also have a look at the popup example:<br>
<a class="moz-txt-link-freetext" href="http://dev.geoext.org/trunk/geoext/examples/popup.html">http://dev.geoext.org/trunk/geoext/examples/popup.html</a><br>
<br>
Regards,<br>
Andreas.<br>
<br>
<blockquote
cite="mid:BF995B0DF5FF154F93367F9D132C88FC7C3CEE@skrisrv06.statkart.no"
type="cite">
<div class="Section1">
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);"><o:p></o:p></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);">Many
thanks for your help.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);">Minika <o:p></o:p></span></p>
<p class="MsoNormal"><span style="color: rgb(31, 73, 125);"><o:p> </o:p></span></p>
<div>
<div
style="border-style: solid none none; border-color: rgb(181, 196, 223) -moz-use-text-color -moz-use-text-color; border-width: 1pt medium medium; padding: 3pt 0cm 0cm;">
<p class="MsoNormal"><b><span
style="font-size: 10pt; font-family: "Tahoma","sans-serif"; color: windowtext;">From:</span></b><span
style="font-size: 10pt; font-family: "Tahoma","sans-serif"; color: windowtext;">
<a class="moz-txt-link-abbreviated" href="mailto:users-bounces@geoext.org">users-bounces@geoext.org</a>
[<a class="moz-txt-link-freetext" href="mailto:users-bounces@geoext.org">mailto:users-bounces@geoext.org</a>] <b>On Behalf Of </b>Andreas Hocevar<br>
<b>Sent:</b> 10. desember 2009 15:22<br>
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:users@geoext.org">users@geoext.org</a><br>
<b>Subject:</b> Re: [Users] KML layer pop up<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Hi,<br>
<br>
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?<br>
<br>
Please narrow your question.<br>
<br>
Regards,<br>
Andreas.<br>
<br>
On 2009-12-09 12:07, Minika Bjørge wrote: <o:p></o:p></p>
<p class="MsoNormal">Hello,<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">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.<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">Can anyone help me please. I am really getting
frustrated.<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">Many thanks,<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"><b>This is my code:</b><o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK">var lon = 11.8;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK"> var lat = 64.5;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK"> var zoom = 3;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK"> </span>var map, layer,
layer2, layer3, gmap, kmlLayer, selectControl;<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
Ext.onReady(function() {<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"> map = new
OpenLayers.Map('map');<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
//Base Layers<o:p></o:p></p>
<p class="MsoNormal"> layer = new
OpenLayers.Layer.WMS( "OpenLayers WMS",<o:p></o:p></p>
<p class="MsoNormal">
<a moz-do-not-send="true"
href="http://labs.metacarta.com/wms/vmap0">"http://labs.metacarta.com/wms/vmap0"</a>,
{layers:
'basic'}, {isBaseLayer: true}
);
<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
layer2 = new OpenLayers.Layer.WMS("Global Imagery",<o:p></o:p></p>
<p class="MsoNormal">
<a moz-do-not-send="true"
href="http://maps.opengeo.org/geowebcache/service/wms">"http://maps.opengeo.org/geowebcache/service/wms"</a>,<o:p></o:p></p>
<p class="MsoNormal">
{layers:
"bluemarble"}, {isBaseLayer: true});<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
var europa = new OpenLayers.Layer.WMS("Europa kart",<o:p></o:p></p>
<p class="MsoNormal">
<a moz-do-not-send="true"
href="http://gatekeeper1.geonorge.no/BaatGatekeeper/gk/gk.cache?gkt=myToken">"http://gatekeeper1.geonorge.no/BaatGatekeeper/gk/gk.cache?gkt=myToken"</a>,<o:p></o:p></p>
<p class="MsoNormal"> {layers:
'europa', format:'image/jpeg'}, {isBaseLayer: true});<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
//Overlayers<o:p></o:p></p>
<p class="MsoNormal"> layer3 = new
OpenLayers.Layer.WMS("Snøskredfare",<o:p></o:p></p>
<p class="MsoNormal">
<a moz-do-not-send="true"
href="http://www.ngu.no:80/wmsconnector/com.esri.wms.Esrimap/SkredSnoWMS?">"http://www.ngu.no:80/wmsconnector/com.esri.wms.Esrimap/SkredSnoWMS?"</a>,<o:p></o:p></p>
<p class="MsoNormal">
<span lang="NO-BOK">{layers:
'Kartblad,Utlopsomrade,Utlosningsomrade', format:
'image/png', transparent: 'true'},</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK">
</span>{singleTile: 'True'});<o:p></o:p></p>
<p class="MsoNormal">
layer3.setIsBaseLayer(false);<o:p></o:p></p>
<p class="MsoNormal">
layer3.setVisibility(false);<o:p></o:p></p>
<p class="MsoNormal">
layer3.setOpacity(0.5); <o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
kmlLayer = new OpenLayers.Layer.Vector("KML test");
<o:p></o:p></p>
<p class="MsoNormal">
var store = new GeoExt.data.FeatureStore({<o:p></o:p></p>
<p class="MsoNormal">
layer: kmlLayer,<o:p></o:p></p>
<p class="MsoNormal">
proxy: new GeoExt.data.ProtocolProxy({<o:p></o:p></p>
<p class="MsoNormal">
protocol: new OpenLayers.Protocol.HTTP({<o:p></o:p></p>
<p class="MsoNormal">
<span lang="NO-BOK">url: "vannstandstasjoner2.kml",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK">
format: new OpenLayers.Format.KML()</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK">
</span>})<o:p></o:p></p>
<p class="MsoNormal">
}),
<o:p></o:p></p>
<p class="MsoNormal">
fields: [<o:p></o:p></p>
<p class="MsoNormal">
{name: 'name', type: 'string'},<o:p></o:p></p>
<p class="MsoNormal">
{name: 'description', type: 'string'}<o:p></o:p></p>
<p class="MsoNormal"> ],<o:p></o:p></p>
<p class="MsoNormal">
autoLoad: true<o:p></o:p></p>
<p class="MsoNormal"> });<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
// create select feature control<o:p></o:p></p>
<p class="MsoNormal">
selectControl = new OpenLayers.Control.SelectFeature(kmlLayer);<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
kmlLayer.events.on({<o:p></o:p></p>
<p class="MsoNormal">
"featureselected": onFeatureSelect,<o:p></o:p></p>
<p class="MsoNormal">
"featureunselected": onFeatureUnselect<o:p></o:p></p>
<p class="MsoNormal"> });<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">
map.addControl(selectControl);<o:p></o:p></p>
<p class="MsoNormal">
selectControl.activate(); <o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
function onPopupClose(evt) {<o:p></o:p></p>
<p class="MsoNormal">
selectControl.unselectAll();<o:p></o:p></p>
<p class="MsoNormal">
}<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
function onFeatureSelect(event) {<o:p></o:p></p>
<p class="MsoNormal">
var feature = event.feature;<o:p></o:p></p>
<p class="MsoNormal">
var detail = feature.attributes['description']; <o:p></o:p></p>
<p class="MsoNormal">
var content = "<div style='font-size:.8em;
width:120px;'><strong>"+
feature.attributes.title + "</strong><hr />" + detail +
"</div>";<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
popup = new OpenLayers.Popup.FramedCloud("chicken", <o:p></o:p></p>
<p class="MsoNormal">
feature.geometry.getBounds().getCenterLonLat(),<o:p></o:p></p>
<p class="MsoNormal">
new OpenLayers.Size(100,100),<o:p></o:p></p>
<p class="MsoNormal">
content,<o:p></o:p></p>
<p class="MsoNormal">
null, true, onPopupClose);<o:p></o:p></p>
<p class="MsoNormal">
popup.border = '1px solid black';<o:p></o:p></p>
<p class="MsoNormal">
popup.opacity =
.7; <o:p></o:p></p>
<p class="MsoNormal">
popup.panMapIfOutOfView = true; <o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
feature.popup =
popup;
<o:p></o:p></p>
<p class="MsoNormal">
map.addPopup(popup);<o:p></o:p></p>
<p class="MsoNormal">
}<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
function onFeatureUnselect(event) {<o:p></o:p></p>
<p class="MsoNormal">
var feature = event.feature;<o:p></o:p></p>
<p class="MsoNormal">
if(feature.popup) {<o:p></o:p></p>
<p class="MsoNormal">
map.removePopup(feature.popup);<o:p></o:p></p>
<p class="MsoNormal">
feature.popup.destroy();<o:p></o:p></p>
<p class="MsoNormal">
delete feature.popup;<o:p></o:p></p>
<p class="MsoNormal">
}<o:p></o:p></p>
<p class="MsoNormal">
} <o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
map.addLayer(layer);<o:p></o:p></p>
<p class="MsoNormal">
map.addLayer(layer2);<o:p></o:p></p>
<p class="MsoNormal">
map.addLayer(europa);
<o:p></o:p></p>
<p class="MsoNormal">
map.addLayer(layer3); <o:p></o:p></p>
<p class="MsoNormal">
map.addLayer(kmlLayer)<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal">
map.addControl(new OpenLayers.Control.LayerSwitcher());
<o:p></o:p></p>
<p class="MsoNormal">
map.addControl(new OpenLayers.Control.PanZoomBar());<o:p></o:p></p>
<p class="MsoNormal">
map.addControl(new
OpenLayers.Control.MousePosition());
<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal"> var mapPanel =
new GeoExt.MapPanel({<o:p></o:p></p>
<p class="MsoNormal">
<span lang="NO-BOK">title: "Vannstandsmålere",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK">
map: map,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK">
renderTo: 'mapPanel',</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="NO-BOK">
</span>height: 600,<o:p></o:p></p>
<p class="MsoNormal">
width: 600,<o:p></o:p></p>
<p class="MsoNormal">
zoom:5,<o:p></o:p></p>
<p class="MsoNormal"> center:
[11.8,64.5]<o:p></o:p></p>
<p class="MsoNormal"> });<o:p></o:p></p>
<p class="MsoNormal">
<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal">});<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size: 12pt; font-family: "Times New Roman","serif";"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size: 12pt; font-family: "Times New Roman","serif";"><br>
<br>
<o:p></o:p></span></p>
<pre>-- <o:p></o:p></pre>
<pre>Andreas Hocevar<o:p></o:p></pre>
<pre>OpenGeo - <a moz-do-not-send="true" href="http://opengeo.org/">http://opengeo.org/</a><o:p></o:p></pre>
<pre>Expert service straight from the developers.<o:p></o:p></pre>
</div>
</blockquote>
<br>
<br>
<pre class="moz-signature" cols="72">--
Andreas Hocevar
OpenGeo - <a class="moz-txt-link-freetext" href="http://opengeo.org/">http://opengeo.org/</a>
Expert service straight from the developers.
</pre>
</body>
</html>