4 Replies Latest reply on Sep 12, 2007 2:54 AM by tnylsej

    Creating custom map

    tnylsej Level 1
      Hi all,

      I would like to create a custom map (in jpeg format) with the coordinates (0,0) in the middle of the map image. When the user mouse-over the map, coordinates of the map where the cursor is will be displayed. Coordinates changes as the cursor moves.

      It's something like the google map. But I would like to use my own map instead of the world map.

      Any help is very much appreciated. ^^
        • 1. Re: Creating custom map
          theLoggerGuy Level 1
          Thanks. That was fun to write. I've used a box, but an image should work the same way. Just put the code below into a new application and run...

          Note: to make the centre 0, 0 then you just need some maths using the image height and width.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"

          import mx.controls.Alert;

          private function showMouseCoords( ): void
          if ( false == mousePointer.visible )
          mousePointer.visible = true;

          mousePointer.x = stage.mouseX - mousePointer.width / 2;
          mousePointer.y = stage.mouseY - mousePointer.height / 2;

          mouseBoxCoordsLabel.text = "Box: mouseX = " + myBox.mouseX + ", mouseY = " + myBox.mouseY;
          mouseStageCoordsLabel.text = "Stage: mouseX = " + stage.mouseX + ", mouseY = " + stage.mouseY;

          <mx:Box id="myBox" width="400" height="200" mouseMove="showMouseCoords()"

          <mx:Box id="mousePointer" width="7" height="7" backgroundColor="0xFFFFFF" visible="false"
          click="Alert.show( 'mouseX = ' + myBox.mouseX + ', mouseY = ' + myBox.mouseY );"/>

          <mx:Label id="mouseBoxCoordsLabel" width="400"/>

          <mx:Label id="mouseStageCoordsLabel" width="400"/>
          • 2. Creating custom map
            tnylsej Level 1
            It works! Thanks so much ^^

            Here's another problem.

            The first part of the application allows the users to scale the image (ie. zoom in / zoom out). I did this by changing the size of the image as the user moves the scaling slider.

            The second part of the application is the one you'd just solved for me.

            But when the user decides to change the scale of the image, the coordinates will not tally anymore.

            Eg, a tree in the 500x500 image has coordinates (10,40), but after the user changes the scale of the image to 1000x1000, the coordinates of the tree is no longer (10,40).

            How should I make the coordinates consistent regardless of the scale?

            • 3. Re: Creating custom map
              theLoggerGuy Level 1
              Hmm. How about multiplying the scale by the co-ordinate.

              var xValue: Number = myImage.scaleX * myImage.mouseX
              var yValue: Number = myImage.scaleY * myImage.mouseY

              I can't try it now, but see how you go.
              • 4. Re: Creating custom map
                tnylsej Level 1
                It's ok.. you've been of help ^^

                I need to make some changes to the application, will have to work on this later.

                Thanks so much. =D