web/index.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Spherical Mercator</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         .olControlAttribution { bottom: 0px!important }
   8         #map {
   9             height: 512px;
  10         }
  11     </style>
  12
  13     <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
  14     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
  15     <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
  16
  17     <script src="../lib/OpenLayers.js"></script>
  18     <script type="text/javascript">
  19
  20         // make map available for easy debugging
  21         var map;
  22
  23         // avoid pink tiles
  24         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
  25         OpenLayers.Util.onImageLoadErrorColor = "transparent";
  26
  27         function init(){
  28             var proj=new OpenLayers.Projection("EPSG:4326");
  29             var options = {
  30                 projection: new OpenLayers.Projection("EPSG:900913"),
  31                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
  32                 units: "m",
  33                 numZoomLevels: 18,
  34                 maxResolution: 156543.0339,
  35                 maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
  36                                                  20037508, 20037508.34)
  37             };
  38             map = new OpenLayers.Map('map', options);
  39
  40             // create Google Mercator layers
  41             var gmap = new OpenLayers.Layer.Google(
  42                 "Google Streets",
  43                 {'sphericalMercator': true}
  44             );
  45             var gsat = new OpenLayers.Layer.Google(
  46                 "Google Satellite",
  47                 {type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 22}
  48             );
  49             var ghyb = new OpenLayers.Layer.Google(
  50                 "Google Hybrid",
  51                 {type: G_HYBRID_MAP, 'sphericalMercator': true}
  52             );
  53
  54             // create Virtual Earth layers
  55             var veroad = new OpenLayers.Layer.VirtualEarth(
  56                 "Virtual Earth Roads",
  57                 {'type': VEMapStyle.Road, 'sphericalMercator': true}
  58             );
  59             var veaer = new OpenLayers.Layer.VirtualEarth(
  60                 "Virtual Earth Aerial",
  61                 {'type': VEMapStyle.Aerial, 'sphericalMercator': true}
  62             );
  63             var vehyb = new OpenLayers.Layer.VirtualEarth(
  64                 "Virtual Earth Hybrid",
  65                 {'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
  66             );
  67
  68             // create Yahoo layer
  69             var yahoo = new OpenLayers.Layer.Yahoo(
  70                 "Yahoo Street",
  71                 {'sphericalMercator': true}
  72             );
  73             var yahoosat = new OpenLayers.Layer.Yahoo(
  74                 "Yahoo Satellite",
  75                 {'type': YAHOO_MAP_SAT, 'sphericalMercator': true}
  76             );
  77             var yahoohyb = new OpenLayers.Layer.Yahoo(
  78                 "Yahoo Hybrid",
  79                 {'type': YAHOO_MAP_HYB, 'sphericalMercator': true}
  80             );
  81
  82             // create OSM layer
  83             var mapnik = new OpenLayers.Layer.TMS(
  84                 "OpenStreetMap (Mapnik)",
  85                 "http://tile.openstreetmap.org/",
  86                 {
  87                     type: 'png', getURL: osm_getTileURL,
  88                     displayOutsideMaxExtent: true,
  89                     attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
  90                 }
  91             );
  92             // create OAM layer
  93             var oam = new OpenLayers.Layer.TMS(
  94                 "OpenAerialMap",
  95                 "http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/",
  96                 {
  97                     type: 'png', getURL: osm_getTileURL
  98                 }
  99             );
 100
 101             // create OSM layer
 102             var mapnik = new OpenLayers.Layer.TMS(
 103                 "OpenStreetMap (Mapnik)",
 104                   "http://a.tile.openstreetmap.org/",
 105                 {
 106                     type: 'png', getURL: osm_getTileURL,
 107                     displayOutsideMaxExtent: true,
 108                     attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
 109                 }
 110             );
 111             // create OSM layer
 112             var osmarender = new OpenLayers.Layer.TMS(
 113                 "OpenStreetMap (Tiles@Home)",
 114                 "http://tah.openstreetmap.org/Tiles/tile/",
 115                 {
 116                     type: 'png', getURL: osm_getTileURL,
 117                     displayOutsideMaxExtent: true,
 118                     attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
 119                 }
 120             );
 121
 122
 123             // create WMS layer
 124             /*var wms = new OpenLayers.Layer.WMS(
 125                 "World Map",
 126                 "http://world.freemap.in/tiles/",
 127                 {'layers': 'factbook-overlay', 'format':'png'},
 128                 {
 129                     'opacity': 0.4,
 130                     'isBaseLayer': false,'wrapDateLine': true
 131                 }
 132             );*/
 133
 134             // create a vector layer for drawing
 135             //var vector = new OpenLayers.Layer.Vector("Editable Vectors");
 136
 137
 138             var vector = new OpenLayers.Layer.GML("GML", "../cgi-bin/wps?service=wps&request=execute&version=1.0.0&identifier=shortestpath&datainputs=[x1=11.04787153;y1=46.50877083;x2=11.05859306;y2=46.49351736;cost=1]", {
 139                         projection: proj
 140 });
 141 /*
 142             var vector = new OpenLayers.Layer.Vector("GML", {
 143                     strategies: [new OpenLayers.Strategy.Fixed()],
 144                     protocol: new OpenLayers.Protocol.HTTP({
 145                         url: "../cgi-bin/wps?service=wps&request=execute&version=1.0.0&identifier=shortestpath&datainputs=[x1=11.04787153;y1=46.50877083;x2=11.05859306;y2=46.49351736;cost=1]",
 146                         format: new OpenLayers.Format.GML()},
 147                         projection: new OpenLayers.Projection("EPSG:4326")),
 148                 });*/
 149             map.addLayers([veaer, veroad, vehyb, gmap, gsat, ghyb,
 150                            yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender,
 151                             vector]);
 152             map.addControl(new OpenLayers.Control.LayerSwitcher());
 153             //map.addControl(new OpenLayers.Control.EditingToolbar(vector));
 154             map.addControl(new OpenLayers.Control.Permalink());
 155             map.addControl(new OpenLayers.Control.MousePosition());
 156
 157             //var bounds = new OpenLayers.Bounds(11.04787153,46.50877083,11.05859306,46.49351736)
 158             var bounds = new OpenLayers.Bounds(11,46.4,11.2,46.6)
 159             map.zoomToExtent(bounds.transform(proj, map.getProjectionObject()));
 160             //if (!map.getCenter()) {map.zoomToMaxExtent()}
 161         }
 162
 163         function osm_getTileURL(bounds) {
 164             var res = this.map.getResolution();
 165             var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
 166             var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
 167             var z = this.map.getZoom();
 168             var limit = Math.pow(2, z);
 169
 170             if (y < 0 || y >= limit) {
 171                 return OpenLayers.Util.getImagesLocation() + "404.png";
 172             } else {
 173                 x = ((x % limit) + limit) % limit;
 174                 return this.url + z + "/" + x + "/" + y + "." + this.type;
 175             }
 176         }
 177
 178     </script>
 179   </head>
 180   <body onload="init()">
 181     <h1 id="title">Spatial Database</h1>
 182
 183     <div id="tags">
 184     </div>
 185     <p id="shortdesc">
 186         Mostriamo sulla mappa tanti bei sentierini
 187     </p>
 188     <div id="map" class="smallmap"></div>
 189
 190     <div id="docs">
 191     </div>
 192   </body>
 193 </html>
 194
 195
 196