A More Accessible Map

by Seth Duffey

50 Reader Comments

Back to the Article
  1. It seems to me that online maps fall into two categories: cases where the map is used to organise and present some information, and cases where the map IS the information.

    For the former case, the technique presented in this article could no doubt be very useful. For the latter case – which will cover a lot of Google/Yahoo maps usage – it’s a lot less applicable: There’s a huge amount of visual information in the map, to which we might add a few identified points.

    For example, if I were using Google Maps to display the position of a particular building, it’s pointless trying to describe all the visual information that Google makes available. Just leave it alone, but add a text description of how to get to the place – if you were visually impaired and wanted to go there, where should you tell a taxi driver to take you? What bus/train would you catch? (This infirmation may be useful to sighted visitors too!)

    Copy & paste the code below to embed this comment.
  2. In the Init method, shouldn’t the line

    var DTs = DLs.getElementsById( ‘dt’ );

    be

    var DTs = DLs.getElementsByTagName( ‘dt’ );

    ?

    Copy & paste the code below to embed this comment.
  3. Yes that does appear to be a typo in the article. View the full source of the javascript to see the entire init method.

    Copy & paste the code below to embed this comment.
  4. Can someone create a “mapMaker.reinit()” function which will fix the tooltips after the city list has been dynamically changed? ;)

    Copy & paste the code below to embed this comment.
  5. The code below should do what you need:

    reinit: function(){
    mapMaker.on = false;
    var i=0;
    mapMaker.DLs = document.getElementsByTagName(‘dl’);
      while (mapMaker.DLs.length > i) {
      if (mapMaker.DLs.className == ‘map on’){
      mapMaker.DLs.className = ‘map’;
      i++;
      };
      };
    mapMaker.init();
    },

    Copy & paste the code below to embed this comment.
  6. Worth pointing out that (at least in IE<7) element.class1.class2.[…].classN is reduced down to element.classN

    This means that your dl.map.on rule would apply to all <dl class=‘on’> elements on the page (although you can appreciate the relative chances of this aren’t high)

    Copy & paste the code below to embed this comment.
  7. In the Init method, shouldn’t the line

    var DTs = DLs.getElementsById( “˜dt’ );

    be

    var DTs = DLs.getElementsByTagName( “˜dt’ );

    ?
    is it should
    http://www.replicahours.com

    Copy & paste the code below to embed this comment.
  8. Great article Seth. I thought you(and others!) might like to see what we did with our maps, http://www.travbuddy.com/world_display.php

    Copy & paste the code below to embed this comment.
  9. @“Ismael”:http://www.alistapart.com/comments/cssmaps?page=4#32 and “Bob”:http://www.alistapart.com/comments/cssmaps?page=4#37: thanks for catching that. We’ve made the change.

    Copy & paste the code below to embed this comment.
  10. Perfect.

    Copy & paste the code below to embed this comment.
  11. Title? (Function to show/hide all tooltips?)

    Copy & paste the code below to embed this comment.
  12. Good article, I will be experimenting with this in my nexts projects.

    Thanks for this great idea!

    Greets Maik

    Copy & paste the code below to embed this comment.
  13. Thank you very much for this article. I’m just trying to integrate a map on my site and your article is really helpful in this case.

    Copy & paste the code below to embed this comment.
  14. You will certainly recognise me as a novice ;-) but I’m trying. Also, I know my question would be better posted to some JavaScript page. But would you so kind and explain me the meaning of the double dollar sign ‘$$’ as in

    this.$$handleEvent(event) === false or

    handlers[handler.$$guid] = handler;

    I hope I’m not troubling you too much (as novices always do).

    Igor

    Copy & paste the code below to embed this comment.
  15. In Safari I’ve noticed that my CSS is loading after the tooltip images… Firefox and IE are fine… any suggestions? Should I move the CSS for the map inline?

    http://fearlessfilms.net/ffnew/locations.html

    Thanks!

    Copy & paste the code below to embed this comment.
  16. Great bit of programming!
    When I use the examples here, they work great.
    When I copy it to my own PC and run it, the IE popup blocker interferes. Any way to fix this?

    Copy & paste the code below to embed this comment.
  17. Never mind. When I publish the map, it works fine.
    You can try it at

    http://www.api-usa.com/api_rep_map.htm

    Thanks!

    Copy & paste the code below to embed this comment.
  18. Great article, thank you. Shortly after reading it, a project came up that seemed perfect for a non-API environment. We’re trying this method for a quiz, where the map & tool tips hold the answers. http://salmonnation.com/place/where_bioregion_quiz.html

    The backgroudn map is a dummy of course, which I’m using to help me place the x,y of the location points. I’ll just upload a new background image when done.

    After looking at the code for a few hours, I can’t figure out why all the points seem to be off by approx x6,y-12 pixels. Your ideas? Also, something is busted in PC IE, where the map doesn’t display at all.
    external files are http://salmonnation.com/includes/map.css and http://salmonnation.com/includes/mapevents.js

    Copy & paste the code below to embed this comment.
  19. First of all, thank you for creating this script.  I have been successful in implementing the map, but would like to substitute an onmouseout timer for the close button.  I abandoned the close image because my dd content will vary in width, and using dd width:auto; with the img float:right; makes the entire dd stretch across the screen.

    My goal is to have an interactive pop-up that will disappear once I stop interacting with it.  I have added an onmouseout event to the dd, but it only recognizes the first line in the dd.  I know this is a long-shot, but do you have any suggestions?

    Thank you in advance for any help you can offer.

    Paul

    Copy & paste the code below to embed this comment.
  20. Got this working in most browswers, except for Safari is still rendering as though without CSS. Any ideas? http://salmonnation.com/place/where_bioregion_quiz.html

    Copy & paste the code below to embed this comment.