Raster Layers

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

DG.TileLayer

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

DG.TileLayer.wms

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

DG.ImageOverlay

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