CODEWITHSUNDEEP
javascriptgoogle-mapsmapstile
warmspringwinds
warmspringwinds

Reputation: 1177

Google maps mapType coordinates

I've got a little problem here.

What i want to do.

On my server i have a table with markers that have lat, lng, tile fields in it. There are a lot of markers in table so i request them by tiles that are visible to the user. To make it working as it should is my final goal.

Problem

I wanted to solve this by creating my own mapType and define method getTile() that will be responsible for requesting appropriate tiles from server using x/y/z notation where x,y are the coordinates of tile and z is the zoom level. More about this you can find here. There is my code(i'm using jquery-ui-map plugin here):

function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        //Data for request
        var x = coord.x;
        var y = coord.y;
        var z = zoom;

        //Here i will make an ajax request for markers in this tile

        //Visualization
        var div = ownerDocument.createElement('DIV');
        div.innerHTML = 'X:' + coord.x + ' Y:' +  coord.y + ' Z:' +  zoom;
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAAA';
        return div;

      };

    }

    var test = new ServerFetchMapType();

    $('#map_canvas').gmap();
    $('#map_canvas').gmap('get', 'map').overlayMapTypes.insertAt(0, test);

Everything worked but then i found one drawback, i will illustrate it:

enter image description here

As you can see only 4 tiles in the center of the picture have the right x/y/z notation and therefore all the tiles that are descendants of this tiles. But i won't be able to use other tiles to fetch data from server.

Question

So what can i do to change coordinates of other tiles where the map is just repeating to have the same coordinates as main tiles? Or you can offer other way to solve this. Any help will be appreciated.

Upvotes: 0

Views: 621

Answers (2)

warmspringwinds
warmspringwinds

Reputation: 1177

One very good man helped me to solve this problem this way:

     function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        var dim = Math.pow(2, zoom);

        //Data for request
        var x = Math.abs( coord.x ) % dim;
        var y = Math.abs( coord.y ) % dim;
        var z = zoom;



        //Visualization D
        var div = ownerDocument.createElement('DIV');        
        div.innerHTML = 'X:' + Math.abs( coord.x ) % dim  + ' Y:' +  Math.abs( coord.y ) % dim + ' Z:' +  zoom;

        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAA9';
        return div;

      };

    }

Upvotes: 1

Marcelo
Marcelo

Reputation: 9407

All tiles in your screen shot have correct numbers, not just the central 4.

You should not have the 'tile' field in your markers table, only lat and lon. On your server side script you'd calculate the corners of the tile in question and select the markers that are within the range, such as:

Select * from markersTable 
where lat >= tile_SW_Lat and lat <= tile_NE_Lat 
and lon >= tile_SW_lon and lon <= tile_NE_lon

In all cases, you know that tile(x,y) values are 0 or positive integers. The API takes care of the wrapping for you.

Upvotes: 0

Related Questions