How to show Pixels and Tiles in Map?

Introduction:

In this tutorial we will learn how to create a map which displays a window with the latitude, longitude, and world, pixel, and tile coordinates for Chicago, IL. Also, we will  show how these values change as the zoom level is adjusted.

Code:

function initMap(): void {
  const chicago = new google.maps.LatLng(41.85, -87.65);

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: chicago,
      zoom: 3,
    }
  );

  const coordInfoWindow = new google.maps.InfoWindow();

  coordInfoWindow.setContent(createInfoWindowContent(chicago, map.getZoom()!));
  coordInfoWindow.setPosition(chicago);
  coordInfoWindow.open(map);

  map.addListener("zoom_changed", () => {
    coordInfoWindow.setContent(
      createInfoWindowContent(chicago, map.getZoom()!)
    );
    coordInfoWindow.open(map);
  });
}

const TILE_SIZE = 256;

function createInfoWindowContent(latLng: google.maps.LatLng, zoom: number) {
  const scale = 1 << zoom;

  const worldCoordinate = project(latLng);

  const pixelCoordinate = new google.maps.Point(
    Math.floor(worldCoordinate.x * scale),
    Math.floor(worldCoordinate.y * scale)
  );

  const tileCoordinate = new google.maps.Point(
    Math.floor((worldCoordinate.x * scale) / TILE_SIZE),
    Math.floor((worldCoordinate.y * scale) / TILE_SIZE)
  );

  return [
    "Chicago, IL",
    "LatLng: " + latLng,
    "Zoom level: " + zoom,
    "World Coordinate: " + worldCoordinate,
    "Pixel Coordinate: " + pixelCoordinate,
    "Tile Coordinate: " + tileCoordinate,
  ].join("
");
}

// The mapping between latitude, longitude and pixels is defined by the web
// mercator projection.
function project(latLng: google.maps.LatLng) {
  let siny = Math.sin((latLng.lat() * Math.PI) / 180);

  // Truncating to 0.9999 effectively limits latitude to 89.189. This is
  // about a third of a tile past the edge of the world tile.
  siny = Math.min(Math.max(siny, -0.9999), 0.9999);

  return new google.maps.Point(
    TILE_SIZE * (0.5 + latLng.lng() / 360),
    TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI))
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
export {};

Explanation:

• The function initMap() is created in order to define the properties of the map.
• Chicago is the variable that stores the new map created with the mentioned longitude and the latitude coordinates.

const chicago = new google.maps.LatLng(41.85, -87.65);

• LatLng is an immutable class representing a pair of latitude and longitude coordinates, stored as degrees.
• The line, “map = new google.maps.Map(document.getElementById(“map”)”; creates a new map inside the <div> element with the help of the mentioned id which is ‘map’ as an HTMLElement. Inside this the center is mentioned i.e., the Chicago variable is assigned to it with the zoom level of 3.

 const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: chicago,
      zoom: 3,
    }

• A variable coordInfoWidow is assigned with the new InfoWindow created; An InfoWindowdisplays content (usually text or images) in a popup window above the map, at a given location.

const coordInfoWindow = new google.maps.InfoWindow();

• The contents, position are being set after which the map is opened.
• To register for the event notifications, the addListener() is being used. And the zoom level of map is being changed using this.

map.addListener("zoom_changed", () => {
    coordInfoWindow.setContent(
      createInfoWindowContent(chicago, map.getZoom()!)
    );
    coordInfoWindow.open(map);
  });
}

• The Tile_size is declared and set to 256.

const TILE_SIZE = 256;

• Next, the function createInfoWindow is called and the scale is changed.
• Followed to this, the pixel and tile coordinate variables are declared and assigned with the new map’s properties.

const pixelCoordinate = new google.maps.Point(
    Math.floor(worldCoordinate.x * scale),
    Math.floor(worldCoordinate.y * scale)
  );

const tileCoordinate = new google.maps.Point(
    Math.floor((worldCoordinate.x * scale) / TILE_SIZE),
    Math.floor((worldCoordinate.y * scale) / TILE_SIZE)
  );

• Lastly, all the parameters are returned from the function.
• Next, the mapping between the latitude, longitude and the pixels is defined by the web Mercator projection.

function project(latLng: google.maps.LatLng) {
  let siny = Math.sin((latLng.lat() * Math.PI) / 180);

• Latitude is truncated to 0.999 as it effectively limits latitude to 89.189. This is about a third of a tile past the edge of the world tile.
• Finally, the function is called and executed.

window.initMap = initMap;

Conclusion:

In this tutorial, we learned about showing pixel and tile coordinates in google maps. This example created a map that displays a window with the latitude, longitude, and world, pixel, and tile coordinates for Chicago, IL. It also shows how these values change as the zoom level is adjusted.

Live Example