Project

General

Profile

1
<?xml version="1.0" encoding="UTF-8"?>
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
3
      
4
<html xmlns="http://www.w3.org/1999/xhtml" >
5
  <head>
6
    <title>Mapbuilder Interactive Map Viewer</title>
7
    <link rel='StyleSheet' type='text/css' href='../../lib/skin/default/demoStyles.css'/>
8
    <link rel='StyleSheet' type='text/css' href='../../lib/skin/default/mapStyle.css'/>
9
    <style>
10
      /* remove border from mainMapPane (work-around for Selenium tests under MSIE) */
11
      #mainMapPane {
12
        border: none;
13
      }
14
    </style>
15
    <script>
16
    // URL of Mapbuilder configuration file.
17
    var mbConfigUrl='config.xml';
18
    </script>
19
    <!-- This points to the core mapbuilder library, replaces this with MapbuilderCompressed.js when you want to use the compressed version -->
20
    <script type="text/javascript" src="../../lib/Mapbuilder.js"></script>
21
    
22
  </head>
23
  <!-- This onload event starts mapbuilder -->
24
  <body onload="mbDoLoad()" >
25
  <!-- DIY cut here 1 -->
26
	  <div id="header">  	<!-- The header of the page -->
27
            <h1><a href="http://communitymapbuilder.org">MapBuilder</a> <!--Version-->1.5-rc2<!--VersionEnd--> Interactive Map Viewer</h1>
28
            <!-- The version tag will be inserted into the comment tags above
29
            during the build process. -->
30
	  </div><!-- /header -->
31
  	<div id="middle"><!-- The center piece of the page with left menubar and right mainbody -->
32
	    <div id="exampleList"></div><!-- this is the container where the menubar will be drawn -->
33
  			
34
			<div id="mainbody"><!-- right side of the middle div, is also divided into two areas -->
35
	  		<div class="left">
36
	  			<h3>Explanation</h3>
37
	  			This demo provides a minimal interactivity to a map. It includes buttons to zoom and pan. Select a tool
38
	  			and click and drag on the map. To add or remove functionality to the map one has to edit <a href="config.xml">
39
	  			config.xml</a>. See the <a href="http://communitymapbuilder.org/display/MAP/User+Guide">User Guide</a> for more 
40
	  			information on this.<br/>
41
	  			Apart from the buttons there are three examples on how to interact with the map from within a webpage. 
42
	  						      <br />
43
			      Have a look at <a href="http://communitymapbuilder.org/display/MAP/Modifying+the+Basic+Examples">this guide</a> if you want to modify this example.
44
		    </div><!-- /left -->
45
		    <!-- DIY end cut 1-->
46
  			<div class="right">
47
		  	  <div id="mainMapPane"><!-- This is the container where the map will be drawn -->
48
    		    <noscript>
49
        	    this page requires Javascript to be enabled
50
        		</noscript>
51
            <img src="../../lib/skin/default/images/Loading.gif"/>
52
 				  </div><!-- /mainMapPane -->
53
          <div>
54
            <div style="float: left; width: 33%;" id="mainButtonBar"><!-- This is the container where the buttons will be drawn --></div>
55
            <div style="float: right; width: 33%" id="cursorTrack"><!-- This is where the cursor tracker will be drawn --></div>
56
            <div id="scaleText"><!-- This is where the scale text will be drawn --></div>
57
          </div>
58
			    <div>
59
				    <h2>Examples of working with MapBuilder:</h2>
60
				    <ul><!-- These are a couple of examples how to access mapbuilder from a site -->
61
     				  <li><a href="?mainMap=../data/context/cded.xml">Load a different map by a URL parameter</a></li>
62
				      <li><a href="javascript:config.loadModel('mainMap','../data/context/modisWorld.xml')">Load a different map by JavaScript function call</a></li>
63
				      <li><a href="?bbox=0,0,50,50">Load the map with a different Bounding Box. This bounding box is guaranteed to be covered by the map, but if the aspect ratio of the map pane is different, map extent and bounding box will differ.</a></li>
64
				    </ul>
65
			    </div>
66
				</div><!-- /right -->
67
				<!-- DIY cut here 2 -->
68
			</div><!-- /mainbody -->
69
		</div><!-- /middle -->
70
		<div id="footer"><!-- The footer of the page -->
71
	    <div class="right">
72
				<a href="http://communitymapbuilder.org/" title="powered by community mapbuilder"><img src="../../lib/skin/default/images/Icon.gif"/></a>	  	
73
				<a href="https://www.osgeo.org/" title="member of OSgeo"><img src="../../lib/skin/default/images/Osgeo.png"/></a>
74
      </div><!-- /right -->
75
	 	</div><!-- /footer -->  
76
	 	<!-- DIY end cut 2 -->
77
	</body>
78
</html>
(2-2/2)