/    Sign up×
Community /Pin to ProfileBookmark

Interactive/Clickable map

Copy linkTweet thisAlerts:
Feb 15.2012

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

to post a comment
Full-stack Developer

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@MarPloFeb 15.2012 — Hi,

You can create a map from an image, with clickable areas with html, see this page: [url=http://www.coursesweb.net/html/image-map]Image map[/url] , of course, you can add id and class to use in css or javascript.
Copy linkTweet thisAlerts:
@muddy51authorFeb 15.2012 — Hi,

You can create a map from an image, with clickable areas with html, see this page: [url=http://www.coursesweb.net/html/image-map]Image map[/url] , of course, you can add id and class to use in css or javascript.[/QUOTE]

ok thanks a lot. Countries often have a very complex shapes, how would I find the co-ordinates?
Copy linkTweet thisAlerts:
@MarPloFeb 15.2012 — Try with an image editor that shows the coords of your mouse on the picture, one of this editor is PhotoFiltre .
Copy linkTweet thisAlerts:
@muddy51authorFeb 15.2012 — Try with an image editor that shows the coords of your mouse on the picture, one of this editor is PhotoFiltre .[/QUOTE]


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?
    • Copy linkTweet thisAlerts:
    @MarPloFeb 15.2012 — 
  • 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.
    • Copy linkTweet thisAlerts:
    @muddy51authorFeb 15.2012 — 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.[/QUOTE]

    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
    Copy linkTweet thisAlerts:
    @MarPloFeb 15.2012 — I don't know if it works, just try. It was just an ideea.
    Copy linkTweet thisAlerts:
    @muddy51authorFeb 15.2012 — I don't know if it works, just try. It was just an ideea.[/QUOTE]

    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
    Copy linkTweet thisAlerts:
    @admessingFeb 15.2012 — 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
    Copy linkTweet thisAlerts:
    @admessingFeb 15.2012 — 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.
    Copy linkTweet thisAlerts:
    @admessingFeb 15.2012 — 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.?
    Copy linkTweet thisAlerts:
    @debuitlsFeb 16.2012 — 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/interactive/docs/gallery/geomap.html
    Copy linkTweet thisAlerts:
    @jquerymaps_comFeb 18.2012 — 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
    Copy linkTweet thisAlerts:
    @tedscoffeeFeb 21.2012 — 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.
    Copy linkTweet thisAlerts:
    @virtualsenseDec 19.2013 — There's a jQuery plugin for that: http://www.virtualsen.se/map/
    ×

    Success!

    Help @muddy51 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.6,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...