» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with mapping + Ajax

navigator.geolocation: Using the W3C Geolocation API today

Last week I wrote a simple WhereAreYou? application that used the Google Ajax APIs ClientLocation API to access your location via your IP address.

At the same time, we announced support for the Gears Geolocation API that can calculate your address using a GPS device, WiFi info, cell tower ids, and IP address lookups.

Add to all of that, the W3C Geolocation API that Andrei Popescu of the Gears team is editing. You will notice that it looks similar to the Gears API, with subtle differences. The ClientLocation API is quite different.

To make life easier, I decided to put together a shim called GeoMeta that give you the W3C Geolocation API, and happens to use the other APIs under the hood.

If you have the Geolocation API native in your browser (no one does yet, future proof!) that will be used. If you have Gears, that API will be used, and finally, with nothing the ClientLocation API will be used behind the scenes.

To you the API will look similar:

// navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
navigator.geolocation.getCurrentPosition(function(position) {
      var location = [position.address.city, position.address.region, position.address.country].join(', ');
      createMap(position.latitude, position.longitude, location);
}, function() {
      document.getElementById('cantfindyou').innerHTML = "Crap, I don't know. Good hiding!";
});

At least, that is what I would like. Unfortunately, there are a few little differences that leak through.

  • The W3C API only seems to give you a lat / long, so you have to do the geocoding to get address info
  • The Gears API gives you an additional gearsAddress object attached to the resulting position object. This can contain a lot of information on the resulting area (street address to city to ...) however for certain providers the API returns that as null, the same as the W3C standard
  • That gearsAddress object has slightly different information from the address data that the ClientLocation API returns. NOTE: I would love to see this just called 'address' to help the shim.

To give you control when you need it, you can ask the navigator.geolocation object what type it is. navigator.geolocation.type will be null if it is native, but 'Gears' or 'ClientLocation' if a shim kicks in. You can also check navigator.geolocation.shim to see if it is augmented code.

Implementation

There is some fun implementation code in there if you poke around. For example, for the ClientLocation API, when you make a call, it will be added to a queue if the Google Loader hasn't fully loaded yet, and it will kick off that call when finished. Dealing with dynamically creating <script src> as a loading mechanism sure is fun!

I like the idea of jumping straight to the W3C standard and updating the shim as the APIs change. That way, when browsers catch up, the code will still work using the native APIs and you don't have to change a thing.

I also hope that we get general reverse geocoding in place, which would enable me to even take the native "standard" and strap on useful address info to the bare bones lat/long.

Where are you?

Ajax: Ajaxian

A List Apart: Articles: Take Control of Your Maps

It is now possible to replicate Google Maps' functionality with open source software and produce high-quality mapping applications tailored to our design goals. The question becomes, then, how?

opensource: del.icio.us tag/opensource

24 ways: Unobtrusively Mapping Microformats with jQuery

using jQuery to re-render a semnatic ordered list into a GoogleMap using Mapstraction

mapstraction: del.icio.us/tag/mapstraction

Mapstraction - a javascript library to hide differences between mapping APIs.

a library that provides a common API for various javascript mapping APIs to enable switching from one to another as smoothly as possible.

mapstraction: del.icio.us/tag/mapstraction

Unobtrusively Mapping Microformats with jQuery

Simon Willison just doesn't stop. This time he has added a way that details the technique of unobtrusively mapping microformats with jQuery.

Simon puts together jQuery, microformats, and the Google Maps API to grok hCard and show maps of any hCard data that is found, ending up with:

JAVASCRIPT:
  1.  
  2. jQuery(function() {
  3.         // First create a div to host the map
  4.         var themap = jQuery('<div id="themap"></div>').css({
  5.                 'width': '90%',
  6.                 'height': '400px'
  7.         }).insertBefore('ul.restaurants');
  8.  
  9.         // Now initialise the map
  10.         var mapstraction = new Mapstraction('themap','google');
  11.         mapstraction.addControls({
  12.                 zoom: 'large',
  13.                 map_type: true
  14.         });
  15.  
  16.         // Show map centred on Brighton
  17.         mapstraction.setCenterAndZoom(
  18.                 new LatLonPoint(50.82423734980143, -0.14007568359375),
  19.                 15 // Zoom level appropriate for Brighton city centre
  20.         );
  21.  
  22.         // Geocode each hcard and add a marker
  23.         jQuery('.vcard').each(function() {
  24.                 var hcard = jQuery(this);
  25.        
  26.                 var streetaddress = hcard.find('.street-address').text();
  27.                 var postcode = hcard.find('.postal-code').text();
  28.        
  29.                 var geocoder = new MapstractionGeocoder(function(result) {
  30.                         var marker = new Marker(result.point);
  31.                         marker.setInfoBubble(
  32.                                 '<div class="bubble">' + hcard.html() + '</div>'
  33.                         );
  34.                         mapstraction.addMarker(marker);
  35.                 }, 'google');   
  36.                 geocoder.geocode({'address': streetaddress + ', ' + postcode});
  37.         });
  38. });
  39.  

You see the finished code at work.

Ajax: Ajaxian

The Hyperwords Project

With Hyperwords all the text on the web becomes interactive: Select any word on any page and choose a command. englebart example

Firefox: del.icio.us/tag/firefox

OpenLayers

an application which makes it easy to put a dynamic map in any web page. it can display map tiles and markers loaded from any source.

opensource: del.icio.us tag/opensource

Placeshout: New Rails based Geo-cool site

Andre Lewis has a new site out there, Placeshout which offers a way to quickly call out your favourites place in various locations.

You could argue that we have other places for this... Yelp for example, or My Maps themselves. So, why Placeshout?

Sometimes, you just want a quick suggestion

When Andre and I are looking for a hole-in-the-wall Mexican restaurant or a park with a softball field, we usually just want a quick suggestion, not a lengthy review. We want to know if a place is worth visiting in 30 seconds.

Placeshout isn't about volume - it's about trying to express the positives and negatives of a destination in as few of words as possible. If people agree, that "shoutout" moves up...if they don't, the shoutout moves down and begins to disappear.

We hope Placeshout makes it easier for you to find local destinations.

There are some interesting features in this, very Web 2.0-looking, site. One that stands out is the enhanced mapping experience on top of Google Maps. As you move around, directional arrows tell you how far various other cities are away. It is kinda fun to watch:


Ajax: Ajaxian

GPlotter: Make Google Maps Easily

&lt;sep/&gt;Javascript object which provides a simple interface to plot markers onto Google Maps using a simple XML file. The interface allows the user to write a few of lines of Javascript to provide this cross&lt;sep/&gt;

XML: del.icio.us/tag/xml

Craigslist Tibco GI Remix

Luke Birdeau has remixed Craigslist to produce a desktop-esque Ajax application view on the data that adds features such as being able to save your favorites, add notes to them, and even use the app offline (e.g. take your laptop on the road to go see the stuff for sale of meet that blind date). The app combines aspects of 3 libraries – TIBCO GI 3.5 for the interface, plus Dojo (for offline) and Google Maps.

To get started you first pick a locale, then a category, then do a search. You can also add multiple regions and categories too.

Here is a quick demonstration of the app in action:


Ajax: Ajaxian

Page 1 | Next >>