Mercurial > hg > ChinaGisRestApi

changeset 268:f25ee0424ce6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Open Map in new Window
author fknauft
date Fri, 27 Jan 2012 09:43:40 +0100
parents 260ec888fe15
children 442c1c3e6f8d
files gis_gui/blocks/map.html.pt gis_gui/blocks/map.js gis_gui/blocks/map_newwindow.html.pt gis_gui/head.pt gis_gui/index_html.html zpt/GIS_schema_table.zpt
diffstat 6 files changed, 165 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/gis_gui/blocks/map.html.pt	Wed Jan 25 20:45:13 2012 +0100
+++ b/gis_gui/blocks/map.html.pt	Fri Jan 27 09:43:40 2012 +0100
@@ -52,11 +52,9 @@
         </tr>
       </table>
       <p><input type="button" class="layer_add_button" value="Add layer" /></p>
-      
-      <p><input type="button" class="map_update_button" value="Update map" /><br />
-       <!--    <input type="button" class="map_newwindow_button" value="Open map in new Window" /></p>
-        --> 
-      <input type="button" class="map_e4D_button" value="Open Map in Europeana4D" /></p>
+      <p><input type="button" class="map_update_button" value="Update map" /></p>
+      <p><input type="button" class="map_newwindow_button" value="New Window" /></p>
+      <p><input type="button" class="map_e4D_button" value="Europeana4D" /></p>
         
       </div>
 
--- a/gis_gui/blocks/map.js	Wed Jan 25 20:45:13 2012 +0100
+++ b/gis_gui/blocks/map.js	Fri Jan 27 09:43:40 2012 +0100
@@ -53,13 +53,14 @@
         });
 
         // new window button
