Don’t call me DOM

18 January 2006

Geographical site map

Filed under:

Inspired by MaxF’s recent cool photomap hack, I wrote my own version of the tool that works in a more general case: basically, you feed it with an XHTML page, and it will spider any other page linked from that page and extracts GeoURL data from them, and put them in a javascript file. When this javascript is called from an HTML page, it inserts a Google Map with markers for the various pages.

See how it looks on my personal site:
Screenshot of a page rendered using this tool

I have preferred generating a separate Javascript file, since having embedded HTML in a javascript embedded in HTML does not play nicely with validation; also, it makes it easier to use in different pages.

The embedding HTML page needs to have the following elements:

  • in the <head> element:
    
    <script src="http://maps.google.com/maps?file=api&v=1&key=GoogleMapAPIKey"
    type="text/javascript"></script>
    

    where GoogleMapAPIKey is to be replaced by your own API Key

  • in the <body> element, at the place where the map must be generated:
    
    <div id="map"
      style="width: 900px; height: 700px">
    </div>
    <script type="text/javascript"
       src="map.js"&;gt
    </script>
    

    where map.js is to be replaced by the location of the script generated by the XSLT.

  • If you’re already marking up your pages with GeoURL and if your pages are in XHTML, a whole web site can be mapped very quickly on a Google Map using this system.

    A few notes:

    • the current style sheet deliberately doesn’t crawl URIs over the network; so it will only work on a local copy of the site to be mapped
    • it doesn’t work on pages served as application/xhtml+xml; I don’t know if Google Map as a whole does – I know that Google AdSense doesn’t work by default with this MIME type
    • ideally, there would be a way to generate a non-javascript version of the map for accessibility reasons; but there isn’t

    Update (Jan 19): I’ve updated the XSLT to make it use proper DOM nodes instead of document.write; also, it now proposes a list of links for a given location, instead of the last link that was added for the said location.

2 Responses to “Geographical site map”

  1. Musa Says:

    Do you have any idea how to do the same thing in a XML file. there is a parser error because of the script tag. it cant get to go pass the key. thanks for any help.

    Musa

  2. Jessica Says:

    Really great idea, do you have any idea on doing in an RSS formats?

Picture of Dominique Hazael-MassieuxDominique Hazaël-Massieux (dom@w3.org) is part of the World Wide Web Consortium (W3C) Staff; his interests cover a number of Web technologies, as well as the usage of open source software in a distributed work environment.