Skip to content

Latest commit

 

History

History
142 lines (108 loc) · 4.73 KB

README.md

File metadata and controls

142 lines (108 loc) · 4.73 KB
Raw

⚠️ This document is aim for older versions (from 2.3.0 to 2.5.3). Document for new version is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

TileOverlay class

This class extends BaseClass.

Contents

Overview

You can add images on top of your map as a Tile Layer. Tile Layers are placed overtop of a map tile at a specific zoom level. With enough tiles, you can supplement Google's map data for the entire map, at multiple zoom levels.

This is an excellent way to add data - such as points of interest or traffic information - and local imagery to your app. When combined with plugin.google.maps.MapTypeId.NONE, tile layers effectively let you replace Google's base map data with your own.

Tile Coordinates

The Maps API breaks up imagery at each zoom level into a set of square map tiles, which are arranged in an ordered grid. When a map scrolls to a new location, or to a new zoom level, the Maps API determines which tiles are needed, and translates that into a set of tiles to retrieve.

For Google's implementation of the Mercator projection, the tile with coordinate (0,0) is always at the northwest corner of the map, with x values increasing from west to east and y values increasing from north to south. Tiles are indexed using x, y coordinates from that origin.

For example, at zoom level 2, when the earth is divided up into 16 tiles, each tile can be referenced by a unique x,y pair:

Each map tile is a 512x512 point square. At zoom level 0, the entire world is rendered in a single tile (however, the native Google Maps APIs do not support this zoom level).

So, at zoom level 1 the map will be rendered as a 2x2 grid of tiles, or a 4x4 grid at zoom level2, and so on.

If you are creating images for a tile layer, you will need to create a new 512x512 point image for each tile at each zoom level that you with to support.

Add a tile layer

The map.addTileLayer() method generates a tile layer on the map.

var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv, {
  //'mapType' : plugin.google.maps.MapTypeId.NONE,
  'preferences': {
    'zoom': {
      'minZoom': 0,
      'maxZoom': 4
    }
  }
});

var tileOverlay = map.addTileOverlay({
  debug: true,  // draw the debug information on tiles

  opacity: 0.75,  // from 0.0 to 1.0

  // Load image files from the local file path
  getTile: function(x, y, zoom) {
    return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + y + ".png";
  }
});

API Reference

Create

map.addTileOverlay() Adds a tile layer.

Methods

setFadeIn() Sets whether the tiles should fade in.
getFadeIn() Returns whether the tiles should fade in.
setZIndex() Sets the zIndex of the tile overlay.
getZIndex() Returns the zIndex of the tile overlay.
setOpacity() Sets the opacity of the tile overlay.
getOpacity() Returns the opacity of the tile overlay.
setVisible() Sets false if you want to hide.
getVisible() Returns true if the tile overlay is visible.
getTileSize() Returns true if the tile overlay is visible.
remove() Removes the tile overlay.
getMap() Returns the map reference.