view gis_gui/blocks/map_newwindow.html.pt @ 270:3a5d51c60e40

Open Map in new Window
author fknauft
date Fri, 27 Jan 2012 20:02:41 +0100
parents f25ee0424ce6
children
line wrap: on
line source

<html xmlns="http://www.w3.org/1999/xhtml"
  tal:define="mapId python:request.get('map_id',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  loadListOfItems(storeTag,storeType) {
    	var url = "../db/RESTjson/db/public/gui_objects/"+escape(storeTag)+"/"+storeType+"?recursive=true";
     	data_ret= jQuery.get(url, function(data) {
            var ret;
            data = JSON.parse(data);
            for (var i=0; i < data.length; i++) {
                var key = data[i].key;
                var val = data[i].val;
               // var name = val.name;
               // console.debug("map",i," key=",key," value=",name);
               // ret.append('<option value="'+key+'">'+name+'<'+'/option>');
                };
            return data; 
        }); 
        return data_ret;
    } 
 	function initialize(map_id) {
 	    var data;
        data=loadListOfItems("test1","map");
        var statusText;
        while (statusText!="OK"){
	        try{
	        	statusText=data.statusText;
	            statusText="OK";
	            }
	        catch(err){
	        	statusText="";
	        	}
        };
     	var data_string = data.responseText;	    
 	    data=JSON.parse(data_string);	
        var params;
        for (var i=0; i < data.length; i++) {
                var key = data[i].key;
                var val = data[i].val;
                if (key = map_id) {
                	params= val;
                	break;
                }
        };
	    //************
	    console.debug("initialize:" , map_id);
	   //*************
	
		var elem = document.getElementById("map_box");
		var map_params;
	    map_params = params;
	  
	    // update and draw the google map
	    var le = $(elem).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;
	};
	
    </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:initialize('$mapId')" >
      <div class="content">
      	<div id="map_box">[loading...]</div>
      </div>
  </body>
</html>