Creating an interactive map?

I'm looking to make an interactive map that will do the following:
1) portions of the map will change from white to blue when scrolled over
2) will point towards a different link when different sections of the map are clicked on.
I've got #2 mostly figured out, but I need help  getting the different regions of the map to change colors when highlighted.  Can someone kindly help me with this?
thank you,
Anthony

One way would be to make each portion a twooframed movieclip with one frame having the white and the other having the blue.  Use ROLL_OVER and ROLL_OUT event listeners to control which frame is displayed.

Similar Messages

  • How do I create an interactive map?

    How do I create an interactive map using digital publishing suite in InDesign? Basically it's an amusement park map and when you click on a button I want a description page of a ride to show that has interactivity on it and then it can be closed and another button on the map can be clicked to show another description page of a different ride. Is that possible?

    Use a multi state object. Depending upon how many point of interest you want on that map it can get pretty involved.

  • Creating an interactive map, using buttons, help!?

    Hi,
    I am attempting to create an interactive map of the college I work at.  I have created a button and when you click on the area, it displays info about the particular room or subject.
    I am using Oject States for the room/subject info and when you press the button to select it, when the room info is displayed (as it should), but the button appears on the top of it.
    I would also like to have a back/close button to go back the the original map.
    Please help, I am new to this and would appreciate any help.
    Thanks

    To Bob Bringhurst,
    Maybe you could show your workaround as a step by step approach
    http://blogs.adobe.com/indesigndocs/2010/12/hot-spot-button-workaround -for-indesign-dig-pubs.html
    Having also viewed this video on creating a tooltip.
    Im still having problems after viewing the above video's to get Multi State Objects viewing correctly on the iPad.
    This might resolve a problem for myself, and possibly others.
    Regards
    Vividi

  • Advice on using Edge Animate & Interactive SVG to create an interactive map

    Hello folks, I'm hoping for some guidance on a complicated graphic. My org. has an existing interactive map which was created by a freelancer for us using Ruby and js. It's very nice but I wanted to see if it's possible to recreate using Edge Animate (both as a challenge to myself and as a way of being able to move ownership of it in-house). Here's the map:
    http://csai-online.org/sos
    I have done a fair amount of work in Edge Animate but have mostly stuck with simple interactivity (play, repeat, navigation links, etc.) so this would be a stretch. But I'm thinking that the map itself (with various shadings) could be recreated using Edge Commons' Interactive SVG function. I would create the map in Illustrator as an svg with different layers for each group of states, which would then be activated by the buttons in Edge Animate. (The floating box could be done entirely in Animate.)
    So my questions are,
    - Does this seem doable, and has anyone done something similar?
    - How do I trigger the layer visibility toggle from Edge? There's a tutorial from Edge Commons which changes the color of an object by CSS, but it seems like it would be simpler to use layer visibility.
    - Some of the combinations of checkboxes result in States that are in multiple groups (resulting in a striped fill). I'm guessing I'd need to add some code to indicate that if buttons X and Y were both checked, a third combined layer would be shown. (A further complication is that each of the groups of buttons shuts off the other groups.)
    Alternately, it seems like I could also create each state as a series of differently-colored graphics which are then shown or hidden based on which buttons are checked (using arrays, maybe?), but that seems a messier due to the million separate images.
    Anyway, how would you approach this problem, I guess is my main question.
    Thanks very much.

    This looks pretty simple to me and I don't see why you wouldn't be able to do it in edge animate.
    Create each state as a button and animate the hover effects inside a symbol and then on the main timeline animate the content boxes opacity to on and off and set labels for each "on" state and then in your button link to that label in the mouse over actions preset.u
    As far as calling the bottom content into the div i would just do that by hand by grabbing a simple script off the internet. *theres loads*

  • Problem in creating an interactive map

    Hello,
    Fist thinks fist, I'm so glad and excited to discover this community, and i hope to have fun learning from you
    well, I'm trying to make an interactive map on fireworks, i created pictures of different countries thanks to the magic tool (see capture 1), now i'm trying to make each of those pictures a button. is there some way to make them all in the same time instead of going one after an other (which i think will take me a decate to finish them all !) ?
    Thanks

    Hi Ned, thanks for your answer. that's right, i prefer fireworks over photoshop too !
    I've decided to develop the map in fireworks then take it to edge animate to make some fancy animations, in fireworks i want to creat buttons for each country, do you know a way to creat all buttons for all countries in the same time instead creating one after an other (it's gonna take me a decade to finish them all !).

  • Attempting to create an interactive map with flash - getting errors with my actionscript

    I'm currently having an issue creating a set of buttons that are supposed to turn individual layers on and off.  The layers I have are: fishing spots, facilities, trails, map elements, an aerial photo, and parking lots.  It is giving error #s 1119 and 1120.  Could anyone explain possible reasons I'm getting these errors. 
    It might be worth mentioning that I used a tutorial made with Flash CS4, but I'm writing the code in CS5.  Here is the exact code I'm using:
    spots._visible = false;
    facilities._visible = false;
    parking._visible = false;
    elements._visible = true;
    aerial._visible = false;
    trails._visible = false;
    displayedSpots._visible = false;
    displayedFacs._visible = false;
    displayedTrails._visible = false;
    displayedEles._visible = true;
    displayedAerial._visible = false;
    displayedPark._visible = false;
    fsbtn.onPress = function() {
              if (spots._visible == false) {
                        spots._visible = true;
                        displayedSpots._visible = true;
              } else {
                        spots._visible = false;
                        displayedSpots._visible = false;
    facbtn.onPress = function() {
              if (facilities._visible == false) {
                        facilities._visible = true;
                        displayedFacs._visible = true;
              } else {
                        facilities._visible = false;
                        displayedFacs._visible = false;
    trbtn.onPress = function() {
              if (trails._visible == false) {
                        trails._visible = true;
                        displayedTrails._visible = true;
              } else {
                        trails._visible = false;
                        displayedTrails._visible = false;
    mebtn.onPress = function() {
              if (elements._visible == false) {
                        elements._visible = true;
                        displayedEles._visible = true;
              } else {
                        elements._visible = false;
                        displayedEles._visible = false;
    aebtn.onPress = function() {
              if (aerial._visible == false) {
                        aerial._visible = true;
                        displayedAerial._visible = true;
              } else {
                        aerial._visible = false;
                        displayedAerial._visible = false;
    pbtn.onPress = function() {
              if (parking._visible == false) {
                        parking._visible = true;
                        displayedPark._visible = true;
              } else {
                        parking._visible = false;
                        displayedPark._visible = false;

    Only thing i see is that you are using == instead of = , Fixed Example...
    fsbtn.onPress = function() {
              if (spots._visible = false) {
                        spots._visible = true;
                        displayedSpots._visible = true;
              } else {
                        spots._visible = false;
                        displayedSpots._visible = false;
    == Is used for equality.
    = Is used for setting a value or in this case checking a value.

  • How to create an interactive map?

    Hi,
    I'd like to insert an infographic in my keynote presentation, like a map coupled with a pie chart or bar on different regions, like those you find in atlases.
    is there a plug-in for keynote to do that?
    thanks,

    If you create your map in sections using the shape tool in Keynote you can turn each shape into a hyperlink. Alternatively you can place objects (e.g., shapes or text) on top of the map and use them as hyperlinks. You could also break the map into sections (outside Keynote), import and place the sections in Keynote to reassemble the map, and attach hyperlinks to each section. Post again if you need more detail.
    Hope that helps.

  • Creating an interactive map in flex

    I'm building a new web site to my company, we need to to create a map in wich the user will click in a place and that place must set the user to another page in the same web site, fist of all I tough to make each state as a button, however as the states are not in square shape (as a button) I don't know how to create these buttons.
    Is it possible to use a picture form as a button?
    or as I know how to create irregular form button in flash wich command should I use to go to another page inside de the flex page without opening another explorer windows as happens using the getURL function?
    Thanks for your attention
    Heverson
    from Brazil 

    You could check localX and localY properties or stageX and stageY properties of the MouseEvent to handle clicking on irregular shapes.
    You should use a ViewStack to navigate to another page.
    These links will answer your question:
    http://livedocs.adobe.com/flex/3/html/help.html?content=containers_intro_5.html
    http://livedocs.adobe.com/flex/3/html/help.html?content=navigators_3.html
    http://livedocs.adobe.com/flex/3/langref/mx/containers/ViewStack.html
    If this post answered your question or helped, please mark it as such.

  • A bright spark needed to create an interactive renewable energy map

    Hi,
    A Melbourne-based group, Beyond Zero Emissions, are about to release a 200+ page plan (already endorsed or supported by quite a few illustrious people) for Australia's stationary electricity to be provided entirely by wind and solar energy using existing technology by 2020. It would be great to create an interactive map that would show in a nutshell how this plan would work. Please contact me if you are interested in this project.
    BZE's website is www.beyondzeroemissions.org.
    Thank you,
    Petra Liverani
    [email protected]

    Hi!
    My name is Dirk and i have a platform for solar energy products in NL. Maybe it wil inspire you...
    Take a look at:
    http://www.energytoko.com
    Succes with this great plan of you

  • Acrobat X Pro interactive Map/Dropdown fields

    I create a variety of .pdfs for different purposes which are all related to the same parent (in this case a building on a site).
    I now want to create an interactive map so that I can click the building (button, graphic shape or image etc) and be presented a collapsable list so that I can then select (from a list) the .pdf I am interested in (discipline specific) and open it in a new acrobat window. Each .pdf name in the dropdown list is to represent a separate .pdf file from the same or different network storage location (I am aware the file name(s)/location(s) must not change).
    I have investigated Acrobat X Pro, Adobe Illustrator CS4 and Adobe InDesign CS4. I have decided to target Acrobat as Illustrator did not seem to allow linking and InDesign did not seem to allow List Boxes or Dropdowns for linking purposes. Also, I only wanted to create/manage one file (my interactive map)...my 'menu'...in graphical form...without going down the path of creating a web site.
    Am I on the right track? Is this possible?
    However, after adding the Dropdown field to my form (interactive pdf map), although it allowed any of the available list items to be selected, it DID NOT allow different actions for different list items!
    I added two separate Open file actions (which could not be linked to the two separate list items)...one to open a pdf ffrom one location and the other to open a separate pdf from another location. When you click the field (button)...it just opens BOTH pdf files! Not what I wanted.
    I would have thought that the very nature of a Dropdown list is to be able to select from a collapsable list and perform a specific action on that selection (after all, it does allow multiple similar actions, along with multiple different actions).
    Can THIS be done?...in Acrobat?...in another Creative Suite application?

    Thanks, but...I could not find a `combo box' field, and I have to ask why would I have to write custom code when the `dropdown' field is provided?
    Why can't a different action be linked to a different list choice in a dropdown field?
    If I want to perform a single action, then I would use a `single' button, but that's not what I want to do.

  • Interactive map display

    Hello. I've a small problem if anyone can help... As part of an ongoing project I'm trying to create a GPS interfacing program that talks via the serial port to retrieve stored GPS reference data stored on aGPS device. This data will then be converted and displayed on an image of a map (such as one would get from multimap or similar) in 'breadcrumb' form (each spot will appear on the particular road (derived from processing the co-ordinates)) whereby then each breadcrumb can then be clicked on and specifics will be displayed (such as the speed, direction etc.)
    My problem, however, is how to create the 'interactive' map. Everything else works in the backend;I just can't seem to figure out how to do this bit! I'm currently holding the map image (images/map.gif) in a JPanel. The nodes are created in a class called GPSNode. The communications are done through the classes GPSController(the main class), GPSDataInterface(the interface for the data - the GPS returns an unformatted string), GPSDataUnit(calculates the information for the node), PortOpen and a few exception classes.
    Cheers,
    Al Sweetman.

    The interaction process should be as follows:
    1. User clicks on JPanel
    2. MouseEvent tells you where they clicked (x,y)
    3. Cross reference the location with the information aquired from the serial port.
    The key is to filter out all useless information based on where the user clicks (x,y). Then translate the useful information back to the graphical surface.

  • Embed interactive map HTML5 files in Muse CC website

    I am illiterate when it comes to code and therefore I am using Muse and not Dreamweaver to build a website.
    I have created a interactive map that I wish to embed in this Muse website, with Avenza Mapublisher, an Adobe Illustrator Plugin, and exported it to HTML5.
    The result is an index.html file as well as a folder containing scripts and subfolders containing map tiles at different zoom levels.
    When I open the index.html in a browser it works 100%.
    Now I want to embed it into a Muse website.
    The HTML code in the index.html can be inserted via Object - Insert HTML in Muse CC.
    In order for it to work the scripts in the folder needs to accessed. I changed all relative paths in the HTML code to "assets/" and try to use the "add files for upload" function in Muse to upload the scripts as assets in Muse. This worked and the scrips could be accessed.
    The map tiles however (jpg tiles in different subfolders for different zoom levels), reside in subfolders whose folder structure needs to be preserved.
    Unfortunately Muse does not allow me to upload a folder as an asset. I cannot add the tiles in the subfolders individually, as the scripts, depending on the zoom level, fetches different tile sets from different subfolders.
    Can anyone please give me directions on how to embed this map in a Muse website?
    HTML5 that I wish to embed:
    Inside the assets folder:
    Inside layer_1_files folder (Different zoom levels)
    Inside folder 12 for example (zoom level 12)

    I was able to reproduce the problem at my end with a similar setup. This is happening as HTML5 renders images a little differently and Muse uses HTML5. Refer to the following thread for more explanation on this. - http://stackoverflow.com/questions/8722017/weird-html5-sliced-images-margin-top-bottom-iss ue
    So in your case, simply add the following CSS to Home -> Page Properties -> Metadata -> HTML for <head> and re-publish.
    <style type="text/css">
    img { display: block; }
    </style>
    You might also want to re-upload /Narin-&-Portnoo.gif to the /assets/ folder as it appears it hasn't been uploaded properly and is currently generating a Bad request error. However, if re-uploading doesn't help, change the file name removing any special characters, re-upload and update the embedded HTML.
    Thanks,
    Vinayak

  • How can I create a interactive image on ibook author, just like the temperatures map on the "life on earth" book?

    I need a create an interactive image at the ibook author app, but I don´t know how, I saw the interactve image in the "life on earth" book, from the apple store, in an temperature map
    apreciate that someone could help me, please

    Doesn't work w/iBA books & iBooks 2, sorry.

  • How to create interactive map in SAP Visual Business using SAP UI5 SDK

    Hi,
    Please tell me,
    How to create interactive map in SAP Visual Business using SAP UI5 SDK.
    Is it possible to create interactive map using VB Control in SAP UI5 SDK..?
    if possible please any one let me know.

    Hi folks, one question:
    We have our development close moved and now it is earlier than originally planned. 
    That means that we maybe can't finish our convenient API and you have to wait till we will release it - early 2015 is planned.
    But there is another option:
    Currently we have a API based on json. The developer has to create json and  to transfer it to the Visual Business control.
    This interface is more used as a low level API and we are developing on top the more convenient one. So all the features are the same.
    It will stay stable & compatible in the future and you can build on it.
    Do you want to use this interface?  
    Then I will publish the documentation.
    Let me know.
    Thanks

  • How to create a huge interactive map?

    Hello everybody
    I've started learning Flash two weeks ago and I have the challenge of creating an interactive political map with about 4000 cities. Some cities will have more than 600 lines defining their limits which will make this project very demanding on processing.
    People will be able to zoom in/out, select cities and see information about them.
    As a starting point, I've begun working with 500 cities. I've imported a vectorial drawing of these cities and converted each one of them to symbols using flash javascript, resulting of course in 500 symbols. I don't know if it was a good way of starting this project but worked for me. Then my problems begun.
    First I tried to use the mouse roll over and roll out events to change the (fill) color of cities but the city limits (stroke) changed also.
    Second I want to add some properties to the cities such as city code, name, etc. but I wasn't able to do that using class inheritance. Would I have to create a different City class for every symbol I would like to extend? This approach looks like a lot of headache and redundant work.
    Finally my question is should I start all over again and change my approach? If yes, how? If no, how can I solve those two problems?
    Thanks

    can't answer everything but I find this project very ambitious for someone with 2 weeks experience. I give you credit for trying.
    as for the color changes, in each city symbol you need to have a separate "fill" symbol so that you can change the color of the fill and not the stroke.
    also this link will help you understand the concept and confusion of target, currentTarget, mouse_over vs roll_over:
    http://www.wastedpotential.com/?p=10
    if each of your mc's is using a City.as class, that should work fine for giving each city the same properties. No need to create 500 different classes. I'm not an OOP expert but I know what you are trying is very possible and should be straight-forward.
    Get Colin Moock's Essential ActionScript 3.0 and Shrupe's Learning ActionScript 3.0 for a crash course on implementing something like this.

Maybe you are looking for