web/index.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3       <title>OpenLayers GML Layer Example</title>
   4         <link rel="stylesheet" href="style.css" type="text/css" />
   5         <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
   6         <script src="../OpenLayers.js"></script>
   7         <script type="text/javascript">
   8             var lon = 5;
   9             var lat = 40;
  10             var zoom = 7;
  11             var path;
  12             var proj;
  13             var numclick = 0;
  14             var click;
  15             var map, layer, markers;
  16             var markersList=new Array();
  17             var points=new Array();
  18             var image;
  19             OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
  20                 defaultHandlerOptions: {
  21                     'single': true,
  22                     'double': false,
  23                     'pixelTolerance': 0,
  24                     'stopSingle': false,
  25                     'stopDouble': false
  26                 },
  27
  28                 initialize: function(options) {
  29                     this.handlerOptions = OpenLayers.Util.extend(
  30                         {}, this.defaultHandlerOptions
  31                     );
  32                     OpenLayers.Control.prototype.initialize.apply(
  33                         this, arguments
  34                     );
  35                     this.handler = new OpenLayers.Handler.Click(
  36                         this, {
  37                             'click': this.trigger
  38                         }, this.handlerOptions
  39                     );
  40                 },
  41
  42                 trigger: function(e) {
  43                     var lonlat = map.getLonLatFromPixel(e.xy);
  44                     var size = new OpenLayers.Size(10,17);
  45                     var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  46                     var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',size,offset);
  47                     markersList[numclick]=new OpenLayers.Marker(new OpenLayers.LonLat(lonlat.lon,lonlat.lat),icon);
  48                     markers.addMarker(markersList[numclick]);
  49                     points[numclick]=lonlat;
  50                     points[numclick].transform(map.getProjectionObject(),proj);
  51                     numclick++;
  52                 }
  53             });
  54
  55             function init(){
  56                  image=document.getElementById("image");
  57                  //OpenLayers.ProxyHost="/proxy/?url=proxy.unitn.it:3128";
  58                  proj=new OpenLayers.Projection("EPSG:4326");
  59                  var options = {
  60                         projection: new OpenLayers.Projection("EPSG:900913"),
  61                         displayProjection: new OpenLayers.Projection("EPSG:4326"),
  62                         units: "m",
  63                         numZoomLevels: 18,
  64                         maxResolution: 156543.0339,
  65                         maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
  66                                                  20037508, 20037508.34)
  67                  };
  68                  map = new OpenLayers.Map('map',options);
  69                  layer = new OpenLayers.Layer.VirtualEarth( "VE",{'type': VEMapStyle.Aerial, 'sphericalMercator': true});
  70                  map.addLayer(layer);
  71                  var bounds = new OpenLayers.Bounds(11,46.4,11.2,46.6)
  72                  map.zoomToExtent(bounds.transform(proj, map.getProjectionObject()));
  73                  markers = new OpenLayers.Layer.Markers( "Markers" );
  74                  map.addLayer(markers);
  75                  click=new OpenLayers.Control.Click();
  76                  map.addControl(click);
  77                  click.activate();
  78             }
  79             function reset(){
  80                  numclick = 0;
  81                  click.activate();
  82                  for(i=0;i<markersList.length;i++){
  83                         markers.removeMarker(markersList[i]);
  84                  }
  85                  map.removeLayer(path);
  86             }
  87             function compute(){
  88                  click.deactivate();
  89                  var queryPoints="";
  90                  for(i=0;i<points.length-1;i++){
  91                     queryPoints+=points[i].lon+","+points[i].lat+",";
  92                  }
  93                  queryPoints+=points[points.length-1].lon+","+points[points.length-1].lat;
  94                  try{
  95                         path=new OpenLayers.Layer.GML("GML", "cgi-bin/wps.py?service=wps&request=execute&version=1.0.0&identifier=shortestpath&datainputs=[cost=8923;coord="+queryPoints+"]", {projection:proj});
  96                         map.addLayer(path);
  97                         image.innerHTML="<img name=\"image\" src=\"profile.png\">";
  98                         refreshImage();
  99                  }catch(e){
 100                         alert(e);
 101                  }
 102             }
 103             function refreshImage(){
 104                  try{
 105                  tmp = new Date();
 106                  tmp = "?"+tmp.getTime()
 107                  document.images["image"].src = "profile.png"+tmp
 108                  setTimeout("refreshImage()", 3000);
 109                  }catch(e){
 110                        alert(e);
 111                  }
 112             }
 113         </script>
 114   </head>
 115   <body onload="init()">
 116       <h1 id="title">GML Layer Example</h1>
 117
 118       <div id="tags"></div>
 119
 120       <p id="shortdesc">
 121           Loads locally stored GML vector data on a basemap. Includes GML example file.
 122     </p>
 123     <div id="image"></div>
 124     <div id="map" class="smallmap"></div>
 125     <input type="submit" value="Reset!" onclick="reset()">
 126     <input type="submit" value="Compute!" onclick="compute()">
 127   </body>
 128 </html>
 129