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: <!--http://dev.virtualearth.net/mapcontrol/v3/MapControl.js-->
  7: <!--http://maps.live.com/veapi.ashx?v=1.3.0908172755.52-->
  8: <!--http://dev.virtualearth.net/mapcontrol/v4/MapControl.js-->
  9: <!--http://maps.live.com/veapi.ashx?v=1.3.1115150037.31-->
 10: <script type="text/javascript" src="http://maps.live.com/veapi.ashx?v=1.3.1115150037.31"><!--//--></script>
 11: 
 12: <script type="text/javascript" >
 13: <!--
 14: //http://local.live.com/help/en-us/URLAPI.htm
 15: //http://msdn.microsoft.com/msdnmag/issues/06/09/EarthlyDelights/default.aspx
 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: /* ----------- Editable Settings -----------*/
 29: iInterval = 3000;//miliseconds
 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:        // console.log('error loading map');
 77:       
 78:     }
 79: 
 80:     
 81:     /*
 82:     iInterval
 83:     iPansPerStage
 84:     arLongLat
 85:     */
 86:     var iPanPoints = arLongLat.length;
 87:     var iStages = Math.ceil(iPanPoints/iPansPerStage);
 88:     
 89:     //create ul
 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:         //alert(err)
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:         //Handle errors here
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: Start
308: http://local.live.com/default.aspx?v=2&cp=53.080545~-4.020875&style=h&lvl=18&sp=&cid=41B96DB5C3F9BCF1!101
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&amp;cp=53.068415~-4.076303&amp;style=h&amp;lvl=14&amp;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