In this example a layer model is defined. A layer model is defined by objects containing the properties of the layers.
The base layers are defined in the baselayers object inside the layers definition:
layers: { baselayers: { mapOne: {... map properties ...}, mapTwo: {... map properties ...}, ... mapN: {... map properties ...} }, overlays: { overlayOne: {... overlay properties ...}, overlayTwo: {... overlay properties ...}, ... overlayM: {... overlay properties ...} } }
A baselayer object must contain the map properties
name
: The display name in the layer controltype
: The type of layer. The supported values are:
'xyz'
and 'wms'
url
: The url of the map service to usetop
: This map layer will be on the top, making it visible. Possible values: true
, false
There can only be one top baselayer on a map. If this property is not present or all are false,
the first defined baselayer map will be the top one. If more than one layer have the top
set to
true
the last layer defined will be the visible.
layerParams
: Additional parameters used in the baselayer urllayerOption
: Options of the Leaflet layer'xyz'
: Leaflet options for xyz tiles Layer
'wms'
: Leaflet options for wms tiles Layer
The code below is the definition of baselayers in this example.
Layers osm and cycle do not define any specific parameters, only options. Layers cloudmade define layer parameters that are included in the url.
baselayers: { osm: { name: 'OpenStreetMap', type: 'xyz', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', layerOptions: { subdomains: ['a', 'b', 'c'], attribution: '© OpenStreetMap contributors', continuousWorld: true } }, cycle: { name: 'OpenCycleMap', type: 'xyz', url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', layerOptions: { subdomains: ['a', 'b', 'c'], attribution: '© OpenCycleMap contributors - © OpenStreetMap contributors', continuousWorld: true } }, cloudmade1: { name: 'Cloudmade Night Commander', type: 'xyz', url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', layerParams: { key: '007b9471b4c74da4a6ec7ff43552b16f', styleId: 999 }, layerOptions: { subdomains: ['a', 'b', 'c'], continuousWorld: true } }, cloudmade2: { name: 'Cloudmade Tourist', type: 'xyz', url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', layerParams: { key: '007b9471b4c74da4a6ec7ff43552b16f', styleId: 7 }, layerOptions: { subdomains: ['a', 'b', 'c'], continuousWorld: true } } }
minZoom
, and maxZoom
defined in the layers override the minZoom
, and maxZoom
of the
whole map, so if you do not define them a 0-18 zooms Leaflet defaults will be used.