Differences between revisions 3 and 4
Revision 3 as of 2008-08-10 06:53:25
Size: 603
Comment:
Revision 4 as of 2008-08-10 08:13:58
Size: 356
Comment: fixt
Deletions are marked like this. Additions are marked like this.
Line 8: Line 8:
'''Bugs''':
 * Doesn't return updated coordinates when changing locations in the panorama viewer. Zoom in on the map, pick your location the best you can and set your perspective. (http://code.google.com/p/gmaps-api-issues/issues/detail?id=459)

Download: GetStreetView.py
Usage: <<GetStreetView>>
Description: GetStreetView: A tool to extract Street View data for embedding using GoogleStreetView

   1 # -*- coding: iso-8859-1 -*-
   2 """
   3     MoinMoin - GetStreetView Macro
   4     Tool to get lat, lng, yaw, pitch and zoom for GoogleStreetView macro.
   5     by JasonMcArthur <jason@personaltelco.net>
   6 """
   7 
   8 def execute(macro,text):
   9     gkey = 'ABQIAAAA7rwZfsyEYZknlS0QWmZI4RQUexDMtc4eREioiWSpX_Y7fpoKghQhUCefr4eJwudYofs3YH9eyyZ3_g'     
  10     gkey2 = 'ABQIAAAA7rwZfsyEYZknlS0QWmZI4RRyEbBFkcIcf1l0xXknIhElMWaAuBQ_2YFGNyOJB1ziI9lSzlpCIilgNw'
  11     math = '%'
  12     html = '''
  13 <script type="text/javascript">
  14     // set proper key for www. and wiki. subdomains.
  15     if( (window.location.href).indexOf("www.") == -1 ) {
  16         writeScript("%s");  
  17     } else { 
  18         writeScript("%s");}                                                    
  19 function writeScript(key) {var ret='<'+'script src="http://maps.google.com/maps?file=api&v=2.x&key='+key+'"'+'type="text/javascript"><'+'/script>';document.write(ret);}  
  20 </script> 
  21     <script type="text/javascript">
  22     function layerControl() {
  23     }
  24     layerControl.prototype = new GControl();
  25     layerControl.prototype.initialize = function(map) {
  26       geoXml = new GGeoXml("http://map.personaltelco.net/feed.kml");
  27 
  28       var container = document.createElement("div");
  29       container.style.width = "200px";
  30       var sv = new GStreetviewOverlay();
  31 
  32       var onDiv = document.createElement("div");
  33       this.setButtonStyle_(onDiv);
  34       onDiv.appendChild(document.createTextNode("StreetView"));
  35       var onLink = document.createElement("a");
  36       onLink.innerHTML = "<br />On";
  37       GEvent.addDomListener(onLink, "click", function() {
  38         map.addOverlay(sv);
  39       });
  40       onDiv.appendChild(onLink)
  41       onDiv.appendChild(document.createTextNode(" | "));
  42       //onDiv.innerHTML = " | "
  43       var offLink = document.createElement("a");
  44       offLink.innerHTML = " Off";
  45       GEvent.addDomListener(offLink, "click", function() {
  46         map.removeOverlay(sv);
  47       });
  48       onDiv.appendChild(offLink)
  49       container.appendChild(onDiv)
  50 
  51       var nonDiv = document.createElement("div");
  52       this.setButtonStyle_(nonDiv);
  53       nonDiv.style.left = "7em";
  54       container.appendChild(nonDiv);
  55       nonDiv.appendChild(document.createTextNode("View Nodes"));
  56       var nonLink = document.createElement("a");
  57       nonLink.innerHTML = "<br />On";
  58       GEvent.addDomListener(nonLink, "click", function() {
  59         map.addOverlay(geoXml);
  60       });
  61       nonDiv.appendChild(nonLink)
  62       nonDiv.appendChild(document.createTextNode(" | "));
  63       var noffLink = document.createElement("a");
  64       noffLink.innerHTML = " Off";
  65       GEvent.addDomListener(noffLink, "click", function() {
  66         map.removeOverlay(geoXml);;
  67       });
  68       nonDiv.appendChild(noffLink)
  69       container.appendChild(nonDiv)
  70 
  71       map.getContainer().appendChild(container);
  72       return container;
  73     }
  74     // By default, the control will appear in the top left corner of the
  75     // map with 7 pixels of padding.
  76     layerControl.prototype.getDefaultPosition = function() {
  77       return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(55, 7));
  78     }
  79 
  80     // Sets the proper CSS for the given button element.
  81     layerControl.prototype.setButtonStyle_ = function(button) {
  82       button.style.textDecoration = "none";
  83       //button.style.color = "#000000";
  84       button.style.position = "absolute";
  85       button.style.backgroundColor = "white";
  86       button.style.font = "small Arial";
  87       button.style.border = "1px solid black";
  88       button.style.padding = "2px";
  89       button.style.marginBottom = "3px";
  90       button.style.textAlign = "center";
  91       button.style.width = "6em";
  92       button.style.cursor = "pointer";
  93       //button.style.filters.alpha.opacity="80";
  94       button.style.MozOpacity="0.8";
  95     }
  96 
  97     var map;
  98     var myPano;   
  99     var panoClient;
 100     var nextPanoId;
 101     var center = new GLatLng(45.52310,-122.67133);
 102 
 103     function initMap() {
 104       panoClient = new GStreetviewClient();      
 105       // setup and configure map
 106       map = new GMap2(document.getElementById("mapDiv"));
 107       map.setMapType(G_HYBRID_MAP);
 108       map.addControl(new GScaleControl());
 109       map.addControl(new GMapTypeControl());
 110       map.addControl(new GSmallMapControl());
 111       map.addControl(new layerControl());
 112       map.setCenter(center, 15);
 113       map.enableContinuousZoom();      
 114       map.enableScrollWheelZoom();
 115       //map.addOverlay(new GTrafficOverlay({incidents: true}));
 116       
 117       //map.addControl(new ExtMapTypeControl({showTraffic: true, showTrafficKey: true}));
 118       
 119       // setup draggable and rotating guy icon
 120       var guyIcon = new GIcon(G_DEFAULT_ICON);
 121       // Leprechan icon
 122       guyIcon.image = "http://maps.gstatic.com/mapfiles/cb/leprechan_arrow-0.png";
 123       // Normal man icon
 124       //guyIcon.image = "http://maps.gstatic.com/mapfiles/cb/man_arrow-0.png";
 125       guyIcon.transparent = "http://maps.gstatic.com/mapfiles/cb/man-pick.png";
 126       guyIcon.shadow = "";
 127       guyIcon.imageMap = [
 128         26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
 129         16,20, 16,14, 19,13, 22,8
 130       ];
 131       guyIcon.iconSize = new GSize(49, 52);
 132       guyIcon.iconAnchor = new GPoint(25, 35);  // near base of feet
 133       guyIcon.infoWindowAnchor = new GPoint(25, 5);  // top of head     
 134       
 135       marker = new GMarker(center, {icon: guyIcon, draggable: true});
 136       map.addOverlay(marker);
 137       lastMarkerLocation = center;
 138       geocoder = new GClientGeocoder();
 139       GEvent.addListener(marker, "dragend", onDragEnd);
 140       GEvent.addListener(marker, "click", showPanoData);
 141 
 142       // update streetview client when location is selected on map
 143       GEvent.addDomListener(map, "click", function(overlay,latlng) {
 144         panoClient.getNearestPanorama(latlng, showPanoData);
 145         marker.setLatLng(latlng);
 146       });
 147 
 148       // setup and configure streetview client
 149       var POV = {yaw:0,pitch:-5};
 150       panoClient = new GStreetviewClient(); 
 151       myPano = new GStreetviewPanorama(document.getElementById("pano"));
 152       myPano.setLocationAndPOV(center, POV);
 153       GEvent.addListener(myPano, "error", handleNoFlash);  
 154       panoClient.getNearestPanorama(center, showPanoData);
 155       GEvent.addListener(myPano, "yawchanged", showStats);
 156       GEvent.addListener(myPano, "yawchanged", onYawChange);
 157       GEvent.addListener(myPano, "zoomchanged", showStats);
 158       
 159       // update map as user moves locations in the streetview client
 160       GEvent.addListener(myPano, "initialized", function(call) {
 161       var center = call.latlng;
 162       map.setCenter(center);
 163       marker.setLatLng(center);
 164       });
 165       showStats();
 166     }
 167     
 168     function showPanoData(panoData) {
 169       // get and fill out infowindow
 170       if (panoData.code != 200) {
 171         //GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
 172           document.getElementById("statDiv").innerHTML = "No panorama available!";
 173           return;
 174       }
 175       myPano.setLocationAndPOV(panoData.location.latlng);
 176       GEvent.addListener(myPano, "newpano", onNewLocation);
 177       showStats();
 178     }
 179 
 180     function showStats() {
 181       // return POV and coords    
 182       var geocoder = null;
 183       geocoder = new GClientGeocoder();
 184       var stats = "";            
 185       var pov = myPano.getPOV();
 186       var point = marker.getLatLng();
 187       
 188       estats = "&lt;&lt;GoogleStreetView&#40;" + point + "," + pov.yaw + "," + pov.pitch + "," + pov.zoom;
 189       stats = estats.replace(/\(| |\)/g, "");
 190       document.getElementById("statDiv").innerHTML = stats + ")&gt;&gt;";
 191       //point = marker.getLatLng();      
 192       // Reverse Geocoder
 193       geocoder.getLocations(point, function(addresses) {
 194         if(addresses.Status.code != 200) {
 195           document.getElementById("statDesc").innerHTML = "<br />No address found";
 196         } else {
 197           address = addresses.Placemark[0];
 198           var myHtml = address.address;
 199           document.getElementById("statDesc").innerHTML = "<br />" + myHtml;
 200         }
 201       });
 202     }
 203 
 204     function next() {
 205       // Get the next panoId
 206       panoClient.getPanoramaById(nextPanoId, showPanoData, showStats);
 207     }
 208     
 209     function onYawChange(newYaw) {
 210       var GUY_NUM_ICONS = 16;
 211       var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
 212       if (newYaw < 0) {
 213         newYaw += 360;
 214       }
 215       guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) %s GUY_NUM_ICONS;
 216       guyImageUrl = "http://maps.gstatic.com/mapfiles/cb/leprechan_arrow-" + guyImageNum + ".png";
 217       //guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-.png";
 218       marker.setImage(guyImageUrl);
 219     }
 220 
 221     function onNewLocation(lat, lng) {
 222       var center = new GLatLng(lat, lng);
 223       marker.setLatLng(center);
 224       showStats();
 225     }
 226  
 227     function onDragEnd() {
 228       var center = marker.getLatLng();
 229       if (myPano) {
 230         panoClient.getNearestPanorama(center, onResponse);
 231         showStats();
 232       }
 233     }
 234 
 235     function onResponse(response) {
 236       if (response.code != 200) {
 237         marker.setLatLng(lastMarkerLocation);
 238       } else {
 239         var center = new GLatLng(response.Location.lat, response.Location.lng);
 240         marker.setLatLng(center);
 241         lastMarkerLocation = center;
 242         panoClient.getNearestPanorama(center, showPanoData);
 243         myPano.setLocationAndPOV(marker.getLatLng(), null)
 244         showStats();
 245       }
 246     }
 247     
 248     
 249     function showAddress(address) {
 250       if (geocoder) {
 251         geocoder.getLatLng(
 252           address,
 253           function(point) {
 254             if (!point) {
 255               alert(address + " not found");
 256             } else {
 257               map.setCenter(point, 17);
 258               //var marker = new GMarker(point);
 259               //map.addOverlay(marker);
 260               marker.setLatLng(point)
 261               panoClient.getNearestPanorama(point, showPanoData);
 262               myPano.setLocationAndPOV(point, null)
 263               //marker.openInfoWindowHtml(address);
 264               showStats();
 265             }
 266           }
 267         );
 268       }
 269     }
 270 
 271     function handleNoFlash(errorCode) {
 272       if (errorCode == FLASH_UNAVAILABLE) {
 273         alert("Error: Flash doesn't appear to be supported by your browser");
 274         return;
 275       }
 276     }  
 277     </script>
 278     <script type="text/javascript">
 279         window.onload = initMap
 280         window.onunload=GUnload
 281     </script>
 282     <form action="#" onsubmit="showAddress(this.address.value); return false">
 283       <p>
 284         <input type="text" size="60" name="address" value="226 NW Davis St, Portland, OR" />
 285         <input type="submit" value="Go!" />
 286       </p>
 287 <span id="statDiv" style=""></span>
 288 <div id="statDesc" style="height:30px;padding-bottom:10px;"></div>
 289 <p>
 290 <div id="pano" style="width:350px;height:350px;border:1px solid #000;float:left;"></div>
 291 <div id="mapDiv" style="width350px;height:350px;border:1px solid #000;margin-left:355px;"></div>
 292     ''' % (gkey, gkey2, math)
 293     return html
 294 

GetStreetView.py

Macros/GetStreetView (last edited 2009-11-21 11:15:02 by JasonMcArthur)