view gis_gui/blocks/map_newwindow.html.pt @ 268:f25ee0424ce6

Open Map in new Window
author fknauft
date Fri, 27 Jan 2012 09:43:40 +0100
parents 0a1dee507612
children 3a5d51c60e40
line wrap: on
line source

<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 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 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>

    </tal:block>
   </tal:block>
  </body>
</html>