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 http://dev.bnhelp.cz/wwwlibs/hslayers/branches/editace/examples/InfoPanel.html

First we have to include yet another javascript

        <script type="text/javascript" src="../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)

        <script type="text/javascript">
        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);
        });

        // this function is bind to "clearPanel" event
        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);
        };
        </script>