git.maemo.org Git - navit-package/blob - navit/script/download_index.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">\r
   2   <head>\r
   3     <title>Planet Extraction</title>\r
   4     <style type="text/css">\r
   5         html, body {\r
   6           margin: 0;\r
   7           padding: 1em;\r
   8           font: 0.9em Verdana, Arial, sans serif;\r
   9         }\r
  10         input, select, textarea {\r
  11           font: 1em Verdana, Arial, sans serif;\r
  12         }\r
  13         .input {\r
  14           border: none;\r
  15           width: 100px;\r
  16         }\r
  17         .bbox {\r
  18           font-size: 12px;\r
  19           color: #000;\r
  20           background-color: #fff;\r
  21           width: 300px;\r
  22           border: 1px solid gray;\r
  23         }\r
  24         .button {\r
  25           width: 200px;\r
  26           height: 50px;\r
  27           font-weight: bold;\r
  28         }\r
  29         #map {\r
  30           float: left;\r
  31                   width: 500px;\r
  32           height: 500px;\r
  33           border: 1px solid gray;\r
  34         }\r
  35         #controls {\r
  36           float: left;\r
  37           \r
  38         }\r
  39     </style>\r
  40     <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>\r
  41     <script type="text/javascript">\r
  42         var map, polygonControl, polygonLayer, bbox_set;\r
  43         \r
  44         OpenLayers.Util.onImageLoadErrorColor = "transparent";\r
  45         function init(){\r
  46                 map = new OpenLayers.Map('map');\r
  47                 \r
  48                 var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", \r
  49                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); \r
  50                 \r
  51                 polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");\r
  52                 \r
  53                 map.addLayers([wmsLayer, polygonLayer]);\r
  54                 map.addControl(new OpenLayers.Control.LayerSwitcher());\r
  55                 map.addControl(new OpenLayers.Control.MousePosition());\r
  56                 \r
  57                 polyOptions = {sides: 4, irregular: true};\r
  58                 polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,\r
  59                 OpenLayers.Handler.RegularPolygon,\r
  60                 {handlerOptions: polyOptions});\r
  61                 //alert(polygonControl);\r
  62                 \r
  63                 map.addControl(polygonControl);\r
  64                 \r
  65                 polygonControl.featureAdded=featureInsert;\r
  66                 \r
  67                 map.setCenter(new OpenLayers.LonLat(0, 0), 3);\r
  68                 \r
  69                 document.getElementById('noneToggle').checked = true;\r
  70                 //document.getElementById('irregularToggle').checked = false;\r
  71                 \r
  72                 //var polyOptions = {sides: 4, irregular: true};\r
  73                 //polygonControl.handler.setOptions(polyOptions);\r
  74         }\r
  75         \r
  76         function featureInsert(feature){\r
  77                 var old=[];\r
  78                 for (var i = 0; i < polygonLayer.features.length; i++) {\r
  79                         if (polygonLayer.features[i] != feature) {\r
  80                                 old.push(polygonLayer.features[i]);\r
  81                         }\r
  82                 }\r
  83                 polygonLayer.destroyFeatures(old);\r
  84                 \r
  85                 var bounds = feature.geometry.getBounds();\r
  86                 \r
  87                 document.form.bounds_top.value = bounds.top;\r
  88                 document.form.bounds_right.value = bounds.right;\r
  89                 document.form.bounds_btm.value = bounds.bottom;\r
  90                 document.form.bounds_left.value = bounds.left;\r
  91                 bbox_set=true;\r
  92         }\r
  93         function download() {\r
  94                 var bbox = document.form.bounds_left.value + "," +\r
  95                            document.form.bounds_btm.value + "," +\r
  96                            document.form.bounds_right.value + "," +\r
  97                            document.form.bounds_top.value;\r
  98                 if (bbox_set) {\r
  99                         location.href="http://maps.navit-project.org/api/map?bbox=" + bbox;\r
 100                 } else {\r
 101                         alert("Please select a bounding box first\n");\r
 102                 }\r
 103         }\r
 104         function setOptions(options) {\r
 105                 polygonControl.handler.setOptions(options);\r
 106         }\r
 107         function setSize(fraction) {\r
 108                 var radius = fraction * map.getExtent().getHeight();\r
 109                 polygonControl.handler.setOptions({radius: radius,\r
 110                 angle: 0});\r
 111         }\r
 112     </script>\r
 113   </head>\r
 114   <body onload="init()">\r
 115     <h2>Planet extract</h2>\r
 116     <div id="map"></div>\r
 117     <div id="controls">\r
 118         <ul style="list-style:none;"><b>Map Controls</b>\r
 119             <li>\r
 120                 <input type="radio" name="type"\r
 121                        value="none" id="noneToggle"\r
 122                        onclick="polygonControl.deactivate()"\r
 123                        checked="checked" />\r
 124                 <label for="noneToggle">navigate</label>\r
 125             </li>\r
 126             <li>\r
 127                 <input type="radio" name="type"\r
 128                        value="polygon" id="polygonToggle"\r
 129                        onclick="polygonControl.activate()" />\r
 130                 <label for="polygonToggle">select</label>\r
 131             </li>\r
 132         </ul>\r
 133         <ul style="list-style:none"><b>Fetch box</b>\r
 134                 <form name="form">\r
 135                 <li>Top Right: <input type="text" name="bounds_top" class="input">,\r
 136                                            <input type="text" name="bounds_right" class="input"></li>\r
 137                         <li>Bottom left: <input type="text" name="bounds_btm" class="input">,\r
 138                                          <input type="text" name="bounds_left" class="input"></li>\r
 139                 </form>\r
 140                         <li>&nbsp;</li>\r
 141                         <li><input type="button" class="button" value="Get map!" onclick="javascript:download()"></li>\r
 142         </ul>\r
 143     </div>\r
 144   </body>\r
 145 </html>\r