Solved

Creating a map of United States and counties with rollovers

Posted on 2006-11-16
10
258 Views
Last Modified: 2010-05-18
I am looking to making an image map that will allow for rollovers, but the kicker is that when the user rolls over a State, only that state image changes, not the entire image, therefore I don’t have to expect the user to load a ton of images.

I have an example I did, but it replaces one 600px image with another.  Roll over Texas.
http://www.discipledesign.net/clients/m3iworks/vector_unitedstates_eachst.html
To do this I used an EPS Illustrator file exported to Image Ready.

One example of what I want to do is found at
http://www.copperstationproperties.com/property/statemap.aspx?nid=1518&state=texas

I am looking for a program that will do this and can be used repeated as I have to do all the counties in 6 states.

Thanks.
0
Comment
Question by:jason94024
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
10 Comments
 
LVL 19

Accepted Solution

by:
billmercer earned 168 total points
ID: 17967101
I suggest you take a look at MapServer
  http://mapserver.gis.umn.edu
It's an application that is specifically designed to take GIS data and render it to web-friendly formats.

Here's an example of an interactive web map created from GIS data using this system.


http://maps.dnr.state.mn.us/cgi-bin/mapserv48?map=/usr/local/www/docs_maps/eco/rsg/search/search_example.map&qlayer=county&mode=nquery&searchmap=true
0
 
LVL 38

Assisted Solution

by:lherrou
lherrou earned 166 total points
ID: 17979181
Jason94024,

There are a number of ways you could go about this, with Flash, rollovers, etc. The fastest, easiest way I can think of would be to produce your map of the states, as you have, and place it as a background image. Then, using an imagemap, do rollovers for the states you want to highlight, swapping a transparent image for one that's all transparent except the state you are highlighting. That should make your image sizes much smaller, except for the background image. You might also use a bit of Javascript to pre-load the rollover images so there's no delay when they put their mouse over the state.

Cheers,
LHerrou
0
 
LVL 5

Assisted Solution

by:psyki_be
psyki_be earned 166 total points
ID: 18059383
The easiest solution for me would be Flash.
However, it's also the most expensive, and well, if you've never tried flash, it'd be a though first-time job.

Why would I use Flash?
Flash doesn't have the 'rectangular problem'.
If you want to use roll-over images, you can only use rectangular area's, right?
So, if you try 2 states next to eachother, it's possible you'll get a wrong one if you roll-over the border.
Flash doesn't have that.
0
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

 
LVL 19

Expert Comment

by:billmercer
ID: 18061809
> Flash doesn't have the 'rectangular problem'.
> If you want to use roll-over images, you can only use rectangular area's, right?

Er, wrong, actually. You can use <imagemap shape="polygon">. In fact, that's what the example the asker provided does. I don't think he wants a different medium, I think he wants a way to streamline the process of generating the maps, which in this case probably means some sort of GIS-based solution.


 


 

0
 
LVL 5

Expert Comment

by:psyki_be
ID: 18062758
hmmmz, you're right :o

Meh, imagemaps, don't really sue 'em a lot.

Well, uurhm, forget my previous comment.
Allthough, if I had the right images (and knew how to put those states together), I could make this in Flash in 15 minutes...
Way easier, but, indeed, not the question.
0
 
LVL 19

Expert Comment

by:billmercer
ID: 18071962
If you happen to have ArcInfo/ArcGIS, or know someone who has it, this might be handy.
  http://www.ecy.wa.gov/services/gis/apps/imagemap/imagemap.htm#req 
It's a set of scripts to generate imagemaps from GIS data automatically.

Or you could always cough up $300 for MapPoint...

 
0
 
LVL 70

Expert Comment

by:Merete
ID: 18311133
Have  any of you tried google earth? Its wonderful
so this gave me the idea that
Google also has map creators
Google Map Creator makes thematic mapping simple
http://googlemapsmania.blogspot.com/2006/12/google-map-creator-makes-thematic.html

A really simple tool to make your own google maps to add to your website.
http://mapmaker.donkeymagic.co.uk/

hope they help you and they a free too.

0
 
LVL 70

Expert Comment

by:Merete
ID: 18461831
jason94024  your post is now last year :)
 any feedback on your progress  or have you abandoned us?
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
60x60 jpgs needed 3 275
Picture Branding 5 172
Best Workflow For Splitting Up Collages 8 70
RGB code colors 8 118
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question