# Dragging a map image

**URL:** <https://forum.kirupa.com/t/dragging-a-map-image/319403>\
**Category:** Uncategorized\
**Created:** [February 19, 2011, 4:23am UTC](https://forum.kirupa.com/t/dragging-a-map-image/319403 "2011-02-19T04:23:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheJustMe](https://avatars.discourse-cdn.com/v4/letter/t/f4b2a3/32.png) [@TheJustMe](https://forum.kirupa.com/u/TheJustMe)\
**Post date:** [February 19, 2011, 4:23am UTC](https://forum.kirupa.com/t/dragging-a-map-image/319403/1 "2011-02-19T04:23:25Z")

</div>

OK so I have been working on this project. I am pretty new to flash but developing a map application with pan and zoom. I decided to improve it slightly by adding in mouse functionality. I have the mouse wheel controlling zoom, and I understand the object.startdrag and stopstopdrag and how to make it work. How ever it moves the entire object, which meeses up the built in buttons that pan around the map.

I am wondering if any of the flash gurus on this site would venture a guess for a solution to making mouse down add a pan function similar to the way button clicks work.

```auto

import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Button;

var measure:Number = 4800;
var measure2:Number = 4800;

var s:Slider = new Slider();
s.move(25,10);
s.liveDragging = false;
s.setSize(550,15);
s.maximum = 5;
s.minimum = 1;
s.tickInterval = 1;
s.addEventListener(SliderEvent.CHANGE, announceChange);
addChild(s);

stage.addEventListener(MouseEvent.MOUSE_WHEEL, zoom);

var uB:Button = new Button();
var dB:Button = new Button();
var lB:Button = new Button();
var rB:Button = new Button();

uB.name = "uB";
dB.name = "dB";
lB.name = "lB";
rB.name = "rB";

uB.label = "UP";
dB.label = "DOWN";
lB.label = "L
E
F
T";
rB.label = "R
I
G
H
T";

uB.width =600;
dB.width =600;
lB.width =22;
rB.width =22;
uB.height = 22;
dB.height = 22;
lB.height = 550;
rB.height = 550;

uB.emphasized = true;
dB.emphasized = true;
lB.emphasized = true;
rB.emphasized = true;

uB.move(0,30);
dB.move(0,608);
lB.move(0,53);
rB.move(578,53);

uB.addEventListener(MouseEvent.CLICK, buttonClick);
dB.addEventListener(MouseEvent.CLICK, buttonClick);
lB.addEventListener(MouseEvent.CLICK, buttonClick);
rB.addEventListener(MouseEvent.CLICK, buttonClick);

addChild(uB);
addChild(dB);
addChild(lB);
addChild(rB);

var picHolder:Sprite;
var picMask:Sprite;

_constructor();

var picMap:map=new map();
picMap.width=550;
picMap.height=550;

picMap.addEventListener(MouseEvent.MOUSE_DOWN, mapDown);
picMap.addEventListener(MouseEvent.MOUSE_UP, mapUp);

addPic(picMap);
s.value = 5;

function mapDown(e:MouseEvent) 
{

    if(s.value <5)
    {
        trace("moving");
    }
    else
    {
        trace("no move");
    }
}
function mapUp(e:MouseEvent) 
{
    trace("release");
}

function addPic(d:DisplayObject):void
{
    while(picHolder.numChildren)picHolder.removeChildAt(0);
    picHolder.addChild(d);
    picMask.graphics.clear();
    picMask.graphics.beginFill(0);
    picMask.graphics.drawRect(0,0,550,550);
}

function _constructor():void 
{
    picHolder=new Sprite();
    picHolder.x = 23
    picHolder.y = 53;
    addChild(picHolder);
    
    picMask=new Sprite();
    picHolder.mask=picMask;
    picMask.x=picHolder.x;
    picMask.y=picHolder.y;
    addChild(picMask);
}

function zoom(e:MouseEvent)
{
    var changed:Boolean = false;
    if(e.delta > 0)
    {
        if(s.value > 0)
        {
         s.value--;
         changed = true;
        }
    }
    else
    {
        if(s.value < 5)
        {
         changed = true;
         s.value++;
        }
    }
    if(changed)
    {
        s.dispatchEvent(new SliderEvent(SliderEvent.CHANGE, s.value,'SliderEventClickTarget.THUMB', 'InteractionInputType.MOUSE'));

    }
}
function announceChange(e:SliderEvent):
void 
{
    if(e.target.value < 5)
    {
        measure2 = 2400 / e.target.value;
        picHolder.height = 4800 / e.target.value;
        picHolder.width = 4800 / e.target.value;
    }
    else
    {
        measure2 = 550;
        picHolder.height = 550;
        picHolder.width = 550;
        picHolder.x = 23;
        picHolder.y = 53;
    }
    if(picHolder.x < (23 - picHolder.width + 550) )
    {
        picHolder.x = 23 - picHolder.width + 550;
    }
    if(picHolder.x > 23)
    {
        picHolder.x = 23;
    }
    if(picHolder.y > 53)
    {
        picHolder.y = 53
    }
    if(picHolder.y < 53 - picHolder.width + 550)
    {
        picHolder.y = 53 - picHolder.width + 550;
    }
        
}
function buttonClick(e:MouseEvent) 
{
    //trace("x: " + picHolder.x + " y: " + picHolder.y +" width: " + picHolder.width +" hright: " + picHolder.height );
    if(measure2 != 550)
    {
        switch (e.target.name)
        {
            case "uB":
                picHolder.y += picHolder.height/30;
            break;
            case "lB":
                picHolder.x += picHolder.width/30;
            break;
            case "dB":
                picHolder.y -= picHolder.height/30;
            break;
            case "rB":
                picHolder.x -= picHolder.width/30;
            break;
        }
    }
    if(picHolder.x < (23 - picHolder.width + 550) )
    {
        picHolder.x = 23 - picHolder.width + 550;
    }
    if(picHolder.x > 23)
    {
        picHolder.x = 23;
    }
    if(picHolder.y > 53)
    {
        picHolder.y = 53
    }
    if(picHolder.y < 53 - picHolder.width + 550)
    {
        picHolder.y = 53 - picHolder.width + 550;
    }
    
}

```

to preview the app in action:

[http://sci.tamucc.edu/~beveritt/WorldMap.html](http://sci.tamucc.edu/%7Ebeveritt/WorldMap.html)

The site is under construction, but the app should load and work just fine.