HSLayers.InfoPanelΒΆ

HSLayers.InfoPanel() is again Ext.Panel which is used for displaying any relevant textual information to the user. I is used among others by query tool, but also information about line length and area, measured by specified controls, are displayed too.

Let’s have a look at the example InfoPanel example

First we have to include yet another javascript

1
2
3
4
5
6
7
8
9
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>

        <script type="text/javascript" src="http://hslayers.org/lib/source/HS.js"></script>
        <script type="text/javascript" src="http://hslayers.org/lib/build/OpenLayers.js"></script>

        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers.js"></script>
        <script type="text/javascript" src="http://hslayers.org/lib/source/HSLayers/InfoPanel.js"></script>

Then we will create some map, with one Marker within the OpenLayers.Layer.Marker, and will bound some functionality to the Clear button of the InfoPanel (or better: we will add listener to clearPanel event)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
        var map;
        var infoPanel;
        var markersLayer;

        Ext.onReady(function(){

            OpenLayers.ProxyHost = "/cgi-bin/olproxy.cgi?url=";

            // create the map panel
            infoPanel = new HSLayers.InfoPanel({
                html: "text",
                layout: "fit",
                renderTo: Ext.get("info")
            });

            // create map
            map = new OpenLayers.Map("map");
            map.addLayer(new OpenLayers.Layer.WMS("MetaCarta WMS",
                       "http://labs.metacarta.com/wms/vmap0",
                       {layers: 'basic'}
                   ));

            markersLayer = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markersLayer);

            markersLayer.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0)));

            // set the map
            map.zoomToMaxExtent();

            infoPanel.on("clearPanel",clearTheLayer);
        });

clearTheLayer function, whis is called on clearPanel event, is pretty simple:

1
2
3
4
5
        var clearTheLayer = function(e) {
            markersLayer.clearMarkers();

            window.setTimeout("markersLayer.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0))); infoPanel.body.update(\"text back after 3 seconds\"); infoPanel.doLayout();",3000);
        };

Main Menu


Previous topic

HSLayers.MapPanel

Next topic

HSLayers.OWS

This Page