Skip to main content

other-layers

DG.LayerGroup

Used to group several layers and handle them as one. If you add it to the map, any layers added or removed from the group will be added/removed on the map as well. Extends DG.Layer.

DG.layerGroup([marker1, marker2]).addLayer(polyline).addTo(map);

Creation

FactoryDescription
DG.layerGroup( <Layer[]> layers ) Create a layer group, optionally given an initial set of layers.

Options

Options inherited from Layer

Events

Events inherited from Layer

Methods

MethodReturnsDescription
toGeoJSON()ObjectReturns a GeoJSON representation of the layer group (as a GeoJSON GeometryCollection).
addLayer( <Layer> layer ) thisAdds the given layer to the group.
removeLayer( <Layer> layer ) thisRemoves the given layer from the group.
removeLayer( <Number> id ) thisRemoves the layer with the given internal ID from the group.
hasLayer( <Layer> layer ) BooleanReturns true if the given layer is currently added to the group.
clearLayers()thisRemoves all the layers from the group.
invoke( <string> methodName, ) thisCalls methodName on every layer contained in this group, passing any additional parameters. Has no effect if the layers contained do not implement methodName.
eachLayer( <Function> fn, <Object> context? ) thisIterates over the layers of the group, optionally specifying context of the iterator function. group.eachLayer(function (layer) { layer.bindPopup('Hello'); });
getLayer( <Number> id ) LayerReturns the layer with the given internal ID.
getLayers()Layer[]Returns an array of all the layers added to the group.
setZIndex( <Number> zIndex ) thisCalls setZIndex on every layer contained in this group, passing the z-index.
getLayerId( <Layer> layer ) NumberReturns the internal ID for a layer

Methods inherited from Layer

Methods inherited from Evented

DG.FeatureGroup

Extended DG.LayerGroup that also has mouse events (propagated from members of the group) and a shared bindPopup method.

DG.featureGroup([marker1, marker2, polyline])
.bindPopup('Hello world!')
.on('click', function () {
alert('Clicked on a group!');
})
.addTo(map);

Creation

FactoryDescription
DG.featureGroup( <Layer[]> layers ) Create a feature group, optionally given an initial set of layers.

Options

Options inherited from Layer

Events

Events inherited from Layer

Methods

MethodReturnsDescription
setStyle( <Path options> style ) thisSets the given path options to each layer of the group that has a setStyle method.
bringToFront()thisBrings the layer group to the top of all other layers
bringToBack()thisBrings the layer group to the top of all other layers
getBounds()LatLngBoundsReturns the LatLngBounds of the Feature Group (created from bounds and coordinates of its children).

Methods inherited from LayerGroup

Methods inherited from Layer

Methods inherited from Evented

DG.GeoJSON

Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends DG.FeatureGroup.

DG.geoJson(data, {
style: function (feature) {
return { color: feature.properties.color };
},
})
.bindPopup(function (layer) {
return layer.feature.properties.description;
})
.addTo(map);

Creation

FactoryDescription
DG.geoJSON( <Object> geojson?, <GeoJSON options> options? ) Creates a GeoJSON layer. Optionally accepts an object in GeoJSON format to display on the map (you can alternatively add it later with addData method) and an options object.

Options

OptionTypeDefaultDescription
pointToLayerFunction *A Function defining how GeoJSON points spawn maps API layers. It is internally called when data is added, passing the GeoJSON point feature and its LatLng. The default is to spawn a default Marker: function(geoJsonPoint, latlng) { return DG.marker(latlng); }
styleFunction *A Function defining the Path options for styling GeoJSON lines and polygons, called internally when data is added. The default value is to not override any defaults: function (geoJsonFeature) { return {} }
onEachFeatureFunction *A Function that will be called once for each created Layer, after it has been created and styled. Useful for attaching events and popups to features. The default is to do nothing with the newly created layers: function (layer) {}
filterFunction *A Function that will be used to decide whether to show a feature or not. The default is to show all features: function (geoJsonFeature) { return true; }
coordsToLatLngFunction *A Function that will be used for converting GeoJSON coordinates to LatLngs. The default is the coordsToLatLng static method.

Options inherited from Layer

Events

Events inherited from Layer

Methods

Methods inherited from FeatureGroup

Methods inherited from LayerGroup

Methods inherited from Layer

Methods inherited from Evented

Functions

There are several static functions which can be called without instantiating DG.GeoJSON:

