XHTML, CSS - How can I solve this problem?

[pwntifex]

Hi,
I'm working on setting up a travelblog on my site.
One of the features I'd like to have is a map system where I can show users exactly where I am at the present point by drawing a little dot on a map.

It'd work a bit like the way the location system works on BCF: I'd have a base image like this:

https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Uk_outline_map.png/450px-Uk_outline_map.png

And I'd be able to basically put a dot on the image wherever I was.
I don't need the backend calculation crap, all I need to know is

The best way to actively superimpose one image onto another image (preferably linkable, so that I can link to the latest post).
Thoughts?
____________________
the warped one: This is a follow up from the thread 'my willy hurts'

[bob-a-job]

<div class="main">
<img class="map" src="Uk_outline_map.png" alt="This is the map">
<img class="dot" alt="This is the dot">
</div>

<style type="text/css">
.main
{
position: relative;
}
.dot
{
position: absolute;
top: 10px;
left: 22px;
}
</style>


Briefly tested on IE7 + FF, not got any other testbeds..


Not sure what you mean by linkable to the latest post...

[bob-a-job]

Two links added in to make the map and dot linkable (guessedthis is what you meant). NOTE that that class for the dot has moved from the image to the <a> ref...

<div class="main">
<a href="#Map_is_linked"><img class="map" src="Uk_outline_map.png" alt="This is the map"></a>
<a class="dot" href="#Dot_is_linked"><img alt="This is the dot"></a>
</div>

<style type="text/css">
.main
{
position: relative;
}
.dot
{
position: absolute;
/* Y co-ord */
top: 100px;
/* X co-ord */
left: 22px;
}
</style>

[bob-a-job]

Oh and tw, i think the image created by this board is done on the server using image processing, ie the dots are drawn on map image by the server...

[Dom]

[bob-a-job]

You are correct... well done have a karma cookie

should really check these sort of things before I say stuff...

[pwntifex]

Wish I could create a script that placed the dot based on postcode...
Thanks for the code bob!
____________________
the warped one: This is a follow up from the thread 'my willy hurts'

[sagalout]

Postcodes in the UK are a nightmare because the Post Office own the rights to them. I've done a fair bit of geomapping for a few sites using googlemaps. Technically google wont goecode a UK postcode using its API because of the above reason, but theres a way around it. I can dig out the links if you want.

[bob-a-job]

Well here is a excel file holding loads of postcode (2821 i think) with their X, Y, long and lat values..

You will need to export data into a lookup table you have coded (i woiudl suggest server sided) and from the values gain it should plot the point for you...

Bob

[pwntifex]

[bob-a-job]

You will need to find the X, Y values of a specific point. So on you map find out what x,y values is Where you think London and work it out from there..

For example:

Lets say London on you map is
x = 350
y = 500.

Find a london value in the spreadsheet lets say
x = 442900
y = 419100

then get the difference:
x = 442900 - 350 = 442550
y = 419100 - 500 = 418600

From these value you can now work out the new vaslues fopr any postcode:

Pretend edinburgh is
x = 442900
y = 419100

~Then values for map will be:
x = 442650 - 442550 = 100
y = 418900 - 418600 = 300


I think thats right...


BTW i would do this for a few values and work out the average, will produce a more accurate result...

[Dom]