Question

I basically have an image of a world map and i would like to place a pin image at a specified pixel co-ordinate ontop of this world map image.

It’s for a website, so ideally the solution should be in PHP or Javascript (i’m avoiding Java and Flash as i want it to be as simple as possible).

I had a look at the processing.js library but it is way to big and bloated for just performing this simple task.
Is there a pre-existing Javascript function which will allow me to do this? Or a more simple javascript library that i can use? (processing.js was a bit too advanced for me, i couldnt get it working lol)

In terms of a PHP solution, i would prefer taking the load off the server and onto the client for this task, but i would still like to hear methods for doing it in PHP if they are suitable.

Thanks!

Answer 1

the easiest way to do this is to put pin image over map image and set them position in css like this:

<div style="position:relative">
  <img src="map.png" style="position:absolute; top:0px; left:0px; z-index:0"/>
  <img src="pin.png" style="position:absolute; top:50px; left:30px; z-index:1"/>
</div>