itisem/tile-coordinates

Typescript conversion utilities between coordinates (lat, lng) and map tiles (x, y, z) used by Google Maps / OpenStreetMap / Mapbox

tile-coordinates

A simple typescript tool to convert between latlng coordinates and map tile numbers used by Google Maps, OpenStreetMap, Mapbox et al.

Usage

Install the package with npm i @gmaps-tools/tile-coordinates

The following functions are exposed:

// gets a tile y coordinate from latitude + zoom level
function getTileFromLat(lat: number, zoom: number): number;
// gets a tile x coordinate from longitude + zoom level
function getTileFromLng(lng: number, zoom: number): number;
// gets a tile x and y coordinate from coordinates + zoom level
function getTileFromLatLng(
	coordinates: {lat: number, lng: number},
	zoom: number
): {
    x: number;
    y: number;
    z: number; // always equal to the zoom level
}
// gets a tile's central latitude from its y and z coordinates
// alias: getLatFromTile
function getCenterLatFromTile(y: number, z: number): number;
// gets a tile's central longitude from its y and z coordinates
// alias: getLngFromTile
function getCenterLngFromTile(x: number, z: number): number;
// gets a tile's midpoiont from its information
// alias: getLatLngFromTile
function getCenterLatLngFromTile(
	tile: {x: number, y: number, z: number}
): {
	lat: number,
	lng: number
};
// gets a tile's latitude boundaries from its y and z coordinates
function getBoundaryLatFromTile(y: number, z: number): {
    top: number;
    bottom: number;
};
// gets a tile's longitude boundaries from its x and z coordinates
export declare function getBoundaryLngFromTile(x: number, z: number): {
    left: number;
    right: number;
};
// gets a tile's boundaries from its information
export declare function getBoundaryLatLngFromTile(tile: {
    x: number;
    y: number;
    z: number;
}): {
    left: number;
    right: number;
    top: number;
    bottom: number;
};

Example usage:

import {getTileFromLatLng, getCenterLatLngFromTile, getBoundaryLatLngFromTile} from "@gmaps-tools/tile-coordinates";

getTileFromLatLng({lat: 19.436379721550452, lng: -99.15153772681174}, 15); // {x: 7359, y: 14579, z: 15}
getCenterLatLngFromTile({x: 7359, y: 14579, z: 15}) // {lat: 19.440694401302856, lng: -99.1461181640625}
getBoundaryLatLngFromTile({x: 7359, y: 14579, z: 15}) // {left: -99.151611328125, right: -99.140625, top: 19.445874298215944, bottom: 19.435514339097814}                             

License

tile-coordinates is published under the MIT licence, see the LICENSE file for more details.

tile-coordinates's Issues

How to convert tiles x,y,z to latitude and longitude coordinates within a specified latitude and longitude range

Hello, thanks for the code, it helps me a lot, but I have a question now, I want to consult you. How to find the latitude and longitude coordinates of tiles in a given latitude and longitude range.

this is the tile x,y,z info

// tile info
const tile = {
  id: 'Raster_GF2_PMS2_E112.4_N37.9_20170526_L1A0002379381-MSS2-geotiff=WebMercatorQuad_13=051_039=006652_005029.png',
  metadataId: 'GF2_PMS2_E112.4_N37.9_20170526_L1A0002379381-MSS2',
  tileMatrixSet: 'WebMercatorQuad',
  format: 'png',
  tileMatrix: 13,

  tileTotalRow: 5029,
  tileTotalCol: 6652,
};


// This is latitude and longitude information

const metadata = {
  geographicCoordinates: {
    coordinates: [
      {
        lat: 38.0286,
        lon: 112.286,
      },
      {
        lat: 37.976,
        lon: 112.554,
      },
      {
        lat: 37.7691,
        lon: 112.489,
      },
      {
        lat: 37.8216,
        lon: 112.221,
      },
    ],
    shapeType: 'polygon',
    geoCenter: {
      lat: 38,
      lon: 112,
    },
  },
};

// TODO: I want to calculate the latitude and longitude information of the tile based on the x,y, and z of the tile