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