Skip to content

GitLab

Commit 9b4e34e5 authored by S Anand's avatar S Anand
Browse files

ENH: mapviewer addNote, add/remove layer, show mismatches 

Fixes #112
Fixes #118
By @bharat.r
parent f36ecaa0
Pipeline #72945 passed with stage
in 2 minutes and 18 seconds
Expand all Hide whitespace changes
Inline Side-by-side
docs/mapviewer.md
View file @ 9b4e34e5
......@@ -27,6 +27,160 @@ This creates a simple base map:
</script>
```
This loads a [GeoJSON file](test/india-states.geojson), links data from
[state_score.json](test/state_score.json), and sets the fill color from a merged
attribute.
```html
<div id="geojson-map" style="height:300px">
<script>
var map = g1.mapviewer({
id: 'geojson-map',
layers: {
worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
indiaGeojson: {
type: 'geojson',
url: 'india-states.geojson',
link: {
url: 'state_score.json', // Load data from this file
dataKey: 'name', // Join this column from the URL (data)
mapKey: 'ST_NM' // with this property in the GeoJSON
},
options: {
style: {
fillColor: '#a00',
fillOpacity: 1
}
},
tooltip: function(prop) { // On hover, show this HTML tooltip
return prop.ST_NM + ': ' + prop.TOT_P
},
attrs: {
fillColor: { // Fill the regions
metric: 'score', // with the "score" column from state_score.json
scheme: 'RdYlGn' // using a RdYlGn gradient
}
}
}
}
})
</script>
```
**Note**: You can use `type: 'topojson'` when loading TopoJSON maps.
## g1.mapviewer options
- `id`: ID of the map DOM element (example: `mapid`), or the DOM element
- `map`:
- `options`: supports same options as [Map options](http://leafletjs.com/reference-1.3.0.html#map)
- `layers`: builds layers one on top of another in the specified order.
- `{layername: {...} }` dict with layer name as keys
- Each layer MUST have a type. Currently supported types are
- tile
- geojson
- topojson
- marker (`link`: option is not yet supported )
- circleMarker
- `tile` layer MUST have a url: that has the URL template for the leaflet tile layer.
- `url`: A string of the form - `http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png`
- `options`: supports same options as [Tile options](http://leafletjs.com/reference-1.3.0.html#tilelayer-minzoom)
- `geojson` layer MUST have a data as an array of objects or else MUST have a url (string).
- `url`: String
- `data`: An array of objects. data: takes preference over url.
- `options`: supports same options as [GeoJSON options](http://leafletjs.com/reference-1.3.0.html#geojson-style)
- `link`: adds attributes from input dataset to geojson/topojson
- `url`: url (String) to fetch data
- `mapKey`: attribute name in geojson/topojson to match
- `dataKey`: column name in input dataset that matches with geojson/topojson `mapKey`
- `mismatch`: `true` (default) / `false` / function. Displays the number of mismatches between `dataKey` and `mapKey`. By default, appears as a label at the bottom left corner of the map. To customise the message, use function
- function accepts an list of objects. Each object has `status` and all geojson/topojson feature properties:
- `status`: A boolean value representing whether the geojson/topojson feature found a match from input dataset or not.
- `popup`: string / function that returns formatted value
- `popupOptions`: An object with properties and values from [leaflet popup options](https://leafletjs.com/reference-1.3.4.html#popup-l-popup)
- `tooltip`: string / function that returns formatted value.
- function(properties) must return a string. feature properties are passed as argument.
- `tooltipOptions`: An object with properties and values from [leaflet tooltip options](https://leafletjs.com/reference-1.3.0.html#tooltip-option)
- `direction` property can be a string or function. function is passed the following arguments.
- `centerPoint` is center coordinates of map view
- `tooltipPoint` is center coordinates of tooltip
- `properties` are feature properties
NOTE: `tooltip` and `tooltipOptions` are previously (till v0.9.l) are inside `attrs`. This spec breaking change is mage to maintain consistency with `popup` and `popupOptions`
- `attrs` Data driven styles. same as `options`. (`attrs` take priority over `options`)
- For `color`, `weight`, `opacity`, `fillColor`, `fillOpacity` properties, the options are:.
- `metric` string / function
- If `metric`: is a string, can be any numeric property of geojson
- To have a metric that is formala based on multiple properties, use function. Example: `function(row) { return row['congress_votes'] - row['bjp_votes']}`
- `domain` An array of two numbers. Defaults to calculated values of given `metric`.
- `range`
- For `fillColor` and `color`, must be a [interpolate color scheme](https://github.com/d3/d3-scale-chromatic#diverging)
- `topojson` - same as `geojson`
- `marker` layer MUST have a data as an array of objects or else MUST have a url (string).
- `url`: String
- `data`: An array of objects. data: takes preference over url.
- `latitude`: String (mandatory). Must be column name that contains latitude of marker
- `longitude`: String (mandatory). Must be column name that contains longitude of marker
- `options`: supports same options as [marker options](http://leafletjs.com/reference-1.3.0.html#marker-icon)
- `circleMarker` layer MUST have a data as an array of objects or else MUST have a url (string).
- `url`: String
- `data`: An array of objects. data: takes preference over url.
- `latitude`: String (mandatory). Must be column name that contains latitude of marker
- `longitude`: String (mandatory). Must be column name that contains longitude of marker
- `options`: supports same options as [circleMarker options](http://leafletjs.com/reference-1.3.0.html#circlemarker-radius)
- `attrs` same as `attrs` for `geojson` type layer
- `drilldown`:
- `rootLayer`: `geojson/topojson` layer that acts as root layer to drilldown further.
- `levels`: Array of objects that provides layer info
- `layerName`: Can be a string or function. Function takes argument as `properties` of parentLayer feature
- `layerOptions`: Same as layer options in `layers` option. If `url` is function, `url` takes argument as `properties` of parentLayer feature
- `legend`: configuration of legend to be added to layer. It requires [d3-legend](https://cdnjs.com/libraries/d3-legend). This creates a `<div class="map-legend">`.
- `position`: can be `topright`, `topleft`, `bottomleft` or `bottomright`(Defaults to `bottomright`)
- `format`: accepts d3 formats and applies to legend labels. (Defaults to `d`)
- `shape`: can be a d3 symbol or an svg path. Default `d3.symbolSquare`
- `size`: size of legend cell
- `cells`: number of cells in legend. Default `5`
- `width`: width of legend
- `height`: height of legend
- `scale`: accepts d3 scale format (mandatory). For examples, refer [d3-legend](https://d3-legend.susielu.com/#color-examples)
- `orient`: orientation of legend. Can be `vertical` (Default) or `horizontal`
- `shapeWidth`: width of legend cell. Default `20`
- `shapePadding`: padding of legend cell. Default `20`
- `labelOffset`: value to determine distance of label from each legend cell. Default `20`
## g1.mapviewer methods
`fitToLayer(layerName, options)`
Zooms map view to fit the layer. Supports same options as [fitBounds options](http://leafletjs.com/reference-1.3.0.html#fitbounds-options)
`zoomHandler(layerName, minZoomLevel, maxZoomLevel(optional) )`
Shows the layer with `layerName` only between `minZoomLevel` and `maxZoomLevel`.
`addNote(options)`
Adds a html label on the map. `options` is an object with following properties
- `html`: html object node
- `style`: Defaults to `bottom-left`. Specify styles for the `html`
- `position`: (Optional) Specifies the position of `html` on the map
`removeLayer(layerName)`
Removes the layer from the map and returns the layer if the layer exists on the map, else throws an error.
Note: This function will remove the layer from the map only. The layer object still exists in memory. Use `addLayer(layerName)` to add the layer back to the map.
`addLayer(layerName, layerConfig)`
- `addLayer(layerName)` if `layerName` layer does not exist on map, adds the layer to the map.
- `addLayer(layerName, layerConfig)` will creates a new layer with `layerConfig` options and adds it to the map.
## g1.mapviewer events
- `layersloaded` is fired when all layers are saved in mapviewer.gLayers (used interally).
- tooltip is rendered on each layer only after `layersload` is fired
- `layerName + 'loaded'` is fired for each layer with name as `layerName`
<!------------------------------------------------------------------------------------------->
## g1.mapviewer features examples
This creates a set of markers for each row in [cities.json](test/cities.json).
```html
......@@ -41,10 +195,6 @@ This creates a set of markers for each row in [cities.json](test/cities.json).
url: 'cities.json',
latitude: 'lat',
longitude: 'long',
options: {
// title: 'column-name' // TODO
}
// TODO: allow specifying styles (e.g. color, icon file, etc) from data
}
}
})
......@@ -78,38 +228,45 @@ You can apply styles based on any attribute or function.
</script>
```
This loads a [GeoJSON file](test/india-states.geojson), links data from
[state_score.json](test/state_score.json), and sets the fill color from a merged
attribute.
This adds legend to the map
```html
<div id="geojson-map" style="height:300px">
<div id="choropleth" class="map"></div>
<script>
var map = g1.mapviewer({
id: 'geojson-map',
var choro_map = g1.mapviewer({
id: 'choropleth',
legend: {
position: 'topright',
format: 'd',
shape: d3.symbolCircle,
size: 100,
scale: d3.scaleLinear().domain([10, 20, 30]).range(['red', 'yellow', 'green']),
orient: 'horizontal',
width: 300,
height: 100
},
layers: {
worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
worldMap2: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
indiaGeojson: {
type: 'geojson',
url: 'india-states.geojson',
link: {
url: 'state_score.json', // Load data from this file
dataKey: 'name', // Join this column from the URL (data)
mapKey: 'ST_NM' // with this property in the GeoJSON
url: 'state_score.json',
dataKey: 'name',
mapKey: 'ST_NM'
},
options: {
style: {
fillColor: '#a00',
fillColor: '#ccc',
fillOpacity: 1
}
},
attrs: {
fillColor: { // Fill the regions
metric: 'score', // with the "score" column from state_score.json
scheme: 'RdYlGn' // using a RdYlGn gradient
},
tooltip: function(prop) { // On hover, show this HTML tooltip
return prop.ST_NM + ': ' + prop.TOT_P
fillColor: {
metric: 'score',
scale: 'linear',
domain: [10, 20, 30],
range: ['red', 'yellow', 'green'],
}
}
}
......@@ -135,13 +292,13 @@ Drilldown feature example:
dataKey: 'name', // Join this column from the URL (data)
mapKey: 'ST_NM' // with this property in the GeoJSON
},
tooltip: function(prop) { // On hover, show this HTML tooltip
return prop.ST_NM + ': ' + prop.TOT_P
},
attrs: {
fillColor: { // Fill the regions
metric: 'score', // with the "score" column state_score.json
range: 'RdYlGn' // using a RdYlGn gradient
},
tooltip: function(prop) { // On hover, show this HTML tooltip
return prop.ST_NM + ': ' + prop.TOT_P
}
}
}
......@@ -158,10 +315,10 @@ Drilldown feature example:
fillColor: {
metric: 'DT_CEN_CD',
range: 'RdYlGn'
},
tooltip: function (properties) {
return 'DISTRICT: ' + properties['DISTRICT']
}
},
tooltip: function (properties) {
return 'DISTRICT: ' + properties['DISTRICT']
}
}
}
......@@ -171,73 +328,38 @@ Drilldown feature example:
</script>
```
**Note**: You can use `type: 'topojson'` when loading TopoJSON maps.
Examples showing usage of mismatch label:
## g1.mapviewer options
- `id`: ID of the map DOM element (example: `mapid`), or the DOM element
- `map`:
- `options`: supports same options as [Map options](http://leafletjs.com/reference-1.3.0.html#map)
- `layers`: builds layers one on top of another in the specified order.
- `{layername: {...} }` dict with layer name as keys
- Each layer MUST have a type. Currently supported types are
- tile
- geojson
- topojson
- marker (`link`: option is not yet supported )
- circleMarker
- `tile` layer MUST have a url: that has the URL template for the leaflet tile layer.
- `url`: A string of the form - `http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png`
- `options`: supports same options as [Tile options](http://leafletjs.com/reference-1.3.0.html#tilelayer-minzoom)
- `geojson` layer MUST have a data as an array of objects or else MUST have a url (string).
- `url`: String
- `data`: An array of objects. data: takes preference over url.
- `options`: supports same options as [GeoJSON options](http://leafletjs.com/reference-1.3.0.html#geojson-style)
- `link`: adds attributes from input dataset to geojson
- `url` is url (String) to fetch data
- `mapKey` is attribute name in geojson to match
- `dataKey` is column name in input dataset that matches with geojson `mapKey`
- `attrs` Data driven styles. same as `options`. (`attrs` take priority over `options`)
- For `color`, `weight`, `opacity`, `fillColor`, `fillOpacity` properties, the options are:.
- `metric` string / function
- If `metric`: is a string, can be any numeric property of geojson
- To have a metric that is formala based on multiple properties, use function. Example: `function(row) { return row['congress_votes'] - row['bjp_votes']}`
- `domain` An array of two numbers. Defaults to calculated values of given `metric`.
- `range`
- For `fillColor` and `color`, must be a [interpolate color scheme](https://github.com/d3/d3-scale-chromatic#diverging)
- For `weight`, `opacity`,`fillOpacity` must be an array with min and max values
- `tooltip`: string / function that returns formatted value.
- function(properties) must return a string. feature properties are passed as argument.
- TODO: the properties currently include only geoJSON properties. link properties must be added
- `topojson` - same as `Geojson`
- `marker` layer MUST have a data as an array of objects or else MUST have a url (string).
- `url`: String
- `data`: An array of objects. data: takes preference over url.
- `latitude`: String (mandatory). Must be column name that contains latitude of marker
- `longitude`: String (mandatory). Must be column name that contains longitude of marker
- `options`: supports same options as [marker options](http://leafletjs.com/reference-1.3.0.html#marker-icon)
- `circleMarker` layer MUST have a data as an array of objects or else MUST have a url (string).
- `url`: String
- `data`: An array of objects. data: takes preference over url.
- `latitude`: String (mandatory). Must be column name that contains latitude of marker
- `longitude`: String (mandatory). Must be column name that contains longitude of marker
- `options`: supports same options as [circleMarker options](http://leafletjs.com/reference-1.3.0.html#circlemarker-radius)
- `attrs` same as `attrs` for `geojson` type layer
- `drilldown`:
- `rootLayer`: `geojson/topojson` layer that acts as root layer to drilldown further.
- `levels`: Array of objects that provides layer info
- `layerName`: Can be a string or function. Function takes argument as `properties` of parentLayer feature
- `layerOptions`: Same as layer options in `layers` option. If `url` is function, `url` takes argument as `properties` of parentLayer feature
## g1.mapviewer methods
`fitToLayer(layerName, options)`
Zooms map view to fit the layer. Supports same options as [fitBounds options](http://leafletjs.com/reference-1.3.0.html#fitbounds-options)
`zoomHandler(layerName, minZoomLevel, maxZoomLevel(optional) )`
Shows the layer with `layerName` only between `minZoomLevel` and `maxZoomLevel`.
```html
<div class="error-pange"></div>
<div id="mismatch_map" class="map"></div>
<script>
var custom_mismatch_map = g1.mapviewer({
id: 'custom-mismatch-map',
layers: {
indiaGeojson: {
type: 'geojson',
url: 'india-states.geojson',
link: {
url: state_scores,
dataKey: 'name',
mapKey: 'ST_NM',
mismatch: function (mismatch_array ) {
// Render custom message
var custom_message = `<h2>List of Data Merge Mismatches</h2>`
custom_message += `<table>`
mismatch_array.forEach(function(obj){
custom_message += `<tr><td>${obj.feature.properties.ST_NM}</td></tr>`
})
custom_message += `</table>`
$('.error-pane')
.html(custom_message)
}
}
}
}
})
## g1.mapviewer events
</script>
- `layersloaded` is fired when all layers are saved in mapviewer.gLayers (used interally).
- tooltip is rendered on each layer only after `layersload` is fired
- `layerName + 'loaded'` is fired for each layer with name as `layerName`
```
src/mapviewer.js
View file @ 9b4e34e5
......@@ -61,7 +61,6 @@ export var MapViewer = class MapViewer {
for (let layerName in self.options.layers) {
self.buildLayer(layerName, self.options.layers[layerName])
}
self.initTooltipPopup()
self.drilldown()
self.current_level = 0
self.drilldown_stack = []
......@@ -147,7 +146,7 @@ MapViewer.prototype.cacheData = function (layerName, url) {
return self.gData[url]
}()
case 'object':
this.gData[JSON.stringify(url).hashCode()] = url
this.gData[hashCode(JSON.stringify(url))] = url
// TODO: Reload all layers that use this data
// This part will make mapviewer data reactive
return async function () {
......@@ -162,47 +161,95 @@ MapViewer.prototype.cacheData = function (layerName, url) {
* Private method
*/
MapViewer.prototype._saveLayer = function (layerName, layer) {
var self = this, allLayersLoaded = true
var self = this
self.gLayers[layerName] = layer
self.gLayers[layerName].addTo(self.map)
if ('layers' in self.options) {
for (var key in self.gLayers) {
if (!self.gLayers[key]) {
allLayersLoaded = false
}
}
var allLayersLoaded = Object.keys(self.gLayers).filter(function(layerName) { return !self.gLayers[layerName]}).length == 0
if (allLayersLoaded) self.fire('layersloaded')
self.renderTooltip(layerName, self.options.layers[layerName])
self.renderPopup(layerName, self.options.layers[layerName])
}
if (allLayersLoaded === true) {
self.fire('layersloaded')
}
MapViewer.prototype.addMismatchLabel = function(mismatch_count) {
var config = {
style: {
color: "black",
padding: "5px",
border: "2px solid #cccccc",
'border-radius': "10px",
'background-color': "#ffffff",
},
position: 'bottomleft'
}
var div = document.createElement('div')
div.setAttribute('class', 'mismatch-log')
div.innerHTML = mismatch_count + " Mismatches found!"
config.html = div
var self = this
self.addNote(config)
}
MapViewer.prototype.addNote = function(options) {
/*
Adds a html label on the map.
where options must include
- html: html object
- style: styles to add to that html <optional>
- position: specifies the position on the map. <optional>
*/
var self = this
var div_note = L.control({position: options.position || "bottomleft"})
div_note.onAdd = function (map) {
if(options.style) add_styles(options.html, options.style)
return options.html
}
div_note.addTo(self.map)
}
MapViewer.prototype.mergeData = function (mapJSON, dataTable, mapKey, dataKey) {
var dataTableIndex = {}
MapViewer.prototype.mergeData = function (mapJSON, dataTable, link) {
var dataTableIndex = {}, self = this
dataTable.forEach(function (row) {
var prop = typeof (row[dataKey]) == 'string' ? row[dataKey].toLowerCase() : row[dataKey]
var prop = typeof (row[link.dataKey]) == 'string' ? row[link.dataKey].toLowerCase() : row[link.dataKey]
dataTableIndex[prop] = row
})
function _merge_features(feature) {
var prop = typeof (feature.properties[mapKey]) == 'string' ? feature.properties[mapKey].toLowerCase() : feature.properties[mapKey]
var prop = typeof (feature.properties[link.mapKey]) == 'string' ? feature.properties[link.mapKey].toLowerCase() : feature.properties[link.mapKey]
var row = dataTableIndex[prop]
var status = {
isMatched: true,
feature: feature
}
for (let key in row)
feature.properties[key] = row[key]
if (row === undefined)
status.isMatched = false
return status
}
var mergeStatus = '', mismatchedFeatures = ''
switch (mapJSON.type) {
case 'Feature':
case 'FeatureCollection':
mapJSON.features.map(_merge_features)
mergeStatus = mapJSON.features.map(_merge_features)
mismatchedFeatures = mergeStatus.filter(e => !e.isMatched)
if(mismatchedFeatures && mismatchedFeatures.length > 0)
if (link.mismatch && (typeof link.mismatch === 'function')) link.mismatch(mismatchedFeatures)
else if(link && !link.mismatch) self.addMismatchLabel(mismatchedFeatures.length)
return mapJSON
case 'Topology':
mapJSON.objects[Object.keys(mapJSON.objects)[0]].geometries.map(_merge_features)
mergeStatus = mapJSON.objects[Object.keys(mapJSON.objects)[0]].geometries.map(_merge_features)
mismatchedFeatures = mergeStatus.filter(e => !e.isMatched)
if(mismatchedFeatures && mismatchedFeatures.length > 0)
if (link.mismatch && (typeof link.mismatch === 'function')) link.mismatch(mismatchedFeatures)
else if(link && !link.mismatch) self.addMismatchLabel(mismatchedFeatures.length)
return mapJSON
default:
mapJSON.map(function (json) {
var row = dataTableIndex[json[mapKey]]
var row = dataTableIndex[json[link.mapKey]]
for (let key in row) {
json[key] = row[key]
}
......@@ -225,6 +272,9 @@ MapViewer.prototype.off = function (eventName, callback, options) {
MapViewer.prototype.buildLayer = function (layerName, layerConfig) {
var self = this, gLayer
if (!(layerName in self.options))
self.options.layers[layerName] = layerConfig
// Remove layer on map, if exists
if (self.map.hasLayer(self.gLayers[layerName])) self.map.removeLayer(self.gLayers[layerName])
......@@ -239,9 +289,9 @@ MapViewer.prototype.buildLayer = function (layerName, layerConfig) {
self.cacheData(layerName, layerConfig[dataOrURL(layerConfig)]).then(function (mapJSON) {
if ('link' in layerConfig) {
self.cacheData(layerName, layerConfig.link[dataOrURL(layerConfig.link)]).then(function (tableData) {
self.mergeData(mapJSON, tableData, layerConfig.link.mapKey, layerConfig.link.dataKey)
self.mismatch_array = []
self.mergeData(mapJSON, tableData, layerConfig.link)
gLayer = new L.TopoJSON(mapJSON, layerConfig.options)
self._saveLayer(layerName, gLayer)
if ('attrs' in layerConfig) self._choropleth(layerName, layerConfig)
self.fitToLayer(layerName)
......@@ -249,7 +299,6 @@ MapViewer.prototype.buildLayer = function (layerName, layerConfig) {
})
} else {
gLayer = new L.TopoJSON(mapJSON, layerConfig.options)
self._saveLayer(layerName, gLayer)
if ('attrs' in layerConfig) self._choropleth(layerName, layerConfig)
self.fitToLayer(layerName)
......@@ -288,7 +337,7 @@ MapViewer.prototype.buildLayer = function (layerName, layerConfig) {
}
if ('link' in layerConfig) {
self.cacheData(layerName, layerConfig.link[dataOrURL(layerConfig.link)]).then(function (tableData) {
self.mergeData(pointjson, tableData, layerConfig.link.mapKey, layerConfig.link.dataKey)
self.mergeData(pointjson, tableData, layerConfig.link)
create_layer()
if ('attrs' in layerConfig) self._choropleth(layerName, layerConfig)
......@@ -306,6 +355,29 @@ MapViewer.prototype.buildLayer = function (layerName, layerConfig) {
}
}
MapViewer.prototype.removeLayer = function (layerName){
var self = this
if(self.map.hasLayer(self.gLayers[layerName]) && self.gLayers[layerName]){
let layer = self.gLayers[layerName]
self.map.removeLayer(layer)
return layer
}
else
throw new Error('Layer ' + layerName + ' is not available')
}
MapViewer.prototype.addLayer = function (layerName, layerConfig){
var self = this
if(layerName && layerConfig)
self.buildLayer(layerName, layerConfig)
else{
if (self.gLayers[layerName] && !self.map.hasLayer(self.gLayers[layerName]))
self.map.addLayer(self.gLayers[layerName])
else
throw new Error('Layer ' + layerName + ' is already existed or not created')
}
}
MapViewer.prototype._choropleth = function (layerName, layerConfig, filter) {
var layer = this.gLayers[layerName], self = this
......@@ -377,16 +449,19 @@ MapViewer.prototype._calculateMinMax = function (layer, metricFormula) {
})
return [minVal, maxVal]
}
MapViewer.prototype.drilldown = function (drilldown) {
var self = this
self.on('layersloaded', function() {
if (self.options.drilldown) {
self.drilldown_stack.push(self.options.drilldown.rootLayer)
self.drilldown_recursive(self.options.drilldown.rootLayer)
}
}, {
once: true
})
}
MapViewer.prototype.drilldown_recursive = function (currentLayer) {
var self = this
const levels = deepclone(self.options.drilldown.levels)
......@@ -399,36 +474,20 @@ MapViewer.prototype.drilldown_recursive = function (currentLayer) {
} else {
var nextLayer = deepclone(levels[self.current_level])
if (typeof (nextLayer.layerName) == 'function') {
nextLayer.layerName = nextLayer.layerName(sublayer.feature.properties)
}
if (typeof (nextLayer.layerOptions.url) == 'function') {
nextLayer.layerOptions.url = nextLayer.layerOptions.url(sublayer.feature.properties)
}
if (typeof (nextLayer.layerOptions.data) == 'function') {
nextLayer.layerOptions.data = nextLayer.layerOptions.data(sublayer.feature.properties)
}
if (nextLayer.layerOptions.link && typeof (nextLayer.layerOptions.link.data) == 'function') {
nextLayer.layerOptions.link.data = nextLayer.layerOptions.link.data(sublayer.feature.properties)
}
if (nextLayer.layerOptions.link && typeof (nextLayer.layerOptions.link.url) == 'function') {
nextLayer.layerOptions.link.url = nextLayer.layerOptions.link.url(sublayer.feature.properties)
}
function_resolver(sublayer, nextLayer, ['layerName'])
function_resolver(sublayer, nextLayer.layerOptions, ['url', 'data'])
function_resolver(sublayer, nextLayer.layerOptions.link, ['url', 'data'])
self.options.layers[nextLayer.layerName] = nextLayer.layerOptions