Location: PHPKode > scripts > OSM Data Manager > index.html
<html>
<head>
	<title>OSM Datamanager</title>
	
	<style type="text/css">
		@import "styles.css";
		@import "lib/dojo/dijit/themes/tundra/tundra.css";	
		@import "lib/dojo/dojox/image/resources/image.css";
		@import "lib/dojo/dojox/widget/SortList/SortList.css";	
	</style>
	
	<script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig="parseOnLoad:false"></script>			
	<script type="text/javascript">	
		  dojo.require("dojo.parser");
                    
		  
		  dojo.addOnLoad(function(){
				dojo.require("dojox.widget.SortList");
				dojo.require("dijit.layout.ContentPane");
			  	dojo.require("dijit.layout.BorderContainer");
				dojo.require("dijit.form.Button");
				dojo.require("dijit.Dialog");
				dojo.require("dijit.Menu");
				dojo.require("dijit.form.TextBox");
				dojo.require("dijit.form.ValidationTextBox");
		   		dojo.require("dojox.validate.regexp");
		   		dojo.require("dojo.parser");
				dojo.require("dojo.data.ItemFileReadStore"); 
				dojo.require("dojox.image.ThumbnailPicker");
				dojo.require("dijit.form.CheckBox");
				dojo.require("dijit.form.NumberSpinner");	
				dojo.require("dijit.form.Textarea");
								
				dojo.parser.parse();   
                dojo.fadeOut({ 
                      node:"overlay",
                      onEnd: function(){ 
                             // hide it completely after fadeout
                             dojo.style("overlay","display","none");
                      }
                }).play();
				init();
          });

		
	</script>
	
	<script src="lib/openlayers/OpenLayers.js"></script>
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>	
		
	<!-- Project Files -->
	<script src="lib/trm/openlayers_extensions.js"></script>
	<script src="lib/trm/Application.js"></script>
	<script src="lib/trm/DijitClient.js"></script>
	<script src="lib/trm/GroupManager.js"></script>
	<script src="lib/trm/MarkerManager.js"></script>
	<script src="lib/trm/PoiManager.js"></script>
	<script src="lib/trm/GroupTree.js"></script>

	<script src="json2.js"></script>		
	<script type="text/javascript">
				
		var gl_map;  				//openlayers map
		var gl_markers;				//marker layer
		var gl_groupmanager = null; 
		var gl_dblclick = null;
		var gl_application=null;	//client application
				
		TRM.TargetPrefix = "";
		
		//Initialise the 'map' object
		function init() {
			
			//Main Map
			gl_map = new OpenLayers.Map("map", {
			controls: [
				//new OpenLayers.Control.KeyboardDefaults(),
				new OpenLayers.Control.MouseDefaults(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.PanZoomBar()],
			maxExtent:
                new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                       20037508.34, 20037508.34),
			numZoomLevels: 18,
            maxResolution: 156543,
            units: 'meters',
            projection: "EPSG:4326"} );
			
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			gl_map.addLayer(layerMapnik);
									
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			gl_map.addLayer(layerCycleMap);
			gl_map.addControl(new OpenLayers.Control.MousePosition());
						
			gl_markers = new OpenLayers.Layer.Markers( "Markers",{projection: new OpenLayers.Projection("EPSG:4326")});
    		gl_map.addLayer(gl_markers);
									
			//Client Application
			gl_application = new DijitClient.Application(gl_map, new Markermanager());			
			gl_application.disablePrivatemode();
						
			//Groupmanager
			gl_groupmanager = new Groupmanager(gl_application);	
			gl_application.initGroupmanager(gl_groupmanager);
			
			//check if users is already logged in
			var cb = {
				func:DijitClient.LoginDialog._cb_loginUser,
				target:DijitClient.LoginDialog
			}
			gl_application.checkUser(cb);
			
		}		

	</script>
</head>

