“geo:” URI JavaScript parser

March 12th, 2007 by Christian Leave a reply »

As another proof of concept I wrote a little “geo:” URI JavaScript parser.
Basically it scans all anchors in a given text for “geo:” links, extracts location and meta information (e.g. coordinates and corresponding text), places them on a map and appends the map to the text.

I choose to go with a Google Map because I already knew the API, so it was the easiest way. Of course one could modify the script to use any other mapping API’s, create a KML or even transfer the data to a GIS application. If I can free some time in the next weeks I’ll spice the script a little up, some more user defined parameters (e.g. map dimension, marker symbols) and the interpretation of query arguments would be nice though.

See a quick example here: the locations of a few cultural venues are marked with “geo:” anchors, scanned by the script and dynamically shown in the map below.

However, if you’re interested you can download the JavaScript file here. You’ll need a copy of jQuery (I used version 1.1.2) and a valid Google Maps key for your domain too. Then just add the corresponding 3 script elements (Google key, jQuery and geouriparser.js) into the head of your document and let the script find and display the geoURIs in your text.

The idea is heavily inspired by Gutenkarte, a presentation of MetaCarta Labs I remembered from last year’s Where 2.0 conference. Gutenkarte is based on MetaCarta’s Geoparser API, which is of course far more complex than my few lines JavaSrcipt code.

Advertisement

6 comments

  1. Hi. Just found out the Firefox add-on named geoURI handler 0.0.1 is not compatible with FF 2.0.0.2 and no update is available. Cheers!

  2. GeoURI Example using OpenLayers:

    http://openlayers.org/~crschmidt/vector-2.4/examples/geouri.html

    Code doesn’t require jquery. Nor an API key. However, the ‘extends’ method is new in the vector-2.4 branch. Once this is trunk, I’ll make it a standard example.

  3. Christian says:

    Thanks for the OpenLayers example!

    I just added another WMS to your script to have some more information in the background. Unfortunately that area isn’t covered very well by free data services…

    OpenLayers example plus geoland.at-WMS

  4. John Wolfe says:

    I just added the Fire fox extension and used the example in the last comment. When Google Maps comes up, the search bar and the result area both list the geo info (lat and long numbers) and nothing else. This might be a good area for the ? part of the uri. (I am a non-technical home user.) Perhaps add something like ?id=Guggenheim Museum and have that be entered into the field. I know that if I called up two or three of the museums listed and saved or printed them, I would forget which one was which otherwise.

  5. John Wolfe says:

    (note to above: I placed a %_2_0 between “Guggenheim” and “Museum” but the parser translated it to a blank space).

    Is there an easy way to find geo information (lat and long) in the appropriate format? In other words: how do I, as a webmaster, find the numbers to put in the geo: string? If this was a feature added to Google maps (finding the string) it would be real nice. I could then look up the location on the map and copy the geo: info and place it in my uri. Then I would also know approximately what map would appear.

    Along the same line; would Google Maps use the height parameter to scale the map appropriately?

    (Is anyone at Google being of any help with this project?)

  6. Christian says:

    John,

    basically you find all information needed (lat & lon) for a geouri in the address bar when you hit “link to this page” in the Google Maps interface.

    You’re right, additional parameters could be placed in the search bar or as well as bubble content in Google Maps for instance.

    Height and scale are two different parameters: height is part of the location definition and scale is a viewing property. We can’t use the height for defining the viewing scale.

    And no, Google is not involved in this project 😉 All those examples are just proof of concepts and you could substitute Google maps with any other mapping API (as shown with OpenLayers).

Leave a Reply