www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Interactive/Clickable map

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    12

    Interactive/Clickable map

    Hello

    I am very new to this and only know basic html and css ocding at the moment. Of course I wish to change this.

    I want to make an interactive map. For example, South America. There are 12 countries in South America. I want to be able to make the map clickable. Also I would like to make it so that when you put your mouse over a country the name appears. It could be on the map or in a little pop up box.

    I have seen a way to do this. It involved fireworks and Flash8. I have neither and I dont have the money for these.

    Is there a way to do this without these? Is there free software I can aquire to do this with flash? Can I do it with something like javascript/css/html?

    I need about 10 maps in total. The number of clickable areas on the maps will be 25 or less.

    Any guidance is greatly appreciated. I am inexperienced but willing to learn and spend as long as necessary to do this. If it is a bit of a tedious job that is ok as well.

    thanks

  2. #2
    Join Date
    Feb 2011
    Posts
    231
    Hi,
    You can create a map from an image, with clickable areas with html, see this page: Image map , of course, you can add id and class to use in css or javascript.

  3. #3
    Join Date
    Feb 2012
    Posts
    12
    Quote Originally Posted by MarPlo View Post
    Hi,
    You can create a map from an image, with clickable areas with html, see this page: Image map , of course, you can add id and class to use in css or javascript.
    ok thanks a lot. Countries often have a very complex shapes, how would I find the co-ordinates?

  4. #4
    Join Date
    Feb 2011
    Posts
    231
    Try with an image editor that shows the coords of your mouse on the picture, one of this editor is PhotoFiltre .

  5. #5
    Join Date
    Feb 2012
    Posts
    12
    Quote Originally Posted by MarPlo View Post
    Try with an image editor that shows the coords of your mouse on the picture, one of this editor is PhotoFiltre .

    ok cool thanks a lot for your help.

    Three last questions if possible

    - Do you think a flash map would work better than this?

    - Can you make it so that when your point your mouse over a paticular country it changed colour as well? So the whole map is orange for example. When you put your mouse over Brazil that country's colour changes to red.

    - Will having a very long list of co-ordinates effect the map in a negative way? will it make it slow to use or laggy?

  6. #6
    Join Date
    Feb 2011
    Posts
    231
    1. In a flash map you can add more effects.
    2. Maybe its posible with javascript, or adding yellow opacity with css.
    3. I don't know, i saw a html image map with 40 maps and it was working fine.

  7. #7
    Join Date
    Feb 2012
    Posts
    12
    Quote Originally Posted by MarPlo View Post
    1. In a flash map you can add more effects.
    2. Maybe its posible with javascript, or adding yellow opacity with css.
    3. I don't know, i saw a html image map with 40 maps and it was working fine.
    regarding 2 would this mean that as you run your mouse over a paticular area it becomes more/less opaque? If this is the case then I will be happy using this method

  8. #8
    Join Date
    Feb 2011
    Posts
    231
    I don't know if it works, just try. It was just an ideea.

  9. #9
    Join Date
    Feb 2012
    Posts
    12
    Quote Originally Posted by MarPlo View Post
    I don't know if it works, just try. It was just an ideea.
    Thanks for the advice. I made a clickable map of South America pretty easily. I just need to find a way of making the countries light up (or change in some way) when you scroll over it. Also a way of making the country name pop up when you put your mouse over it.

    Thanks for all the advice

  10. #10
    Join Date
    Feb 2012
    Location
    Northern Colorado USA
    Posts
    4

    Try this on for size

    Maps are what I do for a living....the following link is how you can create a free, and absolutely correct interactive map without having to use flash or any other difficult code strings:

    ArcGIS Map Maker

    With a little manipulation of the code it goves you, you can limit the map display to anywhere in the world. There are all sorts of help pages to guide you along.

    Cheers,

    Adam

  11. #11
    Join Date
    Feb 2012
    Location
    Northern Colorado USA
    Posts
    4

    Talking One quick thing...

    You need to create a login for the site to be able to save your map and get the code/link.....it's no biggie...no worse than registering here.

  12. #12
    Join Date
    Aug 2009
    Location
    Ireland
    Posts
    25

    Google ViZ

    You might find what your looking for through google visualisation.

    Really easy to use API for interactive map. Check it out!

    http://code.google.com/apis/chart/in...ry/geomap.html

  13. #13
    Join Date
    Feb 2012
    Location
    Northern Colorado USA
    Posts
    4
    BTW...ArcGIS is from ESRI...they are the world's leader in mapping software and web mapping development. I use several forms of their software (client and server side) everyday.

  14. #14
    Join Date
    Feb 2012
    Posts
    1

    flashmaps.com and jquerymaps.com

    I work for Flashmaps. We are specialized in building just that kind of maps for all kind of organizations, including 25% the Fortune-50 companies. But don't worry, we also work for home-based businesses, our prices are very reasonable, it will cost you ten times more to build the maps yourself. We are now launching jquerymaps.com, where we offer pretty much the same interactivity as in Flash-based maps, but just using JavaScript and jQuery. Really neat, people are loving them, we are switching a lot of existing clients to this new solution. Check out this sample http://www.jquerymaps.com/showcase/001/ You can contact us at flashmaps.com

  15. #15
    Join Date
    Jan 2009
    Posts
    88
    Here is an online map builder which you can use instantly to make interactive maps South America, North America, or for a specify country, or state -- http://www.imapbuilder.net/

    This online map editor allows you to build custom maps using ready-made flash map templates, or google map, or by using any JPG / PNG image (which they will convert to flash to make it interactive). There is also a windows version which you can download for using on your own PC.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles