[Users] KML layer pop up
Andreas Hocevar
ahocevar at opengeo.org
Fri Dec 11 10:19:36 CET 2009
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] *On
> Behalf Of *Andreas Hocevar
> *Sent:* 10. desember 2009 15:22
> *To:* 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.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20091211/47cf4906/attachment-0001.htm
More information about the Users
mailing list