MapLayers.json File¶
The maps app can be configured by embedding the map layers configuration within the config.json
file, or by providing a URL that points to a MapLayers.json
file. The format of the JSON configuration remains the same in either of these two approaches.
The MapLayers.json
file contains an array of map layers. There are two different configuration formats for OpenLayers and Leaflet. These as described below. The mapping library is selected according to the configuration format of the first layer and assumes all other layers follow the same format. If no layers were defined, OpenLayers will be selected as the mapping library.
By default, the config.json
exposes layers in the OpenLayers configuration format. To use Leaflet, edit the config.json
file and replace the layers
property with layers_ol
and the layers_leaflet
property with layers
.
OpenLayers configuration format¶
The configuration format for OpenLayers has a structure similar to:
[
{
"type": "ol.layer.Tile",
"visible": false,
"wms": false,
"source": {
"type": "ol.source.OSM",
"config": {
"crossOrigin": null,
"url": "https://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png"
}
}
},
{
"type": "ol.layer.Vector",
"visible": false,
"wms": true,
"source": {
"type": "ol.source.Vector",
"config": {
"url": "/data/sampleGeo.json"
}
},
"style": {
"fill": {
"color": "#B29255"
},
"stroke": {
"color": "#715E3A",
"width": 4
}
},
"opacity": 0.7
}
]
The library supports two types of map layers, ol.layer.Tile
and ol.layer.Vector
.
Both types of layer have a visible
property that describes whether the layer is visible by default and a wms
property which describes whether the layer is a displaying data from a Web Map Service
. These properties have Boolean values.
The layers also have a common source
property, but their contents differ. The source
of a vector layer always must have a type
equal to ol.source.Vector
, and the url
of the config
property must point to a GeoJSON file. The source
of a tile layer can be any layer source for tile data supported by OpenLayers such as ol.source.OSM
or ol.source.BingMaps
. The config
object is passed as an argument of the constructor for the specified source, and its properties depend on which source is used; more information can be found in the OpenLayers documentation.
Unlike tile layers, vector layers have two additional properties, style
and opacity
which can be used to customise their appearance. The opacity
property has a numeric value between 0 and 1, and the style
property accepts a JSON structure with two properties (fill
and stroke
) within it. These correspond to configuration provided when creating ol.style.Fill
and ol.style.Stroke
objects, respectively.
Using the CARTO platform with OpenLayers¶
The configuration formats for using CARTO platform with OpenLayers have structures similar to:
[
{
"type": "ol.layer.Tile",
"visible": false,
"wms": false,
"source": {
"type": "ol.source.XYZ",
"config": {
"url": "http://api.cartocdn.com/base-dark/{z}/{x}/{y}.png"
}
}
},
{
"type": "ol.TorqueLayer",
"visible": false,
"wms": false,
"source": {
"user": "viz2",
"table": "ow",
"zIndex": 100,
"cartocss": "Map { -torque-time-attribute: \"date\"; -torque-aggregation-function: \"count(cartodb_id)\"; -torque-frame-count: 760; -torque-animation-duration: 15; -torque-resolution: 2 } #layer { marker-width: 3; marker-fill-opacity: 0.8; marker-fill: #FEE391; comp-op: \"lighten\"; [value > 2] { marker-fill: #FEC44F; } [value > 3] { marker-fill: #FE9929; } [value > 4] { marker-fill: #EC7014; } [value > 5] { marker-fill: #CC4C02; } [value > 6] { marker-fill: #993404; } [value > 7] { marker-fill: #662506; } [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;} [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;} }"
}
},
{
"type": "ol.layer.Tile",
"visible": false,
"wms": false,
"source": {
"type": "ol.source.CartoDB",
"config": {
"account": "documentation",
"config": {
"layers": [{
"type": "cartodb",
"options": {
"cartocss_version": "2.1.1",
"cartocss": "#layer { polygon-fill: #1E90FF; polygon-opacity: 0.6;}",
"sql": "select * from european_countries_e where name = 'France'"
}
}]
}
}
}
}
]
The implementation supports the use of CARTO base maps, Torque.js and the CartoDB source of OpenLayers. These can be used to display base map tiles, animations and vector overlays.
The configuration of the source
property of the ol.TorqueLayer
type (which is similar to L.TorqueLayer
) is explained in the Torque.js reference documentation. The configuration of the ol.source.CartoDB
is explained in the OpenLayers API documentation.
To see CARTO platform examples in OVE, load the controller by accessing the URL http://OVE_APP_MAPS_HOST:PORT/control.html?oveSectionId=SECTION_ID&layers=2,3,4&state=World
. To learn more, see examples on using OpenLayers with the CARTO Platform and the example on using Torque.js with OpenLayers.
Leaflet configuration format¶
The configuration format for Leaflet has a structure similar to:
[
{
"type": "L.tileLayer",
"visible": false,
"wms": false,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.jpg"
},
{
"type": "L.geoJSON",
"visible": false,
"wms": false,
"data": [
{
"type": "LineString",
"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
},
{
"type": "LineString",
"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}],
"options": {
"style": {
"fill": true,
"fillColor": "#B29255",
"fillOpacity": 0.7,
"color": "#715E3A",
"weight": 4,
"opacity": 0.7
}
}
}
]
The library supports raster and vector map layers as well as geoJSON layers. Unlike OpenLayers, they are not grouped into two significant layers. A complete catalogue of all Leaflet map layers are available in their documentation.
Both types of layer have a visible
property that describes whether the layer is visible by default and a wms
property which describes whether the layer is a displaying data from a Web Map Service
. These properties have Boolean values.
Each layer has its own properties. L.tileLayer
must have a url
property. All vector layers must have a bounds
property. L.imageOverlay
and L.videoOverlay
must have a url
as well as a bounds
property. All layers accept an optional options
property as well. All of these combinations are explained in the Leaflet documentation.
Unlike in OpenLayers, Leaflet expects GeoJSON to be embedded and defined using a data
property. Like other layers it also accepts an optional options
property. The style
property is defined within this options
property as seen above. opacity
is a part of the style
property.
Using the CARTO platform with Leaflet¶
The configuration formats for using CARTO platform with Leaflet have structures similar to:
[
{
"type": "L.tileLayer",
"visible": false,
"wms": false,
"url": "http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png"
},
{
"type": "L.TorqueLayer",
"visible": false,
"wms": false,
"source": {
"user": "viz2",
"table": "ow",
"zIndex": 100,
"cartocss": "Map { -torque-time-attribute: \"date\"; -torque-aggregation-function: \"count(cartodb_id)\"; -torque-frame-count: 760; -torque-animation-duration: 15; -torque-resolution: 2 } #layer { marker-width: 3; marker-fill-opacity: 0.8; marker-fill: #FEE391; comp-op: \"lighten\"; [value > 2] { marker-fill: #FEC44F; } [value > 3] { marker-fill: #FE9929; } [value > 4] { marker-fill: #EC7014; } [value > 5] { marker-fill: #CC4C02; } [value > 6] { marker-fill: #993404; } [value > 7] { marker-fill: #662506; } [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;} [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;} }"
}
},
{
"type": "L.cartoDB",
"visible": false,
"wms": false,
"source": {
"apiKey": "default_public",
"username": "cartojs-test",
"layers": [{
"cartocss": "#layer { marker-width: 7; marker-fill: #EE4D5A; marker-line-color: #FFFFFF; }",
"sql": "SELECT * FROM ne_10m_populated_places_simple WHERE adm0name = 'United Kingdom'"
}]
}
}
]
The implementation supports the use of CARTO base maps, Torque.js and CARTO.js. These can be used to display base map tiles, animations and vector overlays.
The configuration of the source
property of the L.TorqueLayer
type is explained in the Torque.js reference documentation. The source
property of the L.cartoDB
type includes the apiKey
and username
required by the CARTO.js client and a layers
property which defines a list of carto.layer.Layer objects.
To see CARTO platform examples in OVE, load the controller by accessing the URL http://OVE_APP_MAPS_HOST:PORT/control.html?oveSectionId=SECTION_ID&layers=2,3,4&state=World
. To learn more, see examples on using CARTO.js and the example on using Torque.js with Leaflet.