Warcraft map stylesheet for London

So this is an accurate (in terms of coordinates) map of London, generated from OpenStreetMap data:

[field name=”iframe”]

You can pan around quite a bit and use the scroll wheel to zoom. To achieve this, I created the following geographic stylesheet:

/cartagen/warcraft.gss

The map is built on Cartagen, a mapping framework for viewing and geographic data in a dynamic, personally relevant way. Cartagen uses the GSS (Geo Style Sheet) format, which allows users to design maps with CSS-like styles. Learn more at Cartagen.org and the Cartagen wiki, or download the source at Google Code.

Go to Cartagen.org to view anywhere in the world through this stylesheet.

Dabu!

Quick update: some users (read: most) are having trouble zooming in and out! This is because of a known last-minute bug in the 0.6 release of Cartagen, and only affects maps embedded in other pages. It does not affect cartagen.org. For a quick fix, to zoom you can also hold down the ‘z’ key and drag up and down on the map.
Followup update: zooming with the scroll wheel should work now. Thanks for your patience!

26 thoughts on “Warcraft map stylesheet for London”

  1. Pingback: London mapped in World of Warcraft style | timnhanh.us

  2. What browser do I need to try this?

    I’ve tried firefox and chrome and in both cases all I get is an entirely green map and neither panning nor zooming do anything.

  3. Huh, it seems if i click on it it starts loading. But if I zoom it breaks and just displays grass. At that point no amount of clicking or zooming will fix it.

  4. It loads automatically in Safari 4. However, my experience with zooming is the same as Gerg’s; it breaks and displays grass (slightly patterned), and then further clicks and zooms do nothing.

  5. Does not work in Firefox 3.5, Internet Explorer 7, or Chrome. Firefox and Chrome produce a totally green map that can’t be interacted with. IE produces a lengthy text description for the map, rather than the map itself.

  6. Works a treat for me (XP, F3.5; check your java). Love the on-ye-fly generation. I feel a sudden urge to pillage tracts of Devon…

  7. Pingback: London mapped in Warcraft II style | timnhanh.us

  8. Hi, all – we added a patch to cause mouse scroll to zoom but not scroll the containing page, at the last minute, and it seems a bit buggy. We’ll roll out a new version shortly with fixed scrolling, but for now scrolling does work on the main Cartagen site (the bug is iframe-specific, so it only shows up on maps embedded in other pages).

    Try it at: http://cartagen.org/?gss=/cartagen/warcraft.gss

    For those of you who cannot see anything at all, if you could send us your JavaScript error output that would be great, and we should be able to add fixes asap. This does not work in Internet Explorer yet.

    If you’re particularly ambitious, maybe you could add your own issue reports on our Google Code page, here: http://code.google.com/p/cartagen/issues/entry

  9. Pingback: The World Condensed » Blog Archive » London mapped in Warcraft II style
  10. Pingback: London mapped in Warcraft II style | BLOGCHINA

  11. IE8, compatibility-mode:

    Details zum Fehler auf der Webseite

    Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Zeitstempel: Mon, 27 Jul 2009 08:17:57 UTC

    Meldung: Bezeichner, Zeichenfolge oder Zahl erwartet
    Zeile: 6627
    Zeichen: 1
    Code: 0
    URI: http://mushroommap.com/cartagen/cartagen.js

    Meldung: ‘Event’ ist undefiniert
    Zeile: 18
    Zeichen: 3
    Code: 0
    URI: http://mushroommap.com/find/london?gss=/cartagen/warcraft.gss&fullscreen=true&zoom_level=0.6

    Meldung: ‘Prototype’ ist undefiniert
    Zeile: 57
    Zeichen: 3
    Code: 0
    URI: http://mushroommap.com/find/london?gss=/cartagen/warcraft.gss&fullscreen=true&zoom_level=0.6

  12. ie 8, non-compatible:

    Details zum Fehler auf der Webseite

    Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Zeitstempel: Mon, 27 Jul 2009 08:19:45 UTC

    Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
    Zeile: 6848
    Zeichen: 3
    Code: 0
    URI: http://mushroommap.com/cartagen/cartagen.js

    Meldung: ‘$C.canvas’ ist Null oder kein Objekt
    Zeile: 6852
    Zeichen: 3
    Code: 0
    URI: http://mushroommap.com/cartagen/cartagen.js

  13. Interesting behavior (which may help in debugging) —

    If the scroll-wheel zoom fails, reload the page and use the z+grab zoom; -then- use the scroll wheel. It will work.

  17. Pingback: Community-Chest » Bookmarks for juillet 28th through juillet 30th
  18. Pingback: Ajaxian » Cartagen: Rich mapping on the client side
  19. Pingback: Cartagen: Rich mapping on the client side | Guilda Blog
  20. Pingback: Cartagen: Rich mapping on the client side « LocalLab : Foire aux Infos
  21. Pingback: Cartagen: Rich mapping on the client side - Programming Blog
  22. Pingback: Cartagen: Rich mapping on the client side | Simple Test
  23. Pingback: The Ashes » Blog Archive » Cartagen: Rich mapping on the client side

  25. Moving on to the reserve capacity, you need to know that it’s
    the amount of minutes by which your automobile will run
    using only the battery if the alternator fails.

    If they say they can’t do that, then walk,
    because another dealership will be happy to offer
    that rate. Check with MVD – Before you buy a new or used vehicle, check with your motor vehicle department (MVD) and inquire
    how much sales taxes are in your state.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks: 

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax