0

I'm building a custom location selector for the user, which is essentially a map (image) and a text input where the user enters his country. The custom map is about 1500x1000px. The final goal is to slowly auto-scroll the map to a certain pre-defined x,y of the selected country. How can I define, lets say, that Germany is located at 700x800, and center the map image around that point when the user selects that country from the drop down list?

Here's my fiddle, which includes the move-able map (I'm not adding any code in here because it is long, please excuse me and use the fiddle to browse the code)

isherwood
  • 58,414
  • 16
  • 114
  • 157
Alex
  • 1,982
  • 4
  • 37
  • 70
  • This will depend on the map projection type. If it's mercator for example. Take a look at this http://stackoverflow.com/questions/14329691/covert-latitude-longitude-point-to-a-pixels-x-y-on-mercator-projection – Radio May 13 '15 at 16:06

1 Answers1

2

Use the Position object for this. Let's say

var germany = new Position(-700,-800);

You can set the position by using the rest of your code:

germany.Apply(document.getElementById('draggableElement'));

Although I guess that it will set the position of the top left corner and not the center, so you'd need to keep that in mind.

EDIT: Changed the numbers to negative numbers because this will actually move the picture up and left which I assume is the behaviour you want.

For presentation purposes I have added a button to your Fiddle. Although this is definitely not germany ;)

EDIT2: To animate the position change with jQuery's animate just use this syntax:

$('#draggableElement').animate({
    left: germany.X,
    top: germany.Y
});

Also see the updated JSFiddle.

ImreNagy
  • 511
  • 2
  • 10