Hello Daniweb,

I'm attempting to build an online service, aimed at mobile devices that have GPS or GPS like capabilities. The service would take a users location, and show them locations nearby of interest along with some information, such as a historic landmark and some facts or a restaurant with reviews from other users of the service.

I was planning on using HTML5's Geolocation feature alongside OpenStreetMap tile data. Everything is working fine up until the point where I try and translate a latitude and longitude to a pixel so that I can draw a little marker onto the map.

This is what I have so far:

window.onload = function() {

    /* Check for Location Service Support */

    if(navigator.geolocation) {

        /* Begin Geolocating */

        var watchID = navigator.geolocation.getCurrentPosition(fetchGeoLocation, geoLocationError, {

            enableHighAccuracy: true, timeout: 27000, maximumAge: 30000

    else {

        alert("Your Browser Doesn't Support GeoLocational Services");

    /* Error Callback */

    function geoLocationError(error) {


    /* fetchGeoLocation, Map Rendering and Marker Placement */

    var lat = position.coords.latitude;         // Latitude (Y Axis)
    var lon = position.coords.longitude;        // Longitude (X Axis)
    var acc = position.coords.accuracy;         // Accuracy of Reading
    var zoom = 15;                              // Map Detail (Zoom Level)

    /* Folder/Tile Algorithm Modified from http://wiki.openstreetmap.org/wiki/Tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29 */

    var folder = Math.floor((lon+180)/360*Math.pow(2,zoom));                                                                        // Folder (Longitude)
    var tile = Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom));       // Tile (Latitude)

    /* Prepare Canvas for Write */

    var canvas = document.getElementById('mapArea');
    var context = canvas.getContext('2d');

    /* Load Images */

    var mapTile = new Image();                          // Tile for Longitude and Latitude Range

    mapTile.onload = function() {

        context.drawImage(mapTile, 0, 0, 256, 256);     // Draw Tile onto Canvas

    mapTile.src = "/Assets/Tiles/" + zoom + "/" + folder + "/" + tile + ".png";

Sorry about the formatting, I use a fair amount of indentation to line up my comments which works fine on my screen however in Daniweb, it is squeezed because of the post dimensions.

The code above shall take the coordinates of the person fine, and it shall display the relevant map piece which uses the standard OSM Naming Schema. The problem is, how do I take the latitude and longitude and turn it into a pixel on the 256px square so that I can add a marker. I've read about Mercator Projection, and I've found a lot of formulas but to be honest... it is all going over my head.

I've spent the past two days trying to work this out but with no success, so I am hoping one of you shall be able to help!

Thanks in Advance!

Recommended Answers

All 4 Replies

Thanks for the reply LastMitch, however since I am creating this into an app style service, and OpenStreetMap uses volunteered servers, I don't want to be in breach of the Terms of Use and therefore I have downloaded the open source tile data so I don't need to connect to their servers.

As I say, I've managed to get it to show the correct tile for the user's location (above code is a bit buggy, I re-wrote it in Daniweb as oppossed to copying it and therefore has a few mistakes) using some weird mathematical formula which I found on the official website, however the issue I am having is taking that tile (256 X 256 pixels) and the latitude and longitude of a point and plotting it.

It is more a mathematic question then a coding question, but I was wondering if anyone had any experience in doing this?

Member Avatar


however the issue I am having is taking that tile (256 X 256 pixels) and the latitude and longitude of a point and plotting it.

You want the calculation simliar to this one:


Yes, that is pretty much the sort of thing I am aiming for!

I don't suppose you know the mathematics behind it? I've looked at the source and it is using a Google Maps API, if not then I shall use a third party but preferably I don't want to rely on it.

Thanks for the help so far!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.