Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

fixed bounding box and keyboard issues

  • Loading branch information...
commit a25d9736c45b5d44d572697371083e80dd2097c1 1 parent 77ee858
Christian Heilmann authored
Showing with 56 additions and 15 deletions.
  1. +18 −2 geoexplorer.js
  2. +4 −7 geoexplorer.php
  3. +21 −6 index.php
  4. +13 −0 post.textile
20 geoexplorer.js
View
@@ -2,7 +2,7 @@ YUI().use('node','event','io-base',function(Y) {
Y.on('domready', function(e){
Y.one('#latlong').set('innerHTML',
'Clicking any of the links with a lat/lon pair will refresh the map'+
- 'and show you the location. Clicking the "+" links shows and hides '+
+ ' and show you the location. Clicking the "+" links shows and hides '+
'the details of every location.'
);
Y.all('ul.collapse ul').each(function(o){
@@ -25,7 +25,23 @@ YUI().use('node','event','io-base',function(Y) {
if(this.hasClass('latlon')){
if(map){
e.preventDefault();
- map.drawZoomAndCenter(this.get('innerHTML'));
+ var points = [];
+ var content = this.get('innerHTML').split(', ');
+ var point = new YGeoPoint(content[0],content[1]);
+ points.push(point);
+ var newMarker = new YMarker(point);
+ map.addOverlay(newMarker);
+ var bbinfo = this.get('className').replace('latlon bb','');
+ var bbpoints = bbinfo.split('x');
+ var bb1 = bbpoints[0].split('/');
+ var point = new YGeoPoint(bb1[0],bb1[1]);
+ points.push(point);
+ var bb1 = bbpoints[1].split('/');
+ var point = new YGeoPoint(bb1[0],bb1[1]);
+ points.push(point);
+ map.disableKeyControls();
+ var zac = map.getBestZoomAndCenter(points);
+ map.drawZoomAndCenter(zac.YGeoPoint,zac.zoomLevel);
}
}
},'a');
11 geoexplorer.php
View
@@ -88,13 +88,10 @@ function render($set){
$swlon = $set->boundingBox->southWest->longitude;
$out .= '<li>Location (lat/lon): <a href="'.
'http://maps.yahoo.com/map?ard=1&lat='.$lat.'&lon='.$lon.
- '" class="latlon">'.$lat.', '.$lon.'</a></li>'.
- '<li>Bounding Box:<p>NE <a href="http://maps.yahoo.com/map'.
- '?ard=1&lat='.$nelat.'&lon='.$nelon.'" class="latlon">'.
- $nelat.', '.$nelon.'</a></p>'.
- '<p>SW <a href="http://maps.yahoo.com/map?ard=1&lat='.$swlat.
- '&lon='.$swlon.'" class="latlon">'.$swlat.', '.$swlon.
- '</a></p>'.
+ '" class="latlon bb'.$nelat.'/'.$nelon.'x'.$swlat.'/'.$swlon.'">'.$lat.', '.$lon.'</a></li>'.
+ '<li>Bounding Box:'.
+ '<p>NE '.$nelat.', '.$nelon.'</p>'.
+ '<p>SW '.$swlat.', '.$swlon.'</p>'.
'</li>'.
'</ul></li>';
return $out;
27 index.php
View
@@ -78,12 +78,16 @@
echo renderlist($all->query->results->results[0]->place);
$current = $all->query->results->results[0]->place;
$name = $current->name;
- $lat = $current->centroid->latitude;
- $lon = $current->centroid->longitude;
+ $mlat = $current->centroid->latitude;
+ $mlon = $current->centroid->longitude;
+ $mnelat = $current->boundingBox->northEast->latitude;
+ $mnelon = $current->boundingBox->northEast->longitude;
+ $mswlat = $current->boundingBox->southWest->latitude;
+ $mswlon = $current->boundingBox->southWest->longitude;
$url= 'http://local.yahooapis.com/MapsService/V1/mapImage?'.
'appid='.$staticmapskey.
'&image_height=270&image_width=470&output=php'.
- '&latitude='.$lat.'&longitude='.$lon;
+ '&location='.$all->query->results->results[0]->place->name;
$img = unserialize(get($url));
echo '</ul>';
@@ -92,7 +96,7 @@
echo '<div class="yui-u"><div id="map">'.
'<a href="http://maps.yahoo.com/map'.
- '?ard=1&lat='.$lat.'&lon='.$lon.'">On Yahoo Maps</a>'.
+ '?ard=1&lat='.$mlat.'&lon='.$mlon.'">On Yahoo Maps</a>'.
'<img src="'.$img['Result'].'" alt="map of '.$name.'"></div>';
echo '</div>';
@@ -162,7 +166,7 @@
</div>
</div>
-<div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com">Chris Heilmann</a>, powered by <a href="http://developer.yahoo.com/yql/">YQL</a> and <a href="http://developer.yahoo.com/geo">GeoPlanet</a>.</p></div>
+<div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com">Chris Heilmann</a>, powered by <a href="http://developer.yahoo.com/yql/">YQL</a> and <a href="http://developer.yahoo.com/geo">GeoPlanet</a>. Download the source code of this <a href="http://github.com/codepo8/geoplanet-explorer">on GitHub</a></p></div>
</div>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script src="geoexplorer.js"></script>
@@ -175,8 +179,19 @@
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
+ map.disableKeyControls();
map.setMapType(YAHOO_MAP_REG);
- map.drawZoomAndCenter("<?php echo $lat.','.$lon;?>");
+ var points = [];
+ var point = new YGeoPoint(<?php echo $mlat.','.$mlon;?>);
+ points.push(point);
+ var newMarker = new YMarker(point);
+ map.addOverlay(newMarker);
+ var point = new YGeoPoint(<?php echo $mnelat.','.$mnelon;?>);
+ points.push(point);
+ var point = new YGeoPoint(<?php echo $mswlat.','.$mswlon;?>);
+ points.push(point);
+ var zac = map.getBestZoomAndCenter(points);
+ map.drawZoomAndCenter(zac.YGeoPoint,zac.zoomLevel);
}
</script>
</body>
13 post.textile
View
@@ -0,0 +1,13 @@
+GeoPlanet Explorer - another showcase for quick development with YQL and YUI
+
+A few days ago Gary Gale pinged me on messenger and subsequently carried a cup of coffee to my desk to pester me with another challenge. This time he talked about just how rich and cool the GeoPlanet data is and that it is tough to show people this in a simple interface. Internally we have a few pretty cool tools for testing and analyzing the data but most of them are too loaded with information only understandable for the Geo folk out there. So in essence, the benevolent overlord of geo technologies in Yahoo was asking to build a simple interface to navigate the GeoPlanet data.
+
+Well, this morning I got a chance to have a go at his request and here's the "GeoPlanet Explorer":http://isithackday.com/geoplanet-explorer/index.php?woeid=23689631 interface for you. Check the following screencast to see it in action:
+
+Building the interface wasn't magic - I used YQL to access the data, write a few lines of PHP to display it in a nested list and then added a few lines of YUI3 JavaScript to collapse and expand the location details.
+
+Notice that the whole interface uses progressive enhancement throughout. If you have no JavaScript at your disposal you get a static map and all the information in one single page. The lat/lon links open in Yahoo Maps and you can see the location there.
+
+If you have JavaScript enabled the interface collapses and the map is Ajax and will be refreshed every time you click on a lat/lon link.
+
+The "source code of the GeoPlanet Explorer":http://github.com/codepo8/geoplanet-explorer is available on GitHub and it can give you a few pointers how to use the GeoPlanet API with YQL for your own solutions.
Please sign in to comment.
Something went wrong with that request. Please try again.