How to use HTML5 geolocation with an offline tile?

General talk
1

Hello,
there are loads of scripts showing how to localize your current position on an online Google or OSMmap (preferingly)
I would like to do the same, but using an offline tile.
My tile has a real-life scale about 300x300 Meters and is currently a PNG File having 215kb.

My idea:

  • load a html page where this PNG File is shown.
  • This PNG File is fixed. No zooming, scrolling shall be allowed.
  • The HTML page checks, if it is possible to get current geocoodinates
  • The current position is shown via a big dot or circle on that offline PNG File.
  • While I move, the dot or circle moves with me.

Unfortunately I have no idea how to solve this. Any ideas?
If the problem is the PNG File, no prob, then please tell me which format is the better one to use.

Regards,
Idursoltar

2

How do you get the coordinates?
from what devise?
And why a offline map?

3

So to make sure we understood you correctly: You only have a single tile? Your problem does not involve choosing the right tile to load?

4

@ Tzorn: I just have one single tile. Currently it is one PNG File. I don´t need to choose which is the right tile. I know which one is the right one.
@ Janus007: The coordinates could be calculated. I know which coordinates the pictures has in the left top corner and bottom right corner.
Offlinemap because I want to save money and volume. And for my case I really just need this single tile.

5

if you have only 1 tile representing a 300x300 meter area, you are “off the tile” as soon as you moved more than 150 meters in one direction (assuming you start in the middle of the tile).

If that is fine for you

  • you need to know the long/lat of e.g. the upper left corner of your tile
  • from that you can determine which long/lat each pixel represents and which pixel is represented by each long/lat
  • you somehow detect your current long/lat form a GPS device
  • now you can determine on which pixel you are
  • now you have to draw another image above that pixel with e.g. some css/html/javascript

if you want to move further, you are in TZorn’s case

6

which programming language do you want to use?

7

I’d look at one of the Leaflet examples at http://leafletjs.com/examples.html . There’s bound to be something there that helps.

There’s a simple Leaflet map that shows geolocation at https://github.com/SomeoneElseOSM/SomeoneElse-map , and Leaflet isn’t limited to online tiles - see https://github.com/SomeoneElseOSM/OSMembedded/blob/master/Scripts/leaflet_embed.js#L16 for a simple example.

8

@escada: The idea you have sounds good. Question: In order to calculate this I need something like a relation between pixels and real life coordintates, right? I have the coordinates of each corner. So calculating should be possible. If the coordinates change, a new dot has to be plotted … Languages I could use: HTML5+CSS3 and/or Javascript, since it should work inside a browser.
@someoneElse: Had considered leaflet for an instance, but at the moment I am a little lost according to the logic (layers, zoomlevels, etc… pieuw…). I would prefer to do without leaflet or other addons, if possible.

9

Recalculate your coordinates to cartesian X, Y coordinates with these formulas:

X = 6371000 * cos(lat) * cos(lon)
Y = 6371000 * cos(lat) * sin(lon)

You will have to convert your coordinates from degrees to radians first (divide by 180 and multiply with PI)

Make sure that your image is aligned north up (a rotated image will add a lot of complexity to the calculations), and use the X,Y coordinates of the corners of the image and your current position to calculate the X,Y position on the image like this:

X1, Y1 - coordinates bottom left corner image
X2, Y2 - coordinates top right corner image
Wi, Hi - width and height image
Xp, Yp - your coordinates
Xi, Yi - point on image relative to bottom left corner

Xi = Wi * (Xp - X1) / (X2 - X1)
Yi = Hi * (Yp - Y1) / (Y2 - Y1)

10

Perfect,
Thanks to all of you for your help. I think the hints are good enough to that I can give it a try. I will try next week.
Thanks again.
Idursoltar