HSLayers.MapPanelΒΆ

HSLayers.MapPanel() is a Ext.Panel in which OpenLayers.Map is displayed.

For example see map panel example.

If the panel is used within the HSLayers.MapPortal(), there usually are

HSLayers.Control.ProjectionSwitcher()
if there are more then one projection supported by the application (we will talk later about this)
HSLayers.Control.ScaleSwitcher()
for changing and indicating of current map scale
OpenLayers.Control.Permalink
For giving the user URL of current map content.

Let us illustrate on such basic example, how HSLayers works:

1
2
3
4
5
6
7
8
9
        <title>HSLayers Example - MapPanel</title>
        <script type="text/javascript" src="../source/HS.js"></script>
        <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/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/MapPanel.js"></script>

Bunch of JavaScripts has to be load first... Then we can start to work:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
        var mapPanel;
        Ext.onReady(function(){
            mapPanel = new HSLayers.MapPanel({
                        width: 500,
                        height: 500,
                        renderTo: Ext.getBody()
            });
            map = new OpenLayers.Map();
            map.addLayer(new OpenLayers.Layer.WMS("MetaCarta WMS",
                        "http://labs.metacarta.com/wms/vmap0",
                        {layers: 'basic'}
                    ));
            map.zoomToMaxExtent();

            mapPanel.setMap(map);

        });

Here it is, map loaded into MapPanel body. To make this really happen, at line 15 HSLayers.MapPanel.setMap() is called.

Main Menu


Previous topic

HSLayers.Map

Next topic

HSLayers.InfoPanel

This Page