<body class="tundra" >
	  <div id="overlay"><div class="innerOverlay">Loading please wait...</div></div>

	  <div dojoType="dijit.layout.BorderContainer" class="maincontent" design="sidebar" id="borderContainer">
	    <!-- TOP Menu (general map options)  -->
		<div dojoType="dijit.layout.ContentPane" region="top" class="topmenu">						
				<button dojoType="dijit.form.Button" onclick="window.open('http://osmdatamanager.berlios.de/')">.:Project Page:.</button>
		</div>	
		
		<!-- MAIN MAP -->
		<div dojoType="dijit.layout.ContentPane" region="center" id="map">
		</div>
		
		<!-- LEFT MENU (user options or login) -->
		<div dojoType="dijit.layout.ContentPane" region="left" class="soria" id="mainmenu">
			<!-- <img src="images/bg_street_small.png"></img> -->
			<img src="images/logo4a.png" />
			
			<div style="width: 210px; height:400px; padding-top:8px;background-color:#fdd13a;" id="roundeddiv">
							
				<div class="custombutton1">								
					<button dojoType="dijit.form.Button" id="btn_login" onclick="DijitClient.LoginDialog.show()">::Login::</button>
					<button dojoType="dijit.form.Button" onclick="gl_application.centerHomebase()"  id="btn_centerhomebase">Heimatort anzeigen</button><br/>
				</div>
				
				<div>
					<div id="treecontainer">
					</div>			
				</div>
			</div>	
			
			<div style="margin-top:20px; font-size:10px; text-align:center;">
				powerd by
				<a href="http://developer.berlios.de" target="_blank" title="BerliOS Developer"> <img src="http://developer.berlios.de/bslogo.php?group_id=10678" style="margin-left:50px; padding:0px;" width="124px" height="32px" border="0" alt="BerliOS Developer Logo"></a>
				<br>
				
				<a href="http://www.openstreetmap.org" target="_blank">Openstreetmap<img src="images/Mag_map-120x120.png" style="cursor:pointer; margin-left:50px; border-style:none;" /></a>
			</div>
		</div>						
	  </div>  
	
	<div id="coords"></div>

	<!-- DIALOGS -->
	
	<!-- about dialog -->
	<div dojoType="dijit.Dialog" id="dlg_about" closable="false" title="About OSM Datamanager">
		<table>
			<tr>
				<td><b>About this Project:</b></td>
			</tr>
			<tr>
				<td>
				</td>
			</tr>
			
		</table>
		<button dojoType="dijit.form.Button" id="dlgabout_ok">Ok</button><br/>
	</div>	
	
	<!-- loading dialog -->
	<div dojoType="dijit.Dialog" class="soria" id="dialog_loading" closable="false" title="please wait">loading your gpx traces..</div>
	
	<!-- info dialog -->
	<div dojoType="dijit.Dialog" id="dialog_info" closable="false" title="">
		<div id="dlginfo_text">info</div>
		<button dojoType="dijit.form.Button" onclick="gl_application.hideMessage()" id="btn_dlginfo_ok">Ok</button><br/>
	</div>
			
	<!-- login dialog -->
	<div class="nihilo" dojoType="dijit.Dialog" id="dlg_login" title="Login"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
		<tr>
	      <td><label for="name">Benutzername:</label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="username" id="username"></td>
	    </tr>
	    <tr>
	      <td><label for="loc">Passwort: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="password" name="password" id="password"></td>
	    </tr>
		<tr>
			<td><button dojoType="dijit.form.Button" id="btn_dlglogin_ok">Ok</button></td>	
			<td><button dojoType="dijit.form.Button" onclick="DijitClient.RegisterDialog.show()">Registrieren</button></td> 
		</tr>
	  </table>
  </div>
  
  	<!-- admin dialog -->
	<div class="nihilo" dojoType="dijit.Dialog" id="dlg_admin" title="Admin"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
	    <tr>
	      <td><label for="name">Benutzer l&ouml;schen: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="dlgadmin_tb_username" id="dlgadmin_tb_username"></td>
		  <td><button dojoType="dijit.form.Button" id="dlgadmin_btn_deluser">L&ouml;schen</button></td>	
	    </tr>		
	  </table>
  </div>
  
  	<!-- change password dialog -->
	<div class="nihilo" dojoType="dijit.Dialog" id="dlg_changepassword" title="Login"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
	    <tr>
	      <td><label for="name">Altes Passwort: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="password" name="oldpassword" id="dlgchangepassword_tb_oldpassword"></td>
	    </tr>
	    <tr>
	      <td><label for="loc">Neues Passwort: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="password" name="password1" id="dlgchangepassword_tb_password1"></td>
	    </tr>
		<tr>
	      <td><label for="loc">Passwort wiederholen: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="password" name="password2" id="dlgchangepassword_tb_password2"></td>
	    </tr>
		<tr>
			<td><button dojoType="dijit.form.Button" id="dlgchangepassword_btn_ok">Ok</button></td>	
		</tr>
	  </table>
  </div>
  
  <!-- user settings dialog -->
	<div class="soria" dojoType="dijit.Dialog" id="dlg_usersettings" title="Einstellungen"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
	    <tr>
	      <td><label for="name">Benutzername: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" disabled="disabled" name="tb_usrpref_name" id="tb_usrpref_name"></td>
		  <td><button dojoType="dijit.form.Button" onclick="DijitClient.ChangePasswordDialog.show()">Passwort &auml;ndern</button></td>
	    </tr>
		<tr>
				
		</tr>
	    <tr>
	      <td><label for="loc">eMail: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_usrpref_email" id="tb_usrpref_email"></td>
	    </tr>
		<tr>
	      <td><label for="loc">Heimatort: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_usrpref_lat" disabled="disabled" id="tb_usrpref_lat"></td>
		  <td><input dojoType="dijit.form.TextBox" type="text" name="tb_usrpref_lon" disabled="disabled" id="tb_usrpref_lon"></td>
		  <td><button dojoType="dijit.form.Button" id="btn_usrpref_sethomebase">...</button></td>	
	    </tr>
		<tr>
	      <td><label for="loc">Info: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_usrpref_info" id="tb_usrpref_info"></td>
	    </tr>
		<tr>
	      <td><label for="loc">Bild: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_usrpref_picture" id="tb_usrpref_picture"></td>
	    </tr>	
		<tr>
			<td><button dojoType="dijit.form.Button" id="btn_usrpref_save">Speichern</button></td>	
			<td><button dojoType="dijit.form.Button" id="btn_usrpref_cancel">Abbrechen</button></td>
		</tr>
	  </table>
  </div>
  
  <!-- register dialog -->
	<div class="soria" dojoType="dijit.Dialog" id="dlg_register" title="Login"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
	    <tr>
	      <td><label for="name">Benutzername: </label></td>
	      <td><input dojoType="dijit.form.ValidationTextBox" invalidMessage="Invalid Username."  type="text" required="true" trim="true" name="reg_username" id="reg_username"></td>
	    </tr>
	    <tr>
	      <td><label for="loc">Passwort: </label></td>
	      <td><input dojoType="dijit.form.ValidationTextBox" invalidMessage="Invalid Password." type="password" required="true" trim="true" name="reg_password" id="reg_password"></td>
	    </tr>
		<tr>
	      <td><label for="loc">Passwort wiederholen: </label></td>
	      <td><input dojoType="dijit.form.ValidationTextBox" invalidMessage="Invalid Password." type="password" required="true" name="reg_password2" id="reg_password2"></td>
	    </tr>
		<tr>
			<td><label for="loc">eMail: </label></td>
	      	<td><input dojoType="dijit.form.ValidationTextBox" type="text" 
		  			name="reg_email" 
					regExpGen="dojox.regexp.emailAddress"
					trim="true"
    				required="true"
    				invalidMessage="Invalid Email Address." 
					id="reg_email">
			</td>
		</tr>
		<tr>
			<td><button dojoType="dijit.form.Button" id="btn_dlgregister_ok">Abschicken</button></td>
		</tr>
	  </table>
  </div> 
  
  <!-- FileList Dialog -->
  <div dojoType="dijit.Dialog" id="dlg_filelist" title="Dateiliste" onLoad="alert('x')" 
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	
		<div id="filecontainer" >
			<ul dojoType="dojox.widget.SortList" title="SortList From Markup" id="filelist"
  				sortable="true" style="width:420px; height:200px;">
			</ul>
		</div>
		<button dojoType="dijit.form.Button" id="dlgfilelist_btn_ok">Ok</button>	
  </div>
  
  <!-- FileEdit Dialog -->
	<div class="soria" dojoType="dijit.Dialog"  id="dlg_fileedit" title="Eigenschaften ändern"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
	    <tr>
	      <td><label for="name">Dateiname: </label></td>
	      <td><input dojoType="dijit.form.TextBox" disabled="disabled" type="text" name="tb_filename" id="tb_filename"></td>
	    </tr>
	    <tr>
	      <td><label for="loc">Beschreibung: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_filedescription" id="tb_filedescription"></td>
	    </tr>
		<tr>
			<td><button dojoType="dijit.form.Button" id="dlgfileedit_btn_ok">Ok</button></td>	
		</tr>
	  </table>
  </div>
  
  <!-- Picture Dialog -->
  <div class="soria" dojoType="dijit.Dialog"  id="dlg_picturelist" title="Bild selektieren" closeable="false"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
		<div id="thumbPicker1" dojoType="dojox.image.ThumbnailPicker"></div>
  </div>
    
  <!-- POI Dialog -->
  
  <!-- poilist -->
  <div dojoType="dijit.Dialog" id="dlg_poilist" title="POI Liste" onLoad="alert('x')" 
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	
		<div id="poicontainer" >
			<ul dojoType="dojox.widget.SortList" title="SortList From Markup" id="poilist"
  				sortable="true" style="width:420px; height:200px;">
			</ul>
		</div>
		<button dojoType="dijit.form.Button" id="dlgpoilist_btn_ok">Ok</button>	
  </div>
  
    <!-- create group dialog -->
	<div class="soria" dojoType="dijit.Dialog" id="dlg_creategroup" title="Gruppe"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
	    <tr>
	      <td><label for="name">Bezeichnung: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_groupname" id="tb_groupname"></td>
		</tr>
		<tr>
	      <td><label for="loc">Position: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="dlgcreategroup_tb_poi_lat" id="dlgcreategroup_tb_poi_lat"></td>
		  <td><input dojoType="dijit.form.TextBox" type="text" name="dlgcreategroup_tb_poi_lon" id="dlgcreategroup_tb_poi_lon"></td>
		  <td><button dojoType="dijit.form.Button" id="dlgcreategroup_btn_selectpoint">...</button></td>	
	    </tr> 
		<tr>
			<td><label for="loc">Zoomlevel:</label></td>
			<td><input dojoType="dijit.form.NumberSpinner"
							    value="14"
							    class="medium"
							    constraints="{max:20,min:1,places:0}"
							    name="dlgcreatgroup_zommlevel"
							    id="dlgcreatgroup_zommlevel">
			</td>
			<td><button dojoType="dijit.form.Button" id="dlgcreategroup_btn_zoomlevel">Zoomlevel von Karte</button></td>	
		</tr>
		<tr>
			<td><label for="loc">Schutz:</label></td>
			<td>
				<input dojoType="dijit.form.RadioButton" type="radio" name="g1" id="dlgcreategroup_rd_private" value="private" checked="true" />
				<label for="dlgcreategroup_rd_private">Privat</label>
				<input dojoType="dijit.form.RadioButton" type="radio" name="g1" id="dlgcreategroup_rd_protected" value="protected" />
				<label for="dlgcreategroup_rd_protected">Gesch&uuml;tzt</label>
				<input dojoType="dijit.form.RadioButton" type="radio" name="g1" id="dlgcreategroup_rd_public" value="public" />
				<label for="dlgcreategroup_rd_public">&Ouml;ffentlich</label>
			 </td>
		</tr>
		<tr>
			<td><button dojoType="dijit.form.Button" id="dlgcreategroup_btn_ok">Ok</button></td>
		</tr> 
	  </table>
  	</div>
  
  <!-- Point Of Interest dialog -->
	<div class="soria" dojoType="dijit.Dialog" id="dlg_poi" title="Point Of Interest"
    	execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
	  <table>
	    <input dojoType="dijit.form.TextBox" type="hidden" visible="false" name="tb_poi_poiid" id="tb_poi_poiid">
		<tr>
	      <td><label for="name">Bezeichnung: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_poidescription" id="tb_poidescription"></td>
	    </tr>
		<tr>
	      <td><label for="name">GeoRSS URL: </label></td>
	      <td><input dojoType="dijit.form.TextBox" disabled="disabled" type="text" name="tb_georssurl" id="tb_georssurl"></td>
	    </tr>
		<tr>
	      <td><label for="loc">Position: </label></td>
	      <td><input dojoType="dijit.form.TextBox" type="text" name="tb_poi_lat" id="tb_poi_lat"></td>
		  <td><input dojoType="dijit.form.TextBox" type="text" name="tb_poi_lon" id="tb_poi_lon"></td>
		  <td><button dojoType="dijit.form.Button" id="dlgpoi_btn_selectpoint">...</button></td>	
	    </tr> 
		<tr>
			<td><button dojoType="dijit.form.Button" id="dlgpoi_btn_showpiclist">[]</button></td>	
		</tr>
		<tr>
			<td><label for="loc">Htmltext: </label></td>	 
		    <td colspan="2"> <textarea dojoType="dijit.form.Textarea" style="max-width:320px" id="ta_poilongtext" name="ta_poilongtext"></textarea></td>
	    </tr>
		<tr>
			<td><button dojoType="dijit.form.Button" id="dlgpoi_btn_ok">Ok</button></td>
		</tr>
	  </table>
  	</div>
  
  <!-- Tracemanager Popup -->
  <div dojoType="dijit.Menu" id="trmPopup" onOpen="gl_application.groupTreeOpenmenu(this)" contextMenuForWindow="false" targetNodeIds="roundeddiv" style="display: none;" >
	  	
		<div dojoType="dijit.MenuItem" id="itm_loaddata" onClick="gl_application.loadGroupData()">Daten von markierter Gruppe laden</div> 
		<div dojoType="dijit.MenuItem" id="itm_gotoPoi" onClick="gl_application.gotoSelectedPoi()">Gehe zu Poi</div>
		
		<div dojoType="dijit.MenuSeparator"></div>	
	  	<div dojoType="dijit.MenuItem" id="itm_removeall" onClick="gl_application.clearMap()">Karte bereinigen</div>
		<div dojoType="dijit.MenuSeparator"></div>	
		
		<!-- Groups -->  
		<div dojoType="dijit.PopupMenuItem" id="itm_submenu_groups">
			<span>Gruppen</span>
			<div dojoType="dijit.Menu" id="submenu_groups">
				<div dojoType="dijit.MenuItem" id="itm_createmaingroup" onClick="DijitClient.GroupDialog.show(true,false)">Hauptgruppe hinzuf&uuml;gen</div>
				<div dojoType="dijit.MenuItem" id="itm_createsubgroup" onClick="DijitClient.GroupDialog.show(false,false)">Untergruppe hinzuf&uuml;gen</div>
	  			<div dojoType="dijit.MenuItem" id="itm_updategroup" onClick="DijitClient.GroupDialog.show(false,true)">Gruppe bearbeiten</div>
				<div dojoType="dijit.MenuSeparator"></div>	
				<div dojoType="dijit.MenuItem" id="itm_deletegroup" onClick="gl_groupmanager.deleteGroup()">Gruppe l&ouml;schen</div>		
			</div>
		</div>
		<!-- Traces -->
		<div dojoType="dijit.PopupMenuItem" id="itm_submenu_traces">
			<span>Gpx Spuren</span>
			<div dojoType="dijit.Menu" id="submenu_traces">
				<div dojoType="dijit.MenuItem" id="itm_loadTraces" onClick="gl_groupmanager.loadTraces(this)">Spuren auf Karte anzeigen</div>
	  	  		<div dojoType="dijit.MenuItem" id="itm_removeTraces" onClick="gl_groupmanager.removeTraces(this)">Spuren von Karte entfernen</div>
				<div dojoType="dijit.MenuSeparator"></div>	
				<div dojoType="dijit.MenuItem" id="itm_addFiles" onClick="DijitClient.FileListDialog.show()">Spur(en) zur Gruppe hinzuf&uuml;gen</div>
				<div dojoType="dijit.MenuItem" id="itm_remFiles" onClick="DijitClient.GroupDialog.removeGroupFile()">Spur aus Gruppe entfernen</div>
				<div dojoType="dijit.MenuItem" id="itm_editfile" onClick="DijitClient.FileEditDialog.show()">Datei Bearbeiten</div>	
			</div>
		</div>
		
	    <div dojoType="dijit.MenuSeparator"></div>
	 	
		<!-- POI's -->
		<div dojoType="dijit.PopupMenuItem" id="itm_submenu_pois">
			<span>Poi's</span>
  			<div dojoType="dijit.Menu" id="submenu_pois">			
				<div dojoType="dijit.MenuSeparator"></div>	
				<div dojoType="dijit.MenuItem" id="itm_editPoi" onClick="DijitClient.PoiDialog.showEdit()">Poi bearbeiten</div>	
				<div dojoType="dijit.MenuSeparator"></div>	
				<div dojoType="dijit.MenuItem" id="itm_addPoi" onClick="DijitClient.PoiListDialog.show()">POI zur Gruppe hinzuf&uuml;gen</div>
				<div dojoType="dijit.MenuItem" id="itm_remPoi" onClick="DijitClient.GroupDialog.removeGroupPoi()">POI aus Gruppe entfernen</div>
			</div>
		</div>
		
		<!-- Settings -->
		<div dojoType="dijit.PopupMenuItem" id="itm_submenu_settings">
			<span>Einstellungen</span>
			<div dojoType="dijit.Menu" id="submenu_settings">
  				<div dojoType="dijit.MenuItem" id="itm_userSettings" onClick="DijitClient.UserSettingsDialog.show()">Benutzereinstellungen</div>
				<div dojoType="dijit.MenuItem" id="itm_admin" onClick="DijitClient.AdminDialog.show()">Admin</div>
			</div>
		</div>
		
				
		<div dojoType="dijit.MenuSeparator"></div>
		<div dojoType="dijit.MenuItem" id="itm_createpoi" onClick="DijitClient.PoiDialog.show()">Poi erstellen</div>
		<div dojoType="dijit.MenuItem" id="itm_doupload" onClick="alert('disabled')">Datei hochladen</div>				
  </div>
        
</body>
</html>
Return current item: OSM Data Manager