source: subversion/applications/routing/pyroute_webGUI/slippy.html @ 27976

Last change on this file since 27976 was 8116, checked in by ojw, 11 years ago

outline code for doing transparent tile overlays

File size: 6.3 KB
Line 
1<html><head><title>Pyroute webGUI</title>
2  <script src="http://openlayers.org/api/OpenLayers.js"></script>
3  <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
4  <script type="text/javascript">
5  var lat = "";
6        var lon = "";
7        var zoom = "";
8  if (lat=="") lat=52.3
9        if (lon=="") lon=-0.5
10        if (zoom=="") zoom=8
11        lat=parseFloat(lat)
12        lon=parseFloat(lon)
13        zoom=parseInt(zoom)
14  var projMap = new OpenLayers.Projection("EPSG:900913")
15  var projDisp = new OpenLayers.Projection("EPSG:4326");
16  var map;
17  var markers;
18  var menu = null;
19 
20  OpenLayers.Control.Click
21    = OpenLayers.Class(OpenLayers.Control,
22    {
23    defaultHandlerOptions: {
24      'single': true,
25      'double': false,
26      'pixelTolerance': 0,
27      'stopSingle': false,
28      'stopDouble': false
29    },
30    initialize:
31      function(options)
32        {
33        this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
34        OpenLayers.Control.prototype.initialize.apply(this, arguments);
35        this.handler
36          = new OpenLayers.Handler.Click(
37            this,
38            {
39            'click': this.trigger
40            },
41            this.handlerOptions);
42        },
43     trigger:
44      function(e)
45        {
46        var xy = map.getLonLatFromViewPortPx(e.xy);
47        var lonlat = map.getLonLatFromViewPortPx(e.xy);
48        lonlat.transform(projMap,projDisp);
49
50        if(menu != null)
51          menu.hide();
52       
53        menu = new OpenLayers.Popup(
54          "chicken",
55          xy,
56          new OpenLayers.Size(170,200),
57          newMenu(lonlat),
58          true);
59        menu.border = "2px solid green";
60        map.addPopup(menu);
61               
62        // Click position in lat/long coordinates
63        //  alert("You clicked near " + lonlat.lat + " N, " + lonlat.lon + " E");
64        }
65    });
66
67  function waypointHtml(lat,lon,id)
68  {
69    var text = "<h3>Waypoint #"+id+"</h3>";
70    text += "<p>"+formatNum(lat) + ", " + formatNum(lon)+"</p>";
71    text = "<div class='wpt' id=wpt_'"+id+"'>"+text+"</div>";
72    return(text);
73  }
74
75  function addItem(type,text,id)
76  {
77    d = document.getElementById(type);
78    text = "<div class='"+type+"' id='"+type+"_"+id+"'>"+text+"</div>";
79    if(d.innerHTML == "None")
80      d.innerHTML = text;
81    else
82      d.innerHTML += text;
83  }
84  function setRoute(type,lat,lon,id)
85  {
86    var text = "<p>"+formatNum(lat) + ", " + formatNum(lon)+"</p>";
87
88    d = document.getElementById("rte_"+type);
89    d.innerHTML = "<div class='"+type+"' id='"+type+"_"+id+"'>"+text+"</div>";
90   
91  }
92  function showRouteButton()
93  {
94    var d = document.getElementById("rte_btn");
95    d.style.display = '';
96  }
97  function addRouteMarker(lat,lon, type)
98  {
99    var size = new OpenLayers.Size(10,17);
100    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
101    var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',size,offset);
102    var pos = new OpenLayers.LonLat(lon, lat);
103    pos.transform(projDisp, projMap);
104   
105    if(type == 1)
106    {
107      addItem("wpt", waypointHtml(lat,lon,0));
108    }
109    if(type == 2)
110    {
111      document.route.start.value = formatNum(lat) + "," + formatNum(lon);
112      setRoute("start", lat,lon, 0);
113    }
114    if(type == 3)
115    {
116      document.route.end.value = formatNum(lat) + "," + formatNum(lon);
117      setRoute("end", lat,lon, 0);
118
119      if(document.route.start.value)
120        showRouteButton();
121    }
122   
123    marker = new OpenLayers.Marker(pos,icon);
124    marker.events.register(
125      'mousedown',
126      marker,
127      function(evt)
128      {
129        alert(this.icon.url);
130        OpenLayers.Event.stop(evt);
131      });
132   
133    markers.addMarker(marker);
134    if(menu != null)
135      {
136      menu.hide();
137      menu = null;
138      }
139    }
140  function formatNum(num)
141  {
142    return(Math.floor(num * 10000.0) / 10000.0);
143  }
144  function formatPos(lonlat)
145  {
146    return(formatNum(lonlat.lat) + ", " + formatNum(lonlat.lon));
147  }
148  function menuItem(lonlat, type, text)
149  {
150    var js = "addRouteMarker("+formatPos(lonlat)+","+type+");return(false);";
151    return("<div class='menu_item'><a href='' onclick='"+js+"'>"+text+"</a></div>");
152  }
153  function newMenu(lonlat)
154  {
155    var a = "" + formatPos(lonlat);
156   
157    a += menuItem(lonlat,1,"Add waypoint");
158    a += menuItem(lonlat,2,"Set route start");
159    a += menuItem(lonlat,3,"Set route end");
160    a += "<div class='menu_item'><a href=''>Download data</a></div>";
161    a += "<div class='menu_item'><a href=''>Download images</a></div>";
162    return(a);
163  }
164  // Initialise the map
165  function init()
166    {
167    map = new OpenLayers.Map(
168      "map",
169      {
170      controls:
171        [
172        new OpenLayers.Control.Navigation(),
173        new OpenLayers.Control.Permalink(),
174        new OpenLayers.Control.LayerSwitcher(),
175        new OpenLayers.Control.PanZoomBar()
176        ],
177      maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
178      maxResolution: 156543.0399,
179      numZoomLevels: 19,
180      units: 'meters',
181      projection: projMap,
182      displayProjection: projDisp
183      });
184               
185
186    layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
187    map.addLayer(layerTilesAtHome);
188
189    layerOverlay = new OpenLayers.Layer.OSM(
190      "Route",
191      "tile/base/",
192      {
193        isBaseLayer: false,
194        type:'png',
195      },
196      {'buffer':0});
197    map.addLayer(layerOverlay);
198
199    markers = new OpenLayers.Layer.Markers( "Markers" );
200    map.addLayer(markers);
201   
202    var lonLat = new OpenLayers.LonLat(lon, lat).transform(projDisp, projMap);
203    map.setCenter(lonLat, zoom);
204
205    var click = new OpenLayers.Control.Click();
206    map.addControl(click);
207    click.activate();
208    }
209
210  </script>
211</head>
212<body onload="init();">
213<table border=1 style="width:100%; height:100%"><tr>
214<td><div id="map" style="width:100%; height:100%"></div></td>
215<td width="200" valign="top">
216
217<h2>Waypoints</h2>
218<div id="wpt">None</div>
219
220<h2>Route</h2>
221<div id="rte_start"></div>
222<div id="rte_via"></div>
223<div id="rte_end"></div>
224<div id="rte_misc"></div>
225<div id="rte_control">
226<form name="route" action="route" method="get">
227<input type="hidden" name="start" value="" />
228<input type="hidden" name="end" value="" />
229<input type="hidden" name="type" value="" />
230<div id="rte_btn" style="display:none"><input type="submit" value="Calculate route" /></div>
231</form>
232</div>
233
234<h2>Help</h2><div><a href="">Help</a></div>
235</td>
236</tr></table>
237</body>
238</html>
Note: See TracBrowser for help on using the repository browser.