1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta name="generator" content="HTML Tidy, see www.w3.org" />
5: <title>Snowdon Hiking Trip</title>
6:
7:
8:
9:
10: <script type="text/javascript" src="http://maps.live.com/veapi.ashx?v=1.3.1115150037.31"><!-- 11:
12: <script type="text/javascript" >
13: <!--
14: 15: 16: var map = null;
17: var timeoutID = null;
18: var iInterval = 3000;
19: var iPansPerStage = 3;
20: var arLongLat = new Array();
21: var arInterValIDs = new Array();
22: var mapStart = null;
23: var iZoomInLevel = 17;
24: var iZoomOutLevel = 14;
25: var mapStyle = VEMapStyle.Aerial;
26: var bMapStatic = true;
27: var sMapElID = "mapControlDiv";
28:
29: iInterval = 3000; 30: iPansPerStage = 3;
31: iZoomInLevel = 17;
32: iZoomOutLevel = 14;
33: mapStyle = VEMapStyle.Aerial;
34: bMapStatic = true;
35: sMapElID = "mapControlDiv";
36: mapStart = new VELatLong(53.080545, -4.020875);
37: arLongLat[0] = new VELatLong(53.080545, -4.020875);
38: arLongLat[1] = new VELatLong(53.078426,-4.020848);
39: arLongLat[2] = new VELatLong(53.076773,-4.021497);
40: arLongLat[3] = new VELatLong(53.0755,-4.02131);
41: arLongLat[4] = new VELatLong(53.074053,-4.021969);
42: arLongLat[5] = new VELatLong(53.073396,-4.02448);
43: arLongLat[6] = new VELatLong(53.073579,-4.02779);
44: arLongLat[7] = new VELatLong(53.072996,-4.030998);
45: arLongLat[8] = new VELatLong(53.072203,-4.033401);
46: arLongLat[9] = new VELatLong(53.071069,-4.035493);
47: arLongLat[10] = new VELatLong(53.070898,-4.037773);
48: arLongLat[11] = new VELatLong(53.071723,-4.038916);
49: arLongLat[12] = new VELatLong(53.072767,-4.040112);
50: arLongLat[13] = new VELatLong(53.07352,-4.042234);
51: arLongLat[14] = new VELatLong(53.072913,-4.043537);
52: arLongLat[15] = new VELatLong(53.072033,-4.043854);
53: arLongLat[16] = new VELatLong(53.071187,-4.045018);
54: arLongLat[17] = new VELatLong(53.071114,-4.045951);
55: arLongLat[18] = new VELatLong(53.070075,-4.04777);
56: arLongLat[19] = new VELatLong(53.069057,-4.051238);
57: arLongLat[20] = new VELatLong(53.069657,-4.054387);
58: arLongLat[21] = new VELatLong(53.07075,-4.056296);
59: arLongLat[22] = new VELatLong(53.070998,-4.058045);
60: arLongLat[23] = new VELatLong(53.070721,-4.061071);
61: arLongLat[24] = new VELatLong(53.070721,-4.061071);
62: arLongLat[25] = new VELatLong(53.071961,-4.064064);
63: arLongLat[26] = new VELatLong(53.072245,-4.064729);
64: arLongLat[27] = new VELatLong(53.071486, -4.06702);
65:
66:
67: function loadMAP()
68: {
69:
70: map = new VEMap(sMapElID);
71:
72: try{
73:
74: map.LoadMap(mapStart,iZoomInLevel,mapStyle,bMapStatic);
75: }catch(e){
76: 77:
78: }
79:
80:
81: 82: 83: 84: 85:
86: var iPanPoints = arLongLat.length;
87: var iStages = Math.ceil(iPanPoints/iPansPerStage);
88:
89: 90: var toolbarUL = document.createElement("ul");
91: toolbarUL.setAttribute("style", "position:absolute; top: 0; right: 0;");
92: toolbarUL.setAttribute("id", "mapToolbar");
93: var toolbarLIPanStartPanning = document.createElement("li");
94: var toolbarLIPanAStartPanning = document.createElement("a");
95: toolbarLIPanAStartPanning.setAttribute("href", "#");
96: toolbarLIPanAStartPanning.innerHTML = "Start Panning";
97: toolbarLIPanAStartPanning.setAttribute("style", "display: block; width: 150px; height: 30px;");
98: toolbarLIPanStartPanning.appendChild(toolbarLIPanAStartPanning);
99: toolbarUL.appendChild(toolbarLIPanStartPanning);
100:
101: addEvent(toolbarLIPanStartPanning,'click',startPanning,false);
102:
103:
104: for(var i=1;i<=iStages;i++)
105: {
106: var toolbarLIPan = document.createElement("li");
107: var toolbarLIPanA = document.createElement("a");
108: toolbarLIPanA.setAttribute("href", "#stage"+i);
109: toolbarLIPanA.setAttribute("id", "pan"+i);
110: toolbarLIPanA.innerHTML = "Stage "+i;
111: toolbarLIPanA.setAttribute("style", "display: block; width: 150px; height: 30px;");
112: toolbarLIPan.appendChild(toolbarLIPanA);
113: toolbarUL.appendChild(toolbarLIPan);
114: addEvent(toolbarLIPanA,'click',panToStage,false);
115: }
116:
117: var toolbarLIPanStart = document.createElement("li");
118: var toolbarLIPanAStart = document.createElement("a");
119: toolbarLIPanAStart.setAttribute("href", "#");
120: toolbarLIPanAStart.innerHTML = "Back to Start";
121: toolbarLIPanAStart.setAttribute("style", "display: block; width: 150px; height: 30px;");
122: toolbarLIPanStart.appendChild(toolbarLIPanAStart);
123: toolbarUL.appendChild(toolbarLIPanStart);
124: addEvent(toolbarLIPanAStart,'click',panToStart,false);
125:
126:
127: var toolbarLIPanZoomIn = document.createElement("li");
128: var toolbarLIPanAZoomIn = document.createElement("a");
129: toolbarLIPanAZoomIn.setAttribute("href", "#");
130: toolbarLIPanAZoomIn.innerHTML = "Zoom In";
131: toolbarLIPanAZoomIn.setAttribute("style", "display: block; width: 150px; height: 30px;");
132: toolbarLIPanZoomIn.appendChild(toolbarLIPanAZoomIn);
133: toolbarUL.appendChild(toolbarLIPanZoomIn);
134: addEvent(toolbarLIPanAZoomIn,'click',zoomIn,false);
135:
136:
137: var toolbarLIPanZoomOut = document.createElement("li");
138: var toolbarLIPanAZoomOut = document.createElement("a");
139: toolbarLIPanAZoomOut.setAttribute("href", "#");
140: toolbarLIPanAZoomOut.innerHTML = "Zoom Out";
141: toolbarLIPanAZoomOut.setAttribute("style", "display: block; width: 150px; height: 30px;");
142: toolbarLIPanZoomOut.appendChild(toolbarLIPanAZoomOut);
143: toolbarUL.appendChild(toolbarLIPanZoomOut);
144: addEvent(toolbarLIPanAZoomOut,'click',zoomOut,false);
145:
146:
147:
148:
149:
150:
151: var mapDiv = document.getElementById(sMapElID);
152: insertAfter(document.getElementById('body'), toolbarUL, mapDiv)
153:
154: var copyright = getElementsByClass('Copyright',document,'div');
155: var poweredBy = getElementsByClass('PoweredByLogo',document,'img');
156:
157: try{
158: var throwawayForeCopyright = mapDiv.removeChild(copyright[0]);
159: var throwawayBackCopyright = mapDiv.removeChild(copyright[1]);
160: var throwawayPoweredBy = mapDiv.removeChild(poweredBy[0]);
161: }catch(err)
162: {
163: 164: }
165:
166:
167: }
168:
169: function zoomOut()
170: {
171: var iPanPoints = arLongLat.length;
172: var iStages = Math.ceil(iPanPoints/iPansPerStage);
173: var iHalfStages = Math.ceil(iStages/2);
174: panToStageGivenNumber(iHalfStages);
175: map.SetZoomLevel(iZoomOutLevel);
176: }
177:
178: function zoomIn()
179: {
180: map.SetZoomLevel(iZoomInLevel);
181: }
182:
183: function panToStage()
184: {
185: var iLongLatStageIndex = this.getAttribute("href");
186: iLongLatStageIndex = iLongLatStageIndex.substring(6);
187: panToStageGivenNumber(iLongLatStageIndex);
188: }
189:
190: function panToStageGivenNumber(iLongLatStageIndex)
191: {
192:
193: var iEndLongLat = iLongLatStageIndex * iPansPerStage;
194: var iStartLongLat = iEndLongLat - iPansPerStage;
195:
196: for(var j=iStartLongLat;j<=iEndLongLat;j++)
197: {
198: if(j < arLongLat.length)
199: {
200: var objLongLat = arLongLat[j];
201: panMap(objLongLat);
202: }
203: }
204:
205: var iPanPoints = arLongLat.length;
206: var iStages = Math.ceil(iPanPoints/iPansPerStage);
207:
208:
209: try
210: {
211: clearInterval(arInterValIDs[iLongLatStageIndex]);
212: }
213: catch(err)
214: {
215: 216: }
217:
218: }
219:
220:
221:
222: function startPanning()
223: {
224: var iPanPoints = arLongLat.length;
225: var iStages = Math.ceil(iPanPoints/iPansPerStage);
226: for(var k=1;k<=iStages;k++)
227: {
228: if(k==1)
229: {
230: arInterValIDs[k] = setInterval("panToStageGivenNumber('"+k+"')", 10);
231: }
232: else
233: {
234: arInterValIDs[k] = setInterval("panToStageGivenNumber('"+k+"')", iInterval * k);
235: }
236: }
237: }
238:
239:
240: function panToStart()
241: {
242: panMap(mapStart);
243: }
244:
245: function panMap(longlat)
246: {
247: map.PanToLatLong(longlat);
248: }
249:
250:
251:
252: function addEvent(elm, evType, fn, useCapture) {
253: if (elm.addEventListener) {
254: elm.addEventListener(evType, fn, useCapture);
255: return true;
256: }
257: else if (elm.attachEvent) {
258: var r = elm.attachEvent('on' + evType, fn);
259: return r;
260: }
261: else {
262: elm['on' + evType] = fn;
263: }
264: }
265:
266: function addLoadEvent(func) {
267: var oldonload = window.onload;
268: if (typeof window.onload != 'function') {
269: window.onload = func;
270: }
271: else {
272: window.onload = function() {
273: oldonload();
274: func();
275: }
276: }
277: }
278:
279:
280: function insertAfter(parent, node, referenceNode) {
281: parent.insertBefore(node, referenceNode.nextSibling);
282: }
283:
284: function getElementsByClass(searchClass,node,tag) {
285: var classElements = new Array();
286: if ( node == null )
287: node = document;
288: if ( tag == null )
289: tag = '*';
290: var els = node.getElementsByTagName(tag);
291: var elsLen = els.length;
292: var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
293: for (i = 0, j = 0; i < elsLen; i++) {
294: if ( pattern.test(els[i].className) ) {
295: classElements[j] = els[i];
296: j++;
297: }
298: }
299: return classElements;
300: }
301:
302:
303: addLoadEvent(loadMAP);
304:
305: 306: 307: 308: 309:
310:
311: -->
312: </script>
313: <style type="text/css">
314: #mapControlDiv{margin: 0 auto;}
315: #mapToolbar{position:absolute; top: 0; right: 0; width: 150px; background-color: #EEE; border: 3px double #AAA; margin: 50px 50px 0 0;}
316: </style>
317: </head>
318:
319: <body id="body">
320: <h1>
321: <a href="http://local.live.com/">Local.live.com</a> flyover <a href="http://local.live.com/default.aspx?v=2&cp=53.068415~-4.076303&style=h&lvl=14&sp=aN.svkdwfgnq1ny_Snowdon%252c%2520W"> Mt. Snowdon in North Wales</a>, UK
322: </h1>
323: <div id="mapControlDiv" style="position:relative;width:640px;height:550px;">
324: <p>If you have javascript disabled you won't be able to see the demo.
325: Also if you're using Safari,
326: the local.live.com Javascript API does not work so you won't see it either.</p>
327:
328: </div>
329: <h2>
330: Explantion
331: </h2>
332: <p>
333: Use the StartPanning link to see the flyover effect.
334: You can also step through the flyover in stages.
335: Feel free to use the javascript. It's pretty simple to use,
336: with config values set away from the code.
337: The code works in IE6, Firefox and Opera.
338: </p>
339: <p>
340: Last weekend I walked most of Mt. Snowdon.
341: The next day I wanted to show some friends where I went and what route I took.
342: It was a pain panning through the whole route so I wrote a ton of javascript using the Virtual Earth API
343: to do it automatically.
344: </p>
345: <h2>
346: Links
347: </h2>
348: <ul>
349: <li>
350: <a href="SnowdonMashupViewSource.html">
351: View Highlighted Page source
352: </a>
353: hightlighting by <a href="http://hvge.sk/scripts/fshl/">http://hvge.sk/scripts/fshl/</a>
354: </li>
355:
356: <li>
357: <a href="http://msdn.microsoft.com/msdnmag/issues/06/09/EarthlyDelights/default.aspx">
358: http://msdn.microsoft.com/msdnmag/issues/06/09/EarthlyDelights/default.aspx
359: </a>
360: </li>
361: <li>
362: <a href="http://local.live.com/help/en-us/URLAPI.htm">
363: http://local.live.com/help/en-us/URLAPI.htm
364: </a>
365: </li>
366: </ul>
367: <p>Cheers guys - dont forget to <a href="http://www.philroche.net">checkout my site</a>
368: (<a href="http://www.philroche.net">http://www.philroche.net</a>)- Phil </p>
369: </body>
370: </html>
371:
372:
Parsed by FSHL V0.4.19 in 0.172 sec