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.
Gareth Adams
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)
@“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.
Igor Beuermann
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).
Copy & paste the code below to embed this comment.
chris hansen
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?
Copy & paste the code below to embed this comment.
H. Fiedler
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?
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
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?
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
50 Reader Comments
Back to the ArticleChris Hunt
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!)
ismael celis
In the Init method, shouldn’t the line
var DTs = DLs.getElementsById( ‘dt’ );
be
var DTs = DLs.getElementsByTagName( ‘dt’ );
?
Seth Duffey
Yes that does appear to be a typo in the article. View the full source of the javascript to see the entire init method.
Priit Laes
Can someone create a “mapMaker.reinit()” function which will fix the tooltips after the city list has been dynamically changed? ;)
Seth Duffey
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();
},
Gareth Adams
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)
bob sfog
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
David B
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
Aaron Gustafson
@“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.
Steven Kumar
Perfect.
Peter Brown
Title? (Function to show/hide all tooltips?)
Maik Lehmann
Good article, I will be experimenting with this in my nexts projects.
Thanks for this great idea!
Greets Maik
Michael Müller
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.
Igor Beuermann
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
chris hansen
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!
H. Fiedler
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?
H. Fiedler
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!
Andrew Fuller
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
Paul Amato
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
Andrew Fuller
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