HSLayers.MapPanel is a Ext.Panel in which OpenLayers.Map is displayed.
For example see http://dev.bnhelp.cz/wwwlibs/hslayers/branches/editace/examples/MapPanel.html.
It also has several buttons in the toolbar, namely:
- Load
- Load map content from the WMC file
- Save
- Save map content into the WMC file
- Previous and Next zoom
- Zoom to previous or next frame
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 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HSLayers Example - MapPanel</title>
<script type="text/javascript" src="/wwwlibs/hslayers/trunk/source/HS.js"></script>
<link rel="stylesheet" type="text/css" href="/wwwlibs/ext/3.1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/wwwlibs/ext/3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/wwwlibs/ext/3.1.1/ext-all.js"></script>
<script type="text/javascript" src="../build/OpenLayers.js"></script>
<script type="text/javascript" src="../source/HSLayers.js"></script>
<script type="text/javascript" src="../source/HSLayers/MapPanel.js"></script>
<script type="text/javascript" src="../source/HSLayers/MapPanel/HistoryButtons.js"></script>
<script type="text/javascript" src="../source/HSLayers/MapPanel/WMCButtons.js"></script>
<script type="text/javascript" src="../source/HSLayers/MapPanel/WMCForm.js"></script>
</head>
<body>
<h1>HSLayers MapPanel Example</h1>
</body>
</html>
|
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 18 19 | <script type="text/javascript">
var map;
var mapPanel;
Ext.onReady(function(){
mapPanel = new HSLayers.MapPanel({
width: 500,
height: 500,
renderTo: Ext.getBody()
});
map = new OpenLayers.Map(mapPanel.body.dom.id);
map.addLayer(new OpenLayers.Layer.WMS("MetaCarta WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
));
map.zoomToMaxExtent();
mapPanel.setMap(map);
});
</script>
|
Here it is, map loaded into MapPanel body. To make this really happen, at line 17 HSLayers.MapPanel.setMap() is called.