FunctionReturnsDescription
geometryToLayer( <Object> featureData, <GeoJSON options> options? ) LayerCreates a Layer from a given GeoJSON feature. Can use a custom pointToLayer and/or coordsToLatLng functions if provided as options.
coordsToLatLng( <Array> coords ) LatLngCreates a LatLng object from an array of 2 numbers (longitude, latitude) or 3 numbers (longitude, latitude, altitude) used in GeoJSON for points.
coordsToLatLngs( <Array> coords, <Number> levelsDeep?, <Function> coordsToLatLng? ) ArrayCreates a multidimensional array of LatLngs from a GeoJSON coordinates array. levelsDeep specifies the nesting level (0 is for an array of points, 1 for an array of arrays of points, etc., 0 by default). Can use a custom coordsToLatLng function.
latLngToCoords( <LatLng> latlng ) ArrayReverse of coordsToLatLng
latLngsToCoords( <Array> latlngs, <Number> levelsDeep?, <Boolean> closed? ) ArrayReverse of coordsToLatLngs closed determines whether the first point should be appended to the end of the array to close the feature, only used when levelsDeep is 0. False by default.
asFeature( <Object> geojson ) ObjectNormalize GeoJSON geometries/features into GeoJSON features.

DG.GridLayer

Generic class for handling a tiled grid of HTML elements. This is the base class for all tile layers and replaces TileLayer.Canvas. GridLayer can be extended to create a tiled grid of HTML Elements like <canvas>, <img> or <div>. GridLayer will handle creating and animating these DOM elements for you.

Synchronous usage

To create a custom layer, extend GridLayer and impliment the createTile() method, which will be passed a Point object with the x, y, and z (zoom level) coordinates to draw your tile.

var CanvasLayer = DG.GridLayer.extend({
createTile: function (coords) {
// create a <canvas> element for drawing
var tile = DG.DomUtil.create('canvas', 'leaflet-tile');
// setup tile width and height according to the options
var size = this.getTileSize();
tile.width = size.x;
tile.height = size.y;
// get a canvas context and draw something on it using coords.x, coords.y and coords.z
var ctx = canvas.getContext('2d');
// return the tile so it can be rendered on screen
return tile;
},
});

Asynchrohous usage

Tile creation can also be asyncronous, this is useful when using a third-party drawing library. Once the tile is finsihed drawing it can be passed to the done() callback.

var CanvasLayer = DG.GridLayer.extend({
createTile: function (coords, done) {
var error;
// create a <canvas> element for drawing
var tile = DG.DomUtil.create('canvas', 'leaflet-tile');
// setup tile width and height according to the options
var size = this.getTileSize();
tile.width = size.x;
tile.height = size.y;
// draw something and pass the tile to the done() callback
done(error, tile);
},
});

Creation

FactoryDescription
DG.gridLayer( <GridLayer options> options? ) Creates a new instance of GridLayer with the supplied options.

Options

OptionTypeDefaultDescription
tileSizeNumber|Point 256Width and height of tiles in the grid. Use a number if width and height are equal, or DG.point(width, height) otherwise.
opacityNumber 1.0Opacity of the tiles. Can be used in the createTile() function.
updateWhenIdleBoolean dependsIf false, new tiles are loaded during panning, otherwise only after it (for better performance). true by default on mobile browsers, otherwise false.
updateIntervalNumber 200Tiles will not update more than once every updateInterval milliseconds.
attributionString nullString to be shown in the attribution control, describes the layer data, e.g. "© 2GIS".
zIndexNumber 1The explicit zIndex of the tile layer.
boundsLatLngBounds undefinedIf set, tiles will only be loaded inside inside the set LatLngBounds.
minZoomNumber 0The minimum zoom level that tiles will be loaded at. By default the entire map.
maxZoomNumber undefinedThe maximum zoom level that tiles will be loaded at.
noWrapBoolean falseWhether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels.
paneString 'tilePane'Map pane where the grid layer will be added.

Events

EventDataDescription
loadingEventFired when the grid layer starts loading tiles
tileunloadTileEventFired when a tile is removed (e.g. when a tile goes off the screen).
tileloadstartTileEventFired when a tile is requested and starts loading.
tileerrorTileEventFired when there is an error loading a tile.
tileloadTileEventFired when a tile loads.
loadTileEventFired when the grid layer loaded all visible tiles.

Events inherited from Layer

Methods

MethodReturnsDescription
bringToFront()thisBrings the tile layer to the top of all tile layers.
bringToBack()thisBrings the tile layer to the bottom of all tile layers.
getAttribution()StringUsed by the attribution control, returns the attribution option.
getContainer()StringReturns the HTML element that contains the tiles for this layer.
setOpacity( <Number> opacity ) thisChanges the opacity of the grid layer.
setZIndex( <Number> zIndex ) thisChanges the zIndex of the grid layer.
isLoading()BooleanReturns true if any tile in the grid layer has not finished loading.
redraw()thisCauses the layer to clear all the tiles and request them again.
getTileSize()PointNormalizes the tileSize option into a point. Used by the createTile() method.

Extension methods

Layers extending DG.GridLayer shall reimplement the following method.

MethodReturnsDescription
createTile( <Object> coords, <Function> done? ) HTMLElementCalled only internally, must be overriden by classes extending GridLayer. Returns the HTMLElement corresponding to the given coords. If the done callback is specified, it must be called when the tile has finished loading and drawing.

Methods inherited from Layer

Methods inherited from Evented