-      /*  $(be).find(".map_newwindow_button").click(function () {
+        $(be).find(".map_newwindow_button").click(function () {
             console.debug("map in new window");
             params = block.readMapParams();
-            var newWindow = window.open("blocks/map_newwindow.html");
-            map=block.updateMap(newWindow.document.getElementById("map_box"),params);
+            paramsString=JSON.stringify(params);
+            var newWindow = window.open("blocks/map_newwindow.html?map_params="+paramsString);
+            //map=block.updateMap(newWindow.document.getElementById("map_box"),params);
         });
-        */
+        
         // reload button
         $(be).find(".map_reload_button").click(function () {
             console.debug("reload map");
@@ -173,6 +174,22 @@
 	
 };
 
+guiBlocks.Block.prototype.updateMapId = function(id) {
+    
+    //************
+    console.debug("updateMap:", id);
+   //*************
+    data2= blocks.loadListOfItems("test1","map",data);
+    var params = jQuery.grep(data, function(x){return (x.key == mapname);})[0].val;
+    if (elem == null) {
+        elem = this.element;
+    }
+    if (map_params == null) {
+        map_params = params;
+    }
+    var map = block.updateMap(elem, params);
+};
+
 guiBlocks.Block.prototype.updateMap = function(elem,map_params) {
     
     //************
--- a/gis_gui/blocks/map_newwindow.html.pt	Wed Jan 25 20:45:13 2012 +0100
+++ b/gis_gui/blocks/map_newwindow.html.pt	Fri Jan 27 09:43:40 2012 +0100
@@ -1,15 +1,116 @@
-<html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+  tal:define="mapParams python:request.get('map_params',None)">
   <head>
     <title tal:content="template/title">Map Points in Time</title>
-    <script language="JavaScript" src="lib/jquery-1.4.min.js"> </script>
-    <script language="JavaScript" src="lib/blocks.js"> </script>
-    <script language="JavaScript" src="lib/jquery.clickmenu.pack.js"> </script>
+    <script type="text/javascript" language="JavaScript" src="lib/jquery-1.4.2.js"> </script>
+    <script type="text/javascript" language="JavaScript" src="lib/blocks.js"> </script>
+    <script type="text/javascript" language="JavaScript" src="lib/map.js"> </script>
+    <script type="text/javascript" language="JavaScript" src="lib/jquery.clickmenu.pack.js"> </script>
+    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+    <script type="text/javascript" language="JavaScript" >
+     
+ 	function updateMap(elem,map_params) {
+    
+	    //************
+	    console.debug("updateMap:", elem, ", ", map_params);
+	   //*************
+	
+		if (elem == null) {
+	        elem = this.element;
+	    }
+	    if (map_params == null) {
+	        map_params = this.params;
+	    }
+	    // update and draw the google map
+	    var le = $(elem).find(".map_box").get(0);
+	    // create empty map
+	    
+	    if (google != null) {
+	        var latlng = new google.maps.LatLng(29, 116);
+	        var mapOpts = {
+	                zoom: 2,
+	                center: latlng,
+	                mapTypeId: google.maps.MapTypeId.TERRAIN,
+	                scaleControl: true
+	        };
+	        var map = new google.maps.Map(le, mapOpts);
+	        console.debug("new google map=",map," on el=",le);
+	    }
+	    // add the layers
+	    var layerList = map_params.map_layers;
+	    for (var i = 0; i < layerList.length; i++) {
+	        if (!layerList[i].display) {
+	            continue;
+	        }
+	        var params = layerList[i].layer;
+	        var paramstr = "format=KML_URL";
+	        if (params.position_field && params.position_field != "Default") {
+	            paramstr += "&gis_id_field="+params.position_field;
+	        }
+	        if (params.color_field != "Default") {
+	            paramstr += "&color_field="+params.color_field;
+	        }
+	        if (params.geometry_field != "Default") {
+	            paramstr += "&geometry_field="+params.geometry_field;
+	        }
+	        if (params.sort_field != "Default") {
+	            paramstr += "&sort_field="+params.sort_field;
+	        }
+	        if (params.connect_line) {
+	            paramstr += "&connect_line="+params.connect_line;
+	        }
+	        var layerurl = "../db/RESTdb/db/public/" + escape(params.table) + "?" + paramstr;
+	        jQuery.get(layerurl, function (data, textStatus, XMLHttpRequest) {
+	            // function after load kml url finished
+	            console.debug("kml url loaded! this=", this );
+	            console.debug("                data=", data );
+	            console.debug("                data type=", typeof(data));
+	            if (typeof(data) == "string") {
+	                var kmlURL = data;
+	            } else {
+	                // broken, what now?
+	                return;
+	            }
+	            // render layer
+	            if (google != null) {
+	                var newMarker=new google.maps.KmlLayer(kmlURL);
+	                console.debug("new marker layer no",i,"=",newMarker);
+	                console.debug("           map=",map);
+	                newMarker.setMap(map);
+	                console.debug("Map-Update finished");
+	            }
+	        });
+	    }
+	    return map;
+	};
+	
+    function loadListOfItems(storeTag,storeType,callback) {
+        // loads list of id and type objects and executes callback function
+        var url = "../db/RESTjson/db/public/gui_objects/"+escape(storeTag)+"/"+storeType+"?recursive=true";
+
+	    //************
+	    console.debug("jsonUrl:", url);
+	   //*************
+
+        jQuery.getJSON(url,callback);   
+
+	    //************
+	    console.debug("jsoncallback:", callback);
+	   //*************
+    };
+    </script>
 
     <link href="lib/clickmenu.css"  rel="stylesheet" content="text/css"/>
     <link href="lib/blocks.css"  rel="stylesheet" content="text/css"/>
+    <link href="lib/map.css"  rel="stylesheet" content="text/css"/>
   </head>
-  <body>
+  <body tal:attributes="onload string:updateMap($here,'$mapParams')" >
+   <tal:block metal:use-macro="here/template/macros/module">
+    <tal:block metal:fill-slot="content">
+  
+      <div class="map_box">[loading...]</div>
 
-      <div class="map_box" id="map_box">[loading...]</div>
+    </tal:block>
+   </tal:block>
   </body>
 </html>
\ No newline at end of file
--- a/gis_gui/head.pt	Wed Jan 25 20:45:13 2012 +0100
+++ b/gis_gui/head.pt	Fri Jan 27 09:43:40 2012 +0100
@@ -1,6 +1,8 @@
 <div class="head">
 <span style="float:right" tal:content="python:'logged in as %s'%request.get('AUTHENTICATED_USER','')"/>
+
 <span style="float: left; width: 250px;" ><img align="left" width="100%" src="http://www.mpiwg-berlin.mpg.de/en/images/title.png" /><br/>
                                           <img align="left" width="50%" src="http://mappit.mpiwg-berlin.mpg.de/mappit/icons/mpdl_logo.png" /></span>
 <font size=5 style="margin-left:-120px;"><b>map P</b>laces <b>I</b>n <b>T</b>ime</font>
+<br/><a style="float:right" href="https://it-dev.mpiwg-berlin.mpg.de/tracs/GIS/wiki/WikiStart">Manual</a>
 </div>
\ No newline at end of file
--- a/gis_gui/index_html.html	Wed Jan 25 20:45:13 2012 +0100
+++ b/gis_gui/index_html.html	Fri Jan 27 09:43:40 2012 +0100
@@ -7,7 +7,7 @@
     <meta name="keywords" content="Mappit, Geo-Information System, Mappit, Max-Planck-Institut f. Wissenschaftsgeschichte Berlin, MPI, Falk-Juri Knauft">
     
 <!--     <title tal:content="template/title">Map Points in Time</title> -->
-    <script language="JavaScript" src="lib/jquery-1.4.min.js"> </script>
+    <script language="JavaScript" src="lib/jquery-1.4.2.js"> </script>
     <script language="JavaScript" src="lib/blocks.js"> </script>
     <script language="JavaScript" src="lib/jquery.clickmenu.pack.js"> </script>
 
--- a/zpt/GIS_schema_table.zpt	Wed Jan 25 20:45:13 2012 +0100
+++ b/zpt/GIS_schema_table.zpt	Fri Jan 27 09:43:40 2012 +0100
@@ -2,13 +2,13 @@
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml"
-  tal:define="root here/getRestDbUrl;
-        schema options/schema; table options/table;
+  tal:define="root here/getRestDbUrl; mapName python:request.get('map',None);
+        schema options/schema; table options/table; 
         kmlUrl python:here.getLiveUrl(schema=schema,table=table,useTimestamp=False);
 ">
 <!--
 <html xmlns="http://www.w3.org/1999/xhtml"
-  tal:define="root here/getRestDbUrl;
+  tal:define="root here/getRestDbUrl; 
         schema options/schema; table options/table; args options/args;
         kmlUrl python:RestDbGisAPI.getKmlUrl(here, schema=schema,table=table, args=args);
 ">
@@ -52,9 +52,13 @@
 <!--  <script src="/chinagis/javascript/geoxml.js" type="text/javascript"></script>  
   <script src="/chinagis/javascript/showSelectedInMap_kml.js" type="text/javascript"></script>
   <script src="/chinagis/javascript/labeledMarker.js" type="text/javascript"></script>-->
+  
+  <script type="text/javascript" src="lib/jquery-1.4.2.js"></script>
   <script type="text/javascript">
    var map = null;
-   function initialize(kmlUrl) {
+   
+   function initialize(kmlUrl,mapName) {
+     if (mapName=='None'){ 
        map = new google.maps.Map(document.getElementById("map_canvas"));
        map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
        var latlng = new google.maps.LatLng(29,116);
@@ -64,10 +68,31 @@
        //geocoder = new google.maps.Geocoder();
        newMarker=new google.maps.KmlLayer(kmlUrl);
        newMarker.setMap(map);
-    }
+     }
+     if (mapName!='None'){    
+       var url = "../db/RESTjson/db/public/gui_objects/test1/map?recursive=true";
+       var jqString = jQuery.getJSON(url,callback);
+       return jqString;
+       params.name = $(elem).find(".map_name").val();
+       var layers = params.map_layers;
+       for (var i = 0; i < layers.length; i++) {
+          layers[i].display = $(elem).find(".layer_display_"+i).attr("checked");
+       }
+   
+       map = new google.maps.Map(document.getElementById("map_canvas"));
+       map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
+       var latlng = new google.maps.LatLng(29,116);
+       map.setCenter(latlng); //(LatLng)
+       map.setZoom(5); // (Zoom-Level)
+
+       //geocoder = new google.maps.Geocoder();
+       newMarker=new google.maps.KmlLayer(kmlUrl);
+       newMarker.setMap(map);
+     }
+   }
   </script>
 </head>  
-<body tal:attributes="onload string:initialize('$kmlUrl')"> 
+<body tal:attributes="onload string:initialize('$kmlUrl','$mapName')" >
   <div id="map_canvas" style="width: 98%; height: 95%"> </div> 
 </body> 
 </html>
\ No newline at end of file