9 replies to this topic

[Dennis McClendon]

I've asked about this vaguely before, but discussions with a client this morning gives new urgency.

Suppose I produce a simple GIF map of Chicago showing the parks, and make that part of a webpage. Now as the user points to or mouses over an individual park, I'd like a separate small window (or popup) to show the name of the park, address, activities available, phone number.

What's the simplest, most straightforward way to do this? I want it to be fairly bulletproof for unsophisticated users and older browsers, so I'm not looking for anything that requires a user-side plugin.

[CHART]

Dennis,

If you have Photoshop look up the slicing functions that comes with ImageReady.

[Derek Tonn]

Dennis,

I think the best/easiest solution for doing this (by far!) would be to make a .gif/.png/.jpg version of the map on-screen interactive using Cascading Stylesheets. Seth Duffey wrote a FABULOUS article on how to do this several months ago (http://www.alistapar...rticles/cssmaps), and he and I have been in communication ever-since to try and "tweak" and enhance that particular presentation method. I have experimented with this technology on some disc golf course map designs, and have also employed the technology in the new Emory University Transit System interface, which will be rolled-out on April 2. If you are looking for cost-effective and relatively easy to maintain, CSS is the way to go. If you need/want any help with this, feel free to contact me off-list and I will do my best to offer any help/advice that you are requiring.

Good luck with the project!

Derek

[Dennis McClendon]

Yes! Thanks for the Duffey reference. What he's done with the Davis map is exactly the sort of thing I want to do, and the CSS code seems straightforward enough.

I'm thinking about how it would work with large rollover areas (such as Montana on a US map) rather than points. Also thinking about ways to automate the coordinate pairs for a large number of points, maybe by stealing them out of an EPS file of just that layer. (I realize this will baffle the GIS folks here, who think a city dot on a map begins life as a pair of coordinates rather than being placed by eye and then asked where it is).

[benbakelaar]

If you wanted to go old school, you could use imagemaps and Javascript.

http://www.jsmadeeas...g_image_map.htm

I haven't really taken a look at the code, but considering they got any Javascript interaction off an imagemap, I don't think it matters whether it is changing something "inside" the image or in a separate window, that's just a matter of telling Javascript where to make the change.

[Derek Tonn]

I'm thinking about how it would work with large rollover areas (such as Montana on a US map) rather than points.

That's a bit trickier, Dennis. However, one thing Seth's technique does allow for is a custom-sized "dot." It doesn't work so great if you want someone, as an example, to click anywhere within the entire drawn area of the State of Montana. However, you COULD make the "dots" large enough to cover a vast majority of each state. With a lot more coding too, you MIGHT even be able to make the "dots" uniquely-shaped for each state/county/??? and overlay them on top of the static base map, though that would make for a LOT more complexity to the interface (and many-more graphics to call...slowing the interface down).

Good luck with the project! I've been using CSS every chance I can get on projects like you have described, though I haven't had as much time to tinker with it as I would have liked over the past year or two.

Derek

[Rob]

I've been using CSS every chance I can get on projects like you have described, though I haven't had as much time to tinker with it as I would have liked over the past year or two.

that css trick is just what i needed too for a long planned web mapping project. thanks!!! I stopped doing practically all website work back in about 2000, and am just getting back into it. CSS blows me away, but I am having to learn everything from scratch to build a site to today's standards. And the learning curve seems much higher than just coding in html.

I've decided to buy a book to help in this education. Derek, or anyone, have some recommendations perhaps? I'd like something that goes step by step into how to build a site with CSS and gets into a fair amount of the bells and whistles.

thanks.

[Derek Tonn]

Rob,

I don't really have any good book recommendations, unfortunately. I do most of my web-dev learning on-screen...finding code/effects I like, deconstructing it, then reconstructing it with a few of my own personal touches and techniques. The web, for me, is ALL-ABOUT reverse-engineering the UFO, but most of that learning for me occurs in front of Dreamweaver or Notepad instead of a book. Sorry about that. I'll ask a few people I know, however, if they might have any advice related to good CSS books and post them here if I find any.

Have a wonderful weekend!

Derek

[Jason]

I've decided to buy a book to help in this education. Derek, or anyone, have some recommendations perhaps? I'd like something that goes step by step into how to build a site with CSS and gets into a fair amount of the bells and whistles.

thanks.

Check out Sitepoint.com. I have been impressed with the books I have bought from them. Plus they have a lot of resources. They also let you download sample chapters of each of their books.

[frax]

I would look into converting the map to an imagemap, and then use some javascript library to present the boxes with information, using "non-intrusive" code, such as the CoolTip or OverLib. It is possible that more advanced "all-in-one" libraries such as jQuery or Behaviour could work for this as well, but I haven't looked into those really (yet).

I have some experience with CoolTip myself, and I think it works very well. That is what is used for the hover/popups in the lower left of UNEP/GRID-Arendal maps and graphics library.