3 Replies Latest reply on Nov 12, 2010 12:37 AM by linrsvp

    Clickable areas on a picture (map) ?

    Celinio Level 1


      I have a map of a country on the left and a panel on the right.

      I want to make the cities on the map clickable so that when a user clicks on one of them, the details of the city is displayed on the right panel.


      1) How do i render certain areas of a picture (map) clickable ?

      2) what about the interaction with the right panel ? how do i do that ?


      Thanks for helping, i am a beginner.

        • 1. Re: Clickable areas on a picture (map) ?
          BennyBeta Level 4

          From a very high-level, a solution could be:


          1. Start with a Canvas control for your map.  We want this because a Canvas supports absolute positioning.
          2. Set the map image to be the Canvas background: canvas.setStyle( "backgroundImage", urlToImage );
          3. Use a Canvas for each clickable map city using cooridates (x,y) for absolute positioning over each city.
          4. Set the data of each canvas-city to be the city name or some other identifier.
          5. When you click on a canvas set an application variable of the city name/identifier using a "click" event listener.
          6. Bind the right panel's display to the "current city" application variable.


          Is that what you were looking for?

          • 2. Re: Clickable areas on a picture (map) ?
            Celinio Level 1

            Thanks Ben, that helped.


            I gave up the idea of using an HDividedBox tag because if i resize the panel to the left or to the right, then the canvas of the cities are all displaced.


            Anyways, i am a beginner, it is a bit tricky to make things interact.

            Thanks again for your quick answer, that helped.

            • 3. Re: Clickable areas on a picture (map) ?
              linrsvp Level 1


              I am using a border container to provide a background image for my application. And I need to make certain parts of this image clickable. Does your solution hold true for this case too ? I am fairly new to Flex, so any help would be great!