Raster Layers | RasterJS API | 2GIS Documentation
RasterJS API

Raster Layers

This section describes working with raster layers, such as a tile layer or an image bound to specific geographic boundaries.

Used to load and display tile layers on the map. Extends GridLayer.

Usage Example

DG.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar' }).addTo(map);
URL Template

A string of the following form:

'http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png';

You can use custom keys in the template, which will be evaluated from TileLayer options, like this:

DG.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', { foo: 'bar' });

Creation

Extension methods

Factory Description
DG.tilelayer( <String> urlTemplate, options) Instantiates a tile layer object given a URL template and optionally an options object.

Options

Option Type Default Description
minZoom Number 0 Minimum zoom number.
maxZoom Number 18 Maximum zoom number.
maxNativeZoom Number null Maximum zoom number the tile source has available. If it is specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxNativeZoom level and auto-scaled.
subdomains String|String[] 'abc' Subdomains of the tile service. Can be passed in the form of one string (where each letter is a subdomain name) or an array of strings.
errorTileUrl String '' URL to the tile image to show in place of the tile that failed to load.
zoomOffset Number 0 The zoom number used in tile URLs will be offset with this value.
tms Boolean false If true, inverses Y axis numbering for tiles (turn this on for TMS services).
zoomReverse Boolean false If set to true, the zoom number used in tile URLs will be reversed (maxZoom - zoom instead of zoom)
detectRetina Boolean false If true and user is on a retina display, it will request four tiles of half the specified size and a bigger zoom level in place of one to utilize the high resolution.
crossOrigin Boolean false If true, all tiles will have their crossOrigin attribute set to ''. This is needed if you want to access tile pixel data.

Options inherited from GridLayer

Events

Events inherited from GridLayer

Events inherited from Layer

Popup events inherited from Layer

Methods

Method Returns Description
setUrl( <String> url <Boolean> noRedraw?) this Updates the layer's URL template and redraws it (unless noRedraw is set to true).
createTile( <Object> coords, <Function> done?) HTMLElement Called only internally, overrides GridLayer's createTile() to return an <img> HTML element with the appropiate image URL given coords. The done callback is called when the tile has been loaded.
Extension methods

Layers extending TileLayer might reimplement the following method.

Method Returns Description
getTileUrl(<Object> coords) String Called only internally, returns the URL for a tile given its coordinates. Classes extending TileLayer can override this function to provide custom tile URL naming schemes.

Methods inherited from GridLayer GridLayer

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

Used to display WMS services as tile layers on the map. Extends TileLayer.

Usage Example

var nexrad = DG.tileLayer.wms('http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi', {
    layers: 'nexrad-n0r-900913',
    format: 'image/png',
    transparent: true,
    attribution: 'Weather data © 2012 IEM Nexrad',
});

Creation

Factory Description
DG.tileLayer.wms( <String> baseUrl, <TileLayer.WMS options> options) Instantiates a WMS tile layer object given a base URL of the WMS service and a WMS parameters/options object.

Options

Option Type Default Description
layers String '' (required) Comma-separated list of WMS layers to show.
styles String '' Comma-separated list of WMS styles.
format String 'image/jpeg' WMS image format (use 'image/png' for layers with transparency).
transparent Boolean false If true, the WMS service will return images with transparency.
version String '1.1.1' Version of the WMS service to use
crs CRS null Coordinate Reference System to use for the WMS requests, defaults to map CRS. Don't change this if you're not sure what it means.
uppercase Boolean false If true, WMS request parameter keys will be uppercase.

Options inherited from TileLayer

Options inherited from GridLayer

Events

Events inherited from GridLayer

Events inherited from Layer

Popup events inherited from Layer

Methods

Method Returns Description
setParams( <Object> params, <Boolean> noRedraw?) this Merges an object with the new parameters and re-requests tiles on the current screen (unless noRedraw was set to true).

Methods inherited from TileLayer TileLayer

Methods inherited from GridLayer GridLayer

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

Used to load and display a single image over specific bounds of the map. Extends Layer.

Usage Example

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [
        [40.712216, -74.22655],
        [40.773941, -74.12544],
    ];
DG.imageOverlay(imageUrl, imageBounds).addTo(map);

Creation

Factory Description
L.imageOverlay( <String> imageUrl, <LatLngBounds> bounds, <ImageOverlay options> options?) Instantiates an image overlay object given the URL of the image and the geographical bounds it is tied to.

Options

Option Type Default Description
opacity Number 1.0 The opacity of the image overlay.
alt String '' Text for the alt attribute of the image (useful for accessibility).
interactive Boolean false If true, the image overlay will emit mouse events when clicked or hovered.
attribution String null An optional string containing HTML to be shown on the Attribution control
crossOrigin Boolean false If true, the image will have its crossOrigin attribute set to ''. This is needed if you want to access image pixel data.

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Mehtods

Method Returns Description
setOpacity() this Sets the opacity of the overlay.
bringToFront() this Brings the layer to the top of all overlays.
bringToBack() this Brings the layer to the bottom of all overlays.
setUrl(<String> url) this Changes the URL of the image.

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented