From 3ff666ea4812d1a5dba17c35d214d4616ec48c22 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 11 Nov 2024 15:34:12 +0000 Subject: [PATCH] Added categorical counts, can be enable via a flag in the categoryStyle sub schema --- README.md | 6 ++++-- dist/lbh-webmap.min.js | 4 ++-- src/js/helpers/dynamic-styles.js | 7 ++++++- src/js/map/data-layers.js | 8 +++++--- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 210b86b..c193839 100644 --- a/README.md +++ b/README.md @@ -327,6 +327,7 @@ Object properties: "property":"e.g. field_name_count", "pallete":"schemeSet1 or ['list','of','colors']", "spacing":30, + "categoryCount":false } ``` @@ -334,8 +335,9 @@ Object properties: | Option | Type | Required | Description | | --- | --- | --- | --- | | `property` | String | Required | Layer's property/field value to be used for calculating color, the field must be of categorical values. | -| `pallete` | Optional | Required | d3's categorical color sets colors e.g. `schemeSet1` or you can give your own list of color strings as defined in the `consts.js` file defaults to `schemePastel1`. -| `spacing` | Optional | Required | A number of pixels to define the width of each categorical legend color circle and text entry; defaults to **120px** | +| `pallete` | String | Required | d3's categorical color sets colors e.g. `schemeSet1` or you can give your own list of color strings as defined in the `consts.js` file defaults to `schemePastel1`. +| `spacing` | Integer | Optional | A number of pixels to define the width of each categorical legend color circle and text entry; defaults to **120px** | +| `categoryCount` | Boolean | Optional | If true, the feature count for each category will be included on the legend. Defaults to `false` | diff --git a/dist/lbh-webmap.min.js b/dist/lbh-webmap.min.js index ad18d9d..5daeb52 100644 --- a/dist/lbh-webmap.min.js +++ b/dist/lbh-webmap.min.js @@ -7805,7 +7805,7 @@ eval("__webpack_require__.r(__webpack_exports__);\nvar ADDRESSES_PROXY_PROD = \" /***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ colorInterpolator: function() { return /* binding */ colorInterpolator; },\n/* harmony export */ createBins: function() { return /* binding */ createBins; },\n/* harmony export */ getCategoryColor: function() { return /* binding */ getCategoryColor; },\n/* harmony export */ getDistinctValues: function() { return /* binding */ getDistinctValues; },\n/* harmony export */ getFeatureData: function() { return /* binding */ getFeatureData; },\n/* harmony export */ getMinMax: function() { return /* binding */ getMinMax; },\n/* harmony export */ getScaleRange: function() { return /* binding */ getScaleRange; }\n/* harmony export */ });\n/* harmony import */ var d3_scale_chromatic__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! d3-scale-chromatic */ \"../node_modules/d3-scale-chromatic/src/index.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"../node_modules/d3/src/index.js\");\n/* harmony import */ var _map_consts_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../map/consts.js */ \"./js/map/consts.js\");\n\n\n\nvar getFeatureData = function getFeatureData(geojson, property) {\n var data = geojson.features.map(function (feature, index) {\n return feature.properties[property];\n });\n return data;\n};\nvar getMinMax = function getMinMax(data) {\n var minValue = (0,d3__WEBPACK_IMPORTED_MODULE_0__.min)(data);\n var maxValue = (0,d3__WEBPACK_IMPORTED_MODULE_0__.max)(data);\n return {\n minValue: minValue,\n maxValue: maxValue\n };\n};\nvar createBins = function createBins(data, threshold) {\n var bins = null;\n if (threshold) {\n bins = (0,d3__WEBPACK_IMPORTED_MODULE_0__.bin)().thresholds(threshold).value(function (d) {\n return d;\n })(data);\n } else {\n bins = (0,d3__WEBPACK_IMPORTED_MODULE_0__.bin)().value(function (d) {\n return d;\n })(data);\n }\n // console.log('Bins',bins)\n return bins;\n};\nvar getScaleRange = function getScaleRange(bins) {\n var scaleRange = bins.reduce(function (accumulator, currentValue, index) {\n // console.log(currentValue,currentValue.x0,currentValue.x1,index)\n if (index === 0) {\n accumulator.push(currentValue.x0);\n }\n accumulator.push(currentValue.x1);\n return accumulator;\n }, []);\n\n // console.log(\"SCALE RANGE: \",scaleRange)\n return scaleRange;\n};\nvar colorInterpolator = function colorInterpolator(min, max, palette) {\n var interpolatorFunction = (0,d3__WEBPACK_IMPORTED_MODULE_0__.scaleSequential)().domain([min, max]).interpolator(d3_scale_chromatic__WEBPACK_IMPORTED_MODULE_2__[palette]);\n return interpolatorFunction;\n};\nfunction getDistinctValues(data, property) {\n var categories = data.features.map(function (feature) {\n var _feature$properties;\n return (_feature$properties = feature.properties) === null || _feature$properties === void 0 ? void 0 : _feature$properties[property];\n });\n categories = new Set(categories);\n return Array.from(categories).sort();\n}\nfunction getCategoryColor(data) {\n var colorPalette = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : \"schemePastel1\";\n var colorPicker;\n if (typeof colorPalette == \"string\") {\n colorPicker = (0,d3__WEBPACK_IMPORTED_MODULE_0__.scaleOrdinal)().domain(data).range(d3_scale_chromatic__WEBPACK_IMPORTED_MODULE_2__[colorPalette]);\n } else {\n colorPicker = (0,d3__WEBPACK_IMPORTED_MODULE_0__.scaleOrdinal)().domain(data).range(colorPalette.map(function (color) {\n return _map_consts_js__WEBPACK_IMPORTED_MODULE_1__.MARKER_COLORS[color];\n }));\n }\n return colorPicker;\n}\n\n\n//# sourceURL=webpack://LBHWebmap/./js/helpers/dynamic-styles.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ colorInterpolator: function() { return /* binding */ colorInterpolator; },\n/* harmony export */ createBins: function() { return /* binding */ createBins; },\n/* harmony export */ getCategoryColor: function() { return /* binding */ getCategoryColor; },\n/* harmony export */ getCategoryCounts: function() { return /* binding */ getCategoryCounts; },\n/* harmony export */ getDistinctValues: function() { return /* binding */ getDistinctValues; },\n/* harmony export */ getFeatureData: function() { return /* binding */ getFeatureData; },\n/* harmony export */ getMinMax: function() { return /* binding */ getMinMax; },\n/* harmony export */ getScaleRange: function() { return /* binding */ getScaleRange; }\n/* harmony export */ });\n/* harmony import */ var d3_scale_chromatic__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! d3-scale-chromatic */ \"../node_modules/d3-scale-chromatic/src/index.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"../node_modules/d3/src/index.js\");\n/* harmony import */ var _map_consts_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../map/consts.js */ \"./js/map/consts.js\");\n\n\n\nvar getFeatureData = function getFeatureData(geojson, property) {\n var data = geojson.features.map(function (feature, index) {\n return feature.properties[property];\n });\n return data;\n};\nvar getMinMax = function getMinMax(data) {\n var minValue = (0,d3__WEBPACK_IMPORTED_MODULE_0__.min)(data);\n var maxValue = (0,d3__WEBPACK_IMPORTED_MODULE_0__.max)(data);\n return {\n minValue: minValue,\n maxValue: maxValue\n };\n};\nvar createBins = function createBins(data, threshold) {\n var bins = null;\n if (threshold) {\n bins = (0,d3__WEBPACK_IMPORTED_MODULE_0__.bin)().thresholds(threshold).value(function (d) {\n return d;\n })(data);\n } else {\n bins = (0,d3__WEBPACK_IMPORTED_MODULE_0__.bin)().value(function (d) {\n return d;\n })(data);\n }\n // console.log('Bins',bins)\n return bins;\n};\nvar getScaleRange = function getScaleRange(bins) {\n var scaleRange = bins.reduce(function (accumulator, currentValue, index) {\n // console.log(currentValue,currentValue.x0,currentValue.x1,index)\n if (index === 0) {\n accumulator.push(currentValue.x0);\n }\n accumulator.push(currentValue.x1);\n return accumulator;\n }, []);\n\n // console.log(\"SCALE RANGE: \",scaleRange)\n return scaleRange;\n};\nvar colorInterpolator = function colorInterpolator(min, max, palette) {\n var interpolatorFunction = (0,d3__WEBPACK_IMPORTED_MODULE_0__.scaleSequential)().domain([min, max]).interpolator(d3_scale_chromatic__WEBPACK_IMPORTED_MODULE_2__[palette]);\n return interpolatorFunction;\n};\nfunction getDistinctValues(data, property) {\n var categories = data.features.map(function (feature) {\n var _feature$properties;\n return (_feature$properties = feature.properties) === null || _feature$properties === void 0 ? void 0 : _feature$properties[property];\n });\n categories = new Set(categories);\n return Array.from(categories).sort();\n}\nfunction getCategoryColor(data) {\n var colorPalette = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : \"schemePastel1\";\n var colorPicker;\n if (typeof colorPalette == \"string\") {\n colorPicker = (0,d3__WEBPACK_IMPORTED_MODULE_0__.scaleOrdinal)().domain(data).range(d3_scale_chromatic__WEBPACK_IMPORTED_MODULE_2__[colorPalette]);\n } else {\n colorPicker = (0,d3__WEBPACK_IMPORTED_MODULE_0__.scaleOrdinal)().domain(data).range(colorPalette.map(function (color) {\n return _map_consts_js__WEBPACK_IMPORTED_MODULE_1__.MARKER_COLORS[color];\n }));\n }\n return colorPicker;\n}\nfunction getCategoryCounts(data, property, category) {\n var numberOfFeatures = data.features.filter(function (feature) {\n var _feature$properties2;\n return ((_feature$properties2 = feature.properties) === null || _feature$properties2 === void 0 ? void 0 : _feature$properties2[property]) == category && feature.geometry;\n });\n return \" (\".concat(numberOfFeatures === null || numberOfFeatures === void 0 ? void 0 : numberOfFeatures.length, \")\");\n}\n\n\n//# sourceURL=webpack://LBHWebmap/./js/helpers/dynamic-styles.js?"); /***/ }), @@ -7970,7 +7970,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jszi /***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var leaflet__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! leaflet */ \"../node_modules/leaflet/dist/leaflet-src.js\");\n/* harmony import */ var leaflet_vectorgrid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! leaflet.vectorgrid */ \"../node_modules/leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.min.js\");\n/* harmony import */ var _metadata_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./metadata.js */ \"./js/map/metadata.js\");\n/* harmony import */ var _consts_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./consts.js */ \"./js/map/consts.js\");\n/* harmony import */ var _personas_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./personas.js */ \"./js/map/personas.js\");\n/* harmony import */ var _filters_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./filters.js */ \"./js/map/filters.js\");\n/* harmony import */ var _search_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./search.js */ \"./js/map/search.js\");\n/* harmony import */ var _address_search_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./address-search.js */ \"./js/map/address-search.js\");\n/* harmony import */ var _drill_down_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./drill-down.js */ \"./js/map/drill-down.js\");\n/* harmony import */ var _table_view_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./table-view.js */ \"./js/map/table-view.js\");\n/* harmony import */ var _data_download_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./data-download.js */ \"./js/map/data-download.js\");\n/* harmony import */ var _accessiblity_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./accessiblity.js */ \"./js/map/accessiblity.js\");\n/* harmony import */ var _helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../helpers/dynamic-styles.js */ \"./js/helpers/dynamic-styles.js\");\n/* harmony import */ var _helpers_h3_layer_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../helpers/h3-layer.js */ \"./js/helpers/h3-layer.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! d3 */ \"../node_modules/d3/src/index.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n\n\n\n\n// import List from \"./list-view.js\";\n\n\n\n\n\n\n\nvar DataLayers = /*#__PURE__*/function () {\n function DataLayers(map) {\n _classCallCheck(this, DataLayers);\n this.mapClass = map;\n this.map = map.map;\n this.container = map.container;\n this.mapConfig = map.mapConfig;\n this.controls = map.controls;\n this.layers = [];\n this.layerCount = map.mapConfig.layers.length;\n this.loadedLayerCount = 0;\n this.overlayMaps = {};\n this.personas = [];\n this.layerControl = null;\n this.personasClass = null;\n this.filters = null;\n this.layersData = [];\n this.search = null;\n this.showAddressSearch = null;\n this.list = null;\n this.statistics = null;\n }\n _createClass(DataLayers, [{\n key: \"pointToLayer\",\n value: function pointToLayer(feature, latlng, configLayer) {\n var rangeColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;\n var configMarkerColor = configLayer.pointStyle.markerColor;\n var configIconColor = configLayer.pointStyle.iconColor;\n if (!configIconColor && !configMarkerColor) {\n console.error('Markers missing markerColor');\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng);\n }\n if (configLayer.pointStyle.markerType === \"AwesomeMarker\") {\n var _ref, _Object$entries$find;\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng, {\n icon: leaflet__WEBPACK_IMPORTED_MODULE_0__.AwesomeMarkers.icon({\n icon: configLayer.pointStyle.icon,\n prefix: \"fa\",\n iconColor: (_ref = configIconColor !== null && configIconColor !== void 0 ? configIconColor : rangeColor) !== null && _ref !== void 0 ? _ref : \"white\",\n markerColor: configMarkerColor !== null && configMarkerColor !== void 0 ? configMarkerColor : (_Object$entries$find = Object.entries(_consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS).find(function (_ref2) {\n var _ref3 = _slicedToArray(_ref2, 2),\n key = _ref3[0],\n val = _ref3[1];\n return val === rangeColor;\n })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0],\n spin: false\n }),\n alt: configLayer.layerName\n });\n } else if (configLayer.pointStyle.markerType === \"CircleMarker\") {\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.circleMarker(latlng, {\n fillColor: rangeColor !== null && rangeColor !== void 0 ? rangeColor : _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[configMarkerColor],\n radius: configLayer.pointStyle.circleMarkerRadius || 6,\n stroke: true,\n weight: 1,\n color: rangeColor !== null && rangeColor !== void 0 ? rangeColor : _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[configMarkerColor],\n fillOpacity: 0.6\n });\n } else if (configLayer.pointStyle.markerType === \"DivIcon\") {\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng, {\n icon: new leaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.CustomColor({\n className: \"custom-div-icon\",\n iconSize: \"auto\",\n html: \"\".concat(feature.properties[configLayer.pointStyle.divIconLabel]),\n color: rangeColor !== null && rangeColor !== void 0 ? rangeColor : _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[configMarkerColor]\n })\n });\n } else {\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng);\n }\n }\n }, {\n key: \"createMarkerPopup\",\n value: function createMarkerPopup(configLayer, feature, layerName) {\n var title = configLayer.popup.title;\n var afterTitle = configLayer.popup.afterTitle;\n var fields = configLayer.popup.fields;\n var afterFields = configLayer.popup.afterFields;\n var stringPopup = \"\";\n if (title !== \"notitle\") {\n if (title) {\n stringPopup = \"

\".concat(feature.properties[title], \"

\");\n } else {\n stringPopup = \"

\".concat(layerName, \"

\");\n }\n }\n if (afterTitle) {\n stringPopup += \"

\".concat(afterTitle, \"

\");\n }\n if (fields) {\n var _iterator = _createForOfIteratorHelper(fields),\n _step;\n try {\n for (_iterator.s(); !(_step = _iterator.n()).done;) {\n var field = _step.value;\n if (feature.properties[field.name] !== \"\" && feature.properties[field.name] !== null) {\n if (field.label != \"\") {\n stringPopup += \"

\".concat(field.label, \": \").concat(feature.properties[field.name], \"

\");\n } else {\n stringPopup += \"

\".concat(feature.properties[field.name], \"

\");\n }\n }\n }\n } catch (err) {\n _iterator.e(err);\n } finally {\n _iterator.f();\n }\n }\n if (afterFields) {\n stringPopup += \"

\".concat(afterFields, \"

\");\n }\n if (stringPopup === '

') return '';else return stringPopup;\n }\n }, {\n key: \"createTooltip\",\n value: function createTooltip(configLayer, feature, layerName) {\n var title = configLayer.tooltip.title;\n var afterTitle = configLayer.tooltip.afterTitle;\n var fields = configLayer.tooltip.fields;\n var afterFields = configLayer.tooltip.afterFields;\n var stringTooltip = \"\";\n if (title !== \"notitle\") {\n if (title) {\n stringTooltip = \"

\".concat(feature.properties[title], \"

\");\n } else {\n stringTooltip = \"

\".concat(layerName, \"

\");\n }\n }\n if (afterTitle) {\n stringTooltip += \"

\".concat(afterTitle, \"

\");\n }\n if (fields) {\n var _iterator2 = _createForOfIteratorHelper(fields),\n _step2;\n try {\n for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n var field = _step2.value;\n if (feature.properties[field.name]) {\n if (field.label) {\n stringTooltip += \"

\".concat(field.label, \": \").concat(feature.properties[field.name], \"

\");\n } else {\n stringTooltip += \"

\".concat(feature.properties[field.name], \"

\");\n }\n }\n }\n } catch (err) {\n _iterator2.e(err);\n } finally {\n _iterator2.f();\n }\n }\n if (afterFields) {\n stringTooltip += \"

\".concat(afterFields, \"

\");\n }\n if (stringTooltip === '

') return '';else return stringTooltip;\n }\n }, {\n key: \"addWFSLayer\",\n value: function addWFSLayer(data, configLayer) {\n var _linePolygonStyle$str,\n _rangeStyle$spacing,\n _this = this;\n var layerName = configLayer.title;\n var sortOrder = configLayer.sortOrder && !isNaN(configLayer.sortOrder) ? configLayer.sortOrder : configLayer.title;\n var highlightFeatureOnHoverOrSelect = configLayer.highlightFeatureOnHoverOrSelect;\n var zoomToFeatureOnClick = configLayer.zoomToFeatureOnClick;\n var searchable = configLayer.searchable;\n var pointStyle = configLayer.pointStyle;\n var markerType = pointStyle && pointStyle.markerType;\n var markerIcon = pointStyle && pointStyle.icon;\n var markerIcon2 = pointStyle && pointStyle.icon2;\n var markerColor = pointStyle && pointStyle.markerColor;\n var markerColorIcon2 = pointStyle && pointStyle.markerColorIcon2;\n var iconColor = pointStyle && pointStyle.iconColor;\n var cluster = pointStyle && pointStyle.cluster;\n var disableClusteringAtZoom = pointStyle && pointStyle.disableClusteringAtZoom ? pointStyle && pointStyle.disableClusteringAtZoom : 12;\n var enableSpiderfy = pointStyle && pointStyle.enableSpiderfy ? pointStyle && pointStyle.enableSpiderfy : false;\n var maxClusterRadius = pointStyle && pointStyle.maxClusterRadius ? pointStyle && pointStyle.maxClusterRadius : 60;\n var clusterLayer = null;\n var h3HexLayer = configLayer.h3HexLayer;\n var linePolygonStyle = configLayer.linePolygonStyle;\n var layerStyle = linePolygonStyle && linePolygonStyle.styleName;\n var fillColor = linePolygonStyle && linePolygonStyle.fillColor;\n var baseLayerStyles = {\n opacity: linePolygonStyle && linePolygonStyle.opacity,\n stroke: (_linePolygonStyle$str = linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.stroke) !== null && _linePolygonStyle$str !== void 0 ? _linePolygonStyle$str : true,\n color: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.strokeColor,\n fillOpacity: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.fillOpacity,\n weight: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.weight,\n dashArray: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.layerLineDash\n };\n\n //h3HexagonLayer\n var h3geojson = h3HexLayer && (0,_helpers_h3_layer_js__WEBPACK_IMPORTED_MODULE_13__[\"default\"])(data, h3HexLayer.partitionCountProperty, h3HexLayer.resolution);\n\n //rangeStyles\n var rangeStyle = configLayer.rangeStyle;\n var rangeLegendSpacing = (_rangeStyle$spacing = rangeStyle === null || rangeStyle === void 0 ? void 0 : rangeStyle.spacing) !== null && _rangeStyle$spacing !== void 0 ? _rangeStyle$spacing : 30;\n var featuresData = rangeStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getFeatureData)(h3geojson || data, rangeStyle.property);\n var _ref4 = featuresData ? rangeStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getMinMax)(featuresData) : {\n minValue: 0,\n maxValue: 0\n },\n minValue = _ref4.minValue,\n maxValue = _ref4.maxValue;\n var interpolator = rangeStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.colorInterpolator)(minValue, maxValue, rangeStyle.palette);\n var bins = featuresData && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.createBins)(featuresData, rangeStyle.threshold);\n var scaleRange = bins && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getScaleRange)(bins, rangeStyle.threshold);\n var scaleLegend = scaleRange && \"\\n \".concat(scaleRange.map(function (x, i) {\n return \"\");\n }), \"\\n \");\n var scaleLegendLabels = scaleRange && \"\\n \".concat(scaleRange.map(function (x, i) {\n return i % 2 == 0 || i == 0 || scaleRange.length - 1 == i ? \" 0 ? i * rangeLegendSpacing - 5 : i * rangeLegendSpacing, \" y=\\\"20\\\" font-size=\\\"12\\\" font-weight=\\\"bold\\\">\").concat(x, \"\") : '';\n }), \"\\n \");\n var scaleLegendTitle = scaleLegend && rangeStyle.legendTitle;\n\n //categoryStyle\n var categoryStyle = configLayer.categoryStyle;\n var categories = categoryStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getDistinctValues)(data, categoryStyle.property);\n var colorPicker = categories && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getCategoryColor)(categories, categoryStyle.palette || \"schemePastel1\");\n var categoryLegend = categories && \"
\\n \".concat(categories.map(function (category) {\n return \"\\n \\n \").concat(category, \"\\n \");\n }).join(\"\"), \"\\n
\");\n var layer = new leaflet__WEBPACK_IMPORTED_MODULE_0__.GeoJSON(h3geojson || data, {\n color: _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[markerColor],\n pointToLayer: function pointToLayer(feature, latlng) {\n var featureColor = null;\n if (rangeStyle) {\n featureColor = interpolator(feature.properties[rangeStyle.property]);\n } else if (categoryStyle) {\n featureColor = colorPicker(feature.properties[categoryStyle.property]);\n }\n return _this.pointToLayer(feature, latlng, configLayer, featureColor);\n },\n onEachFeature: function onEachFeature(feature, layer) {\n if (configLayer.popup) {\n var popupString = _this.createMarkerPopup(configLayer, feature, layerName);\n if (popupString) {\n var popup = leaflet__WEBPACK_IMPORTED_MODULE_0__.popup({\n closeButton: true\n }).setContent(popupString);\n layer.bindPopup(popup, {\n maxWidth: 210\n });\n }\n if (_this.mapConfig.performDrillDown) {\n layer.off();\n }\n }\n if (configLayer.tooltip) {\n var tooltipString = _this.createTooltip(configLayer, feature, layerName);\n if (tooltipString) {\n var _configLayer$tooltip, _configLayer$tooltip2;\n var tooltip = leaflet__WEBPACK_IMPORTED_MODULE_0__.tooltip().setContent(tooltipString);\n layer.bindTooltip(tooltip, {\n direction: configLayer.tooltip.direction || 'auto',\n offset: configLayer.tooltip.offset || [0, 0],\n permanent: (_configLayer$tooltip = configLayer.tooltip) === null || _configLayer$tooltip === void 0 ? void 0 : _configLayer$tooltip.permanent,\n //if true make tooltip act as label\n className: \"\".concat((_configLayer$tooltip2 = configLayer.tooltip) !== null && _configLayer$tooltip2 !== void 0 && _configLayer$tooltip2.permanent ? \"permanent-tooltip\" : 'regular-tootip')\n });\n }\n }\n if (configLayer.followLinkOnClick && feature.properties[configLayer.followLinkOnClick]) {\n layer.on(\"click\", function (event) {\n //external link opens in a new tab\n if (feature.properties[configLayer.followLinkOnClick].startsWith('http')) {\n window.open(feature.properties[configLayer.followLinkOnClick], '_blank');\n }\n //internal link changes page location\n else {\n //from an iframe\n if (window.location != window.parent.location) {\n window.parent.location = feature.properties[configLayer.followLinkOnClick];\n }\n //from the main window\n else {\n window.location = feature.properties[configLayer.followLinkOnClick];\n }\n }\n });\n }\n },\n sortOrder: sortOrder,\n style: function style(feature) {\n if (rangeStyle || categoryStyle) {\n var styleColor = rangeStyle ? interpolator(feature.properties[rangeStyle.property]) : colorPicker(feature.properties[categoryStyle.property]);\n var styles = _objectSpread(_objectSpread({}, linePolygonStyle), {\n fillColor: styleColor,\n color: (linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.strokeColor) || styleColor,\n dashArray: (linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.layerLineDash) || ''\n });\n return styles;\n } else if (layerStyle === \"default\") {\n return Object.assign(baseLayerStyles, {\n fillColor: fillColor\n });\n } else if (layerStyle === \"random polygons\") {\n //Create a random style and uses it as fillColor.\n var colorHex = \"#\".concat(Math.round(Math.random() * 0xffffff).toString(16));\n return Object.assign(baseLayerStyles, {\n fillColor: colorHex\n });\n }\n }\n });\n if (zoomToFeatureOnClick) {\n layer.on(\"click\", function (event) {\n if (event.propagatedFrom instanceof leaflet__WEBPACK_IMPORTED_MODULE_0__.Polygon) {\n _this.map.fitBounds(event.propagatedFrom.getBounds());\n }\n });\n }\n if (highlightFeatureOnHoverOrSelect && linePolygonStyle) {\n layer.on(\"mouseover\", function (event) {\n if (event.propagatedFrom instanceof leaflet__WEBPACK_IMPORTED_MODULE_0__.Polygon || event.propagatedFrom instanceof leaflet__WEBPACK_IMPORTED_MODULE_0__.Polyline) {\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight + 2\n });\n }\n });\n layer.on(\"mouseout\", function (event) {\n if (!(event.propagatedFrom.getPopup() && event.propagatedFrom.getPopup().isOpen())) {\n //go back to normal weight only if there is no open popup\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight\n });\n }\n });\n layer.on(\"popupopen\", function (event) {\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight + 2\n });\n });\n layer.on(\"popupclose\", function (event) {\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight\n });\n });\n }\n if (cluster) {\n //set the clusters color\n document.documentElement.style.setProperty('--cluster-color', _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[markerColor]);\n //create clusters layer\n clusterLayer = leaflet__WEBPACK_IMPORTED_MODULE_0__.markerClusterGroup({\n maxClusterRadius: maxClusterRadius,\n disableClusteringAtZoom: disableClusteringAtZoom,\n spiderfyOnMaxZoom: enableSpiderfy,\n showCoverageOnHover: false\n });\n clusterLayer.addLayer(layer);\n //add the sortorder as an option to the clusterLayer (needed for the legend)\n clusterLayer.options.sortOrder = layer.options.sortOrder;\n this.layersData.push({\n configLayer: configLayer,\n layer: layer,\n data: data,\n clusterLayer: clusterLayer\n });\n } else {\n this.layersData.push({\n configLayer: configLayer,\n layer: layer,\n data: data\n });\n }\n\n //If displayScaleRange exists, the displayMinScale/displayMaxScale are created using those and the default min/max mapzoom levels. \n if (configLayer.displayScaleRange) {\n var displayMinScale = configLayer.displayScaleRange.minScale ? configLayer.displayScaleRange.minScale : this.map.options.minZoom;\n var displayMaxScale = configLayer.displayScaleRange.maxScale ? configLayer.displayScaleRange.maxScale : this.map.options.maxZoom;\n\n //Add a listener to control the visibility zoom when zooming\n this.map.on('zoomend ', function (e) {\n //console.log('zoom = '+ this.map.getZoom());\n if (cluster) {\n if (_this.map.getZoom() >= displayMinScale && _this.map.getZoom() <= displayMaxScale) {\n _this.map.addLayer(clusterLayer);\n } else {\n _this.map.removeLayer(clusterLayer);\n }\n } else {\n if (_this.map.getZoom() >= displayMinScale && _this.map.getZoom() <= displayMaxScale) {\n _this.map.addLayer(layer);\n } else {\n _this.map.removeLayer(layer);\n }\n }\n });\n\n //Add or not the layer on load\n if (this.mapConfig.showLayersOnLoad) {\n if (cluster) {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(clusterLayer);\n }\n } else {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(layer);\n }\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n } else if (this.mapConfig.showFirstLayerOnLoad && sortOrder == 1) {\n if (cluster) {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(clusterLayer);\n }\n } else {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(layer);\n }\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n }\n }\n //If there is no displayScaleRange in the map config (general case))\n else {\n if (this.mapConfig.showLayersOnLoad) {\n if (cluster) {\n this.map.addLayer(clusterLayer);\n } else {\n layer.addTo(this.map);\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n } else if (this.mapConfig.showFirstLayerOnLoad && sortOrder == 1) {\n if (cluster) {\n this.map.addLayer(clusterLayer);\n } else {\n layer.addTo(this.map);\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n }\n }\n\n //open popup closest to the map centre\n if (configLayer.openPopupClosestToMapCentre) {\n var closestMarker = leaflet__WEBPACK_IMPORTED_MODULE_0__.GeometryUtil.closestLayer(this.map, layer.getLayers(), this.map.getCenter());\n closestMarker.layer.openPopup();\n }\n this.loadedLayerCount++;\n\n //only happens once, after the last layer has loaded - put the BLPUpolygon layer on top if it exists\n if (this.mapClass.blpuPolygon && this.loadedLayerCount == this.layerCount) {\n this.mapClass.blpuPolygon.bringToFront();\n }\n\n //only happens once, after the last layer has loaded - add the drill down listener if true\n if (this.mapConfig.performDrillDown && this.loadedLayerCount == this.layerCount) {\n this.drilldown = new _drill_down_js__WEBPACK_IMPORTED_MODULE_8__[\"default\"](this.map);\n this.drilldown.init();\n }\n if (this.mapConfig.showLegend) {\n if (!configLayer.excludeFromLegend) {\n var count = layer.getLayers().length;\n var countLabel = configLayer.countLabel || 'items';\n if (cluster) {\n this.layers.push(clusterLayer);\n } else {\n this.layers.push(layer);\n }\n var legendEntry = \"\\n
\\n
\\n \\n \").concat(scaleRange && rangeStyle.gradientLegendBorder ? \"\") : '', \"\\n
\\n
\\n \\n \\n \").concat(markerIcon2 && markerColorIcon2 ? \"\") : '', \"\\n \\n
\\n
\\n \").concat(layerName, \"\\n \").concat(this.mapConfig.hideNumberOfItems || configLayer.hideNumberOfItems ? '' : \"
\\n \\n \").concat(count, \" \").concat(countLabel, \" shown\\n \"), \"\\n \\n\\n
\\n
\\n \").concat(scaleRange ? '
' : '', \"\\n \").concat(scaleLegendTitle ? scaleLegendTitle : '', \"\\n \").concat(scaleRange ? scaleLegend : '', \"\\n \").concat(scaleRange ? \"\".concat(scaleLegendLabels, \"\") : '', \"\\n \").concat(scaleRange ? '
' : '', \"\\n \").concat(categories ? categoryLegend : '', \"\\n \");\n if (cluster) {\n this.overlayMaps[legendEntry] = clusterLayer;\n } else {\n this.overlayMaps[legendEntry] = layer;\n }\n }\n var layerPersonas = configLayer.personas;\n for (var x in this.personas) {\n if (layerPersonas.includes(this.personas[x].id)) {\n if (cluster) {\n this.personas[x].layers.push(clusterLayer);\n } else {\n this.personas[x].layers.push(layer);\n }\n }\n }\n\n //only happens once, after the last layer has loaded\n if (this.loadedLayerCount == this.layerCount) {\n this.createControl();\n if (this.mapConfig.personas && this.mapConfig.personas.length > 0) {\n this.personasClass = new _personas_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"](this.mapClass, this.layers, this.personas, this.layerControl, this.overlayMaps, this.filters);\n this.personasClass.init();\n }\n }\n }\n if (this.mapConfig.search && searchable) {\n // this.search = new Search(this.mapClass, layer);\n // this.search.init();\n this.search.searchLayer.addLayer(layer);\n }\n\n //only happens once, after the last layer has loaded\n if (this.loadedLayerCount == this.layerCount && this.mapConfig.search) {\n this.search.createMarkup();\n }\n\n //only happens once, after the last layer has loaded - create filters above the map\n if (this.mapConfig.filtersSection && this.loadedLayerCount == this.layerCount) {\n this.filters = new _filters_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"](this.mapClass, this.layersData);\n this.filters.init();\n }\n\n // Only happens once, after the last layer has loaded - create list view and or statistics tables after the map\n if (this.mapConfig.layerDownloads && this.loadedLayerCount == this.layerCount) {\n this.dataDownloads = new _data_download_js__WEBPACK_IMPORTED_MODULE_10__[\"default\"](this.mapClass, this.layersData, true);\n this.dataDownloads.init();\n }\n // only happens once, after the last layer has loaded - create list view after the map - now created with the tables\n // if (this.mapConfig.list && this.loadedLayerCount == this.layerCount) {\n // this.list = new List(this.mapClass,this.layersData);\n // this.list.init();\n // }\n\n // Only happens once, after the last layer has loaded - create list view and or statistics tables after the map\n if ((this.mapConfig.statistics || this.mapConfig.list) && this.loadedLayerCount == this.layerCount) {\n this.statistics = new _table_view_js__WEBPACK_IMPORTED_MODULE_9__[\"default\"](this.mapClass, this.layersData);\n this.statistics.init();\n }\n\n //only happens once, after the last layer has loaded: address search\n if (this.loadedLayerCount == this.layerCount && this.mapConfig.showAddressSearch) {\n this.showAddressSearch = new _address_search_js__WEBPACK_IMPORTED_MODULE_7__[\"default\"](this.mapClass);\n this.showAddressSearch.init();\n }\n\n //TEST aCCESSIBLITY\n if (this.loadedLayerCount == this.layerCount) {\n var AccessibilityControl = new _accessiblity_js__WEBPACK_IMPORTED_MODULE_11__[\"default\"](undefined);\n AccessibilityControl.init();\n }\n }\n }, {\n key: \"createControl\",\n value: function createControl() {\n var _this2 = this;\n this.layerControl = new leaflet__WEBPACK_IMPORTED_MODULE_0__.control.layers(null, this.overlayMaps, {\n collapsed: false,\n sortLayers: true,\n sortFunction: function sortFunction(a, b) {\n var x = a.options.sortOrder;\n var y = b.options.sortOrder;\n if (isNaN(x) && isNaN(y)) {\n return x.localeCompare(y);\n } else {\n return x >= y ? 1 : -1;\n }\n }\n });\n this.map.addControl(this.layerControl, {\n collapsed: false,\n position: \"topleft\"\n });\n var mapLegend = document.getElementById(\"legend\");\n mapLegend.appendChild(this.layerControl.getContainer());\n leaflet__WEBPACK_IMPORTED_MODULE_0__.DomEvent.on(this.layerControl.getContainer(), \"click\", function () {\n leaflet__WEBPACK_IMPORTED_MODULE_0__.DomEvent.stopPropagation;\n if (_this2.personasClass) {\n _this2.personasClass.removeActiveClass();\n }\n });\n //Make the legend not clickeable if there is blockInteractiveLegend\n if (this.mapConfig.blockInteractiveLegend) {\n this.layerControl.getContainer().classList.add(\"non-clickable-legend\");\n }\n return this.layerControl;\n }\n }, {\n key: \"loadLayers\",\n value: function loadLayers() {\n var _this3 = this;\n if (this.mapConfig.personas) {\n var _iterator3 = _createForOfIteratorHelper(this.mapConfig.personas),\n _step3;\n try {\n for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n var group = _step3.value;\n //crate layergroup object with this new empty list of layers\n var persona = {\n id: group.id,\n icon: group.icon,\n iconActive: group.iconActive,\n text: group.text,\n collapsed: false,\n layers: [],\n easyButton: null\n };\n this.personas.push(persona);\n }\n } catch (err) {\n _iterator3.e(err);\n } finally {\n _iterator3.f();\n }\n }\n if (this.mapConfig.search) {\n this.search = new _search_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"](this.mapClass);\n this.search.init();\n }\n // if (this.mapConfig.showAddressSearch){\n // this.showAddressSearch = new addressSearch(this.mapClass);\n // this.showAddressSearch.init();\n // }\n\n //for each layer in the config file\n var _iterator4 = _createForOfIteratorHelper(this.mapConfig.layers),\n _step4;\n try {\n var _loop = function _loop() {\n var configLayer = _step4.value;\n //Get the right geoserver WFS link using the hostname\n var url = '';\n //If there is cql, we add the cql filter to the wfs call\n if (configLayer.cqlFilter) {\n url = _this3.mapClass.geoserver_wfs_url + configLayer.geoserverLayerName + \"&cql_filter=\" + configLayer.cqlFilter;\n //If not, we use the default wfs call\n } else {\n url = _this3.mapClass.geoserver_wfs_url + configLayer.geoserverLayerName;\n }\n configLayer.url = url;\n //Fetch the url\n fetch(url, {\n method: \"get\"\n }).then(function (response) {\n return response.json();\n }).then(function (data) {\n return _this3.addWFSLayer(data, configLayer);\n }).catch(function (error) {\n console.log(error);\n alert(\"Something went wrong, please reload the page\");\n });\n };\n for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {\n _loop();\n }\n } catch (err) {\n _iterator4.e(err);\n } finally {\n _iterator4.f();\n }\n }\n }]);\n return DataLayers;\n}();\nleaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.CustomColor = leaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.extend({\n createIcon: function createIcon(oldIcon) {\n var icon = leaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.prototype.createIcon.call(this, oldIcon);\n icon.style.backgroundColor = this.options.color;\n return icon;\n }\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (DataLayers);\n\n//# sourceURL=webpack://LBHWebmap/./js/map/data-layers.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var leaflet__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! leaflet */ \"../node_modules/leaflet/dist/leaflet-src.js\");\n/* harmony import */ var leaflet_vectorgrid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! leaflet.vectorgrid */ \"../node_modules/leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.min.js\");\n/* harmony import */ var _metadata_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./metadata.js */ \"./js/map/metadata.js\");\n/* harmony import */ var _consts_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./consts.js */ \"./js/map/consts.js\");\n/* harmony import */ var _personas_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./personas.js */ \"./js/map/personas.js\");\n/* harmony import */ var _filters_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./filters.js */ \"./js/map/filters.js\");\n/* harmony import */ var _search_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./search.js */ \"./js/map/search.js\");\n/* harmony import */ var _address_search_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./address-search.js */ \"./js/map/address-search.js\");\n/* harmony import */ var _drill_down_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./drill-down.js */ \"./js/map/drill-down.js\");\n/* harmony import */ var _table_view_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./table-view.js */ \"./js/map/table-view.js\");\n/* harmony import */ var _data_download_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./data-download.js */ \"./js/map/data-download.js\");\n/* harmony import */ var _accessiblity_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./accessiblity.js */ \"./js/map/accessiblity.js\");\n/* harmony import */ var _helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../helpers/dynamic-styles.js */ \"./js/helpers/dynamic-styles.js\");\n/* harmony import */ var _helpers_h3_layer_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../helpers/h3-layer.js */ \"./js/helpers/h3-layer.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! d3 */ \"../node_modules/d3/src/index.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n\n\n\n\n// import List from \"./list-view.js\";\n\n\n\n\n\n\n\nvar DataLayers = /*#__PURE__*/function () {\n function DataLayers(map) {\n _classCallCheck(this, DataLayers);\n this.mapClass = map;\n this.map = map.map;\n this.container = map.container;\n this.mapConfig = map.mapConfig;\n this.controls = map.controls;\n this.layers = [];\n this.layerCount = map.mapConfig.layers.length;\n this.loadedLayerCount = 0;\n this.overlayMaps = {};\n this.personas = [];\n this.layerControl = null;\n this.personasClass = null;\n this.filters = null;\n this.layersData = [];\n this.search = null;\n this.showAddressSearch = null;\n this.list = null;\n this.statistics = null;\n }\n _createClass(DataLayers, [{\n key: \"pointToLayer\",\n value: function pointToLayer(feature, latlng, configLayer) {\n var rangeColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;\n var configMarkerColor = configLayer.pointStyle.markerColor;\n var configIconColor = configLayer.pointStyle.iconColor;\n if (!configIconColor && !configMarkerColor) {\n console.error('Markers missing markerColor');\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng);\n }\n if (configLayer.pointStyle.markerType === \"AwesomeMarker\") {\n var _ref, _Object$entries$find;\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng, {\n icon: leaflet__WEBPACK_IMPORTED_MODULE_0__.AwesomeMarkers.icon({\n icon: configLayer.pointStyle.icon,\n prefix: \"fa\",\n iconColor: (_ref = configIconColor !== null && configIconColor !== void 0 ? configIconColor : rangeColor) !== null && _ref !== void 0 ? _ref : \"white\",\n markerColor: configMarkerColor !== null && configMarkerColor !== void 0 ? configMarkerColor : (_Object$entries$find = Object.entries(_consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS).find(function (_ref2) {\n var _ref3 = _slicedToArray(_ref2, 2),\n key = _ref3[0],\n val = _ref3[1];\n return val === rangeColor;\n })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0],\n spin: false\n }),\n alt: configLayer.layerName\n });\n } else if (configLayer.pointStyle.markerType === \"CircleMarker\") {\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.circleMarker(latlng, {\n fillColor: rangeColor !== null && rangeColor !== void 0 ? rangeColor : _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[configMarkerColor],\n radius: configLayer.pointStyle.circleMarkerRadius || 6,\n stroke: true,\n weight: 1,\n color: rangeColor !== null && rangeColor !== void 0 ? rangeColor : _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[configMarkerColor],\n fillOpacity: 0.6\n });\n } else if (configLayer.pointStyle.markerType === \"DivIcon\") {\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng, {\n icon: new leaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.CustomColor({\n className: \"custom-div-icon\",\n iconSize: \"auto\",\n html: \"\".concat(feature.properties[configLayer.pointStyle.divIconLabel]),\n color: rangeColor !== null && rangeColor !== void 0 ? rangeColor : _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[configMarkerColor]\n })\n });\n } else {\n return leaflet__WEBPACK_IMPORTED_MODULE_0__.marker(latlng);\n }\n }\n }, {\n key: \"createMarkerPopup\",\n value: function createMarkerPopup(configLayer, feature, layerName) {\n var title = configLayer.popup.title;\n var afterTitle = configLayer.popup.afterTitle;\n var fields = configLayer.popup.fields;\n var afterFields = configLayer.popup.afterFields;\n var stringPopup = \"\";\n if (title !== \"notitle\") {\n if (title) {\n stringPopup = \"

\".concat(feature.properties[title], \"

\");\n } else {\n stringPopup = \"

\".concat(layerName, \"

\");\n }\n }\n if (afterTitle) {\n stringPopup += \"

\".concat(afterTitle, \"

\");\n }\n if (fields) {\n var _iterator = _createForOfIteratorHelper(fields),\n _step;\n try {\n for (_iterator.s(); !(_step = _iterator.n()).done;) {\n var field = _step.value;\n if (feature.properties[field.name] !== \"\" && feature.properties[field.name] !== null) {\n if (field.label != \"\") {\n stringPopup += \"

\".concat(field.label, \": \").concat(feature.properties[field.name], \"

\");\n } else {\n stringPopup += \"

\".concat(feature.properties[field.name], \"

\");\n }\n }\n }\n } catch (err) {\n _iterator.e(err);\n } finally {\n _iterator.f();\n }\n }\n if (afterFields) {\n stringPopup += \"

\".concat(afterFields, \"

\");\n }\n if (stringPopup === '

') return '';else return stringPopup;\n }\n }, {\n key: \"createTooltip\",\n value: function createTooltip(configLayer, feature, layerName) {\n var title = configLayer.tooltip.title;\n var afterTitle = configLayer.tooltip.afterTitle;\n var fields = configLayer.tooltip.fields;\n var afterFields = configLayer.tooltip.afterFields;\n var stringTooltip = \"\";\n if (title !== \"notitle\") {\n if (title) {\n stringTooltip = \"

\".concat(feature.properties[title], \"

\");\n } else {\n stringTooltip = \"

\".concat(layerName, \"

\");\n }\n }\n if (afterTitle) {\n stringTooltip += \"

\".concat(afterTitle, \"

\");\n }\n if (fields) {\n var _iterator2 = _createForOfIteratorHelper(fields),\n _step2;\n try {\n for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n var field = _step2.value;\n if (feature.properties[field.name]) {\n if (field.label) {\n stringTooltip += \"

\".concat(field.label, \": \").concat(feature.properties[field.name], \"

\");\n } else {\n stringTooltip += \"

\".concat(feature.properties[field.name], \"

\");\n }\n }\n }\n } catch (err) {\n _iterator2.e(err);\n } finally {\n _iterator2.f();\n }\n }\n if (afterFields) {\n stringTooltip += \"

\".concat(afterFields, \"

\");\n }\n if (stringTooltip === '

') return '';else return stringTooltip;\n }\n }, {\n key: \"addWFSLayer\",\n value: function addWFSLayer(data, configLayer) {\n var _linePolygonStyle$str,\n _rangeStyle$spacing,\n _this = this;\n // filter out null geometries\n data.features = data.features.filter(function (feature) {\n return feature === null || feature === void 0 ? void 0 : feature.geometry;\n });\n var layerName = configLayer.title;\n var sortOrder = configLayer.sortOrder && !isNaN(configLayer.sortOrder) ? configLayer.sortOrder : configLayer.title;\n var highlightFeatureOnHoverOrSelect = configLayer.highlightFeatureOnHoverOrSelect;\n var zoomToFeatureOnClick = configLayer.zoomToFeatureOnClick;\n var searchable = configLayer.searchable;\n var pointStyle = configLayer.pointStyle;\n var markerType = pointStyle && pointStyle.markerType;\n var markerIcon = pointStyle && pointStyle.icon;\n var markerIcon2 = pointStyle && pointStyle.icon2;\n var markerColor = pointStyle && pointStyle.markerColor;\n var markerColorIcon2 = pointStyle && pointStyle.markerColorIcon2;\n var iconColor = pointStyle && pointStyle.iconColor;\n var cluster = pointStyle && pointStyle.cluster;\n var disableClusteringAtZoom = pointStyle && pointStyle.disableClusteringAtZoom ? pointStyle && pointStyle.disableClusteringAtZoom : 12;\n var enableSpiderfy = pointStyle && pointStyle.enableSpiderfy ? pointStyle && pointStyle.enableSpiderfy : false;\n var maxClusterRadius = pointStyle && pointStyle.maxClusterRadius ? pointStyle && pointStyle.maxClusterRadius : 60;\n var clusterLayer = null;\n var h3HexLayer = configLayer.h3HexLayer;\n var linePolygonStyle = configLayer.linePolygonStyle;\n var layerStyle = linePolygonStyle && linePolygonStyle.styleName;\n var fillColor = linePolygonStyle && linePolygonStyle.fillColor;\n var baseLayerStyles = {\n opacity: linePolygonStyle && linePolygonStyle.opacity,\n stroke: (_linePolygonStyle$str = linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.stroke) !== null && _linePolygonStyle$str !== void 0 ? _linePolygonStyle$str : true,\n color: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.strokeColor,\n fillOpacity: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.fillOpacity,\n weight: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.weight,\n dashArray: linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.layerLineDash\n };\n\n //h3HexagonLayer\n var h3geojson = h3HexLayer && (0,_helpers_h3_layer_js__WEBPACK_IMPORTED_MODULE_13__[\"default\"])(data, h3HexLayer.partitionCountProperty, h3HexLayer.resolution);\n\n //rangeStyles\n var rangeStyle = configLayer.rangeStyle;\n var rangeLegendSpacing = (_rangeStyle$spacing = rangeStyle === null || rangeStyle === void 0 ? void 0 : rangeStyle.spacing) !== null && _rangeStyle$spacing !== void 0 ? _rangeStyle$spacing : 30;\n var featuresData = rangeStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getFeatureData)(h3geojson || data, rangeStyle.property);\n var _ref4 = featuresData ? rangeStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getMinMax)(featuresData) : {\n minValue: 0,\n maxValue: 0\n },\n minValue = _ref4.minValue,\n maxValue = _ref4.maxValue;\n var interpolator = rangeStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.colorInterpolator)(minValue, maxValue, rangeStyle.palette);\n var bins = featuresData && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.createBins)(featuresData, rangeStyle.threshold);\n var scaleRange = bins && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getScaleRange)(bins, rangeStyle.threshold);\n var scaleLegend = scaleRange && \"\\n \".concat(scaleRange.map(function (x, i) {\n return \"\");\n }), \"\\n \");\n var scaleLegendLabels = scaleRange && \"\\n \".concat(scaleRange.map(function (x, i) {\n return i % 2 == 0 || i == 0 || scaleRange.length - 1 == i ? \" 0 ? i * rangeLegendSpacing - 5 : i * rangeLegendSpacing, \" y=\\\"20\\\" font-size=\\\"12\\\" font-weight=\\\"bold\\\">\").concat(x, \"\") : '';\n }), \"\\n \");\n var scaleLegendTitle = scaleLegend && rangeStyle.legendTitle;\n //categoryStyle\n var categoryStyle = configLayer.categoryStyle;\n var categoryCount = categoryStyle === null || categoryStyle === void 0 ? void 0 : categoryStyle.categoryCount;\n var categories = categoryStyle && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getDistinctValues)(data, categoryStyle.property);\n var colorPicker = categories && (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getCategoryColor)(categories, categoryStyle.palette || \"schemePastel1\");\n var categoryLegend = categories && \"
\\n \".concat(categories.map(function (category) {\n return \"\\n \\n \").concat(category).concat(categoryCount ? (0,_helpers_dynamic_styles_js__WEBPACK_IMPORTED_MODULE_12__.getCategoryCounts)(data, categoryStyle.property, category) : '', \"\\n \");\n }).join(\"\"), \"\\n
\");\n var layer = new leaflet__WEBPACK_IMPORTED_MODULE_0__.GeoJSON(h3geojson || data, {\n color: _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[markerColor],\n pointToLayer: function pointToLayer(feature, latlng) {\n var featureColor = null;\n if (rangeStyle) {\n featureColor = interpolator(feature.properties[rangeStyle.property]);\n } else if (categoryStyle) {\n featureColor = colorPicker(feature.properties[categoryStyle.property]);\n }\n return _this.pointToLayer(feature, latlng, configLayer, featureColor);\n },\n onEachFeature: function onEachFeature(feature, layer) {\n if (configLayer.popup) {\n var popupString = _this.createMarkerPopup(configLayer, feature, layerName);\n if (popupString) {\n var popup = leaflet__WEBPACK_IMPORTED_MODULE_0__.popup({\n closeButton: true\n }).setContent(popupString);\n layer.bindPopup(popup, {\n maxWidth: 210\n });\n }\n if (_this.mapConfig.performDrillDown) {\n layer.off();\n }\n }\n if (configLayer.tooltip) {\n var tooltipString = _this.createTooltip(configLayer, feature, layerName);\n if (tooltipString) {\n var _configLayer$tooltip, _configLayer$tooltip2;\n var tooltip = leaflet__WEBPACK_IMPORTED_MODULE_0__.tooltip().setContent(tooltipString);\n layer.bindTooltip(tooltip, {\n direction: configLayer.tooltip.direction || 'auto',\n offset: configLayer.tooltip.offset || [0, 0],\n permanent: (_configLayer$tooltip = configLayer.tooltip) === null || _configLayer$tooltip === void 0 ? void 0 : _configLayer$tooltip.permanent,\n //if true make tooltip act as label\n className: \"\".concat((_configLayer$tooltip2 = configLayer.tooltip) !== null && _configLayer$tooltip2 !== void 0 && _configLayer$tooltip2.permanent ? \"permanent-tooltip\" : 'regular-tootip')\n });\n }\n }\n if (configLayer.followLinkOnClick && feature.properties[configLayer.followLinkOnClick]) {\n layer.on(\"click\", function (event) {\n //external link opens in a new tab\n if (feature.properties[configLayer.followLinkOnClick].startsWith('http')) {\n window.open(feature.properties[configLayer.followLinkOnClick], '_blank');\n }\n //internal link changes page location\n else {\n //from an iframe\n if (window.location != window.parent.location) {\n window.parent.location = feature.properties[configLayer.followLinkOnClick];\n }\n //from the main window\n else {\n window.location = feature.properties[configLayer.followLinkOnClick];\n }\n }\n });\n }\n },\n sortOrder: sortOrder,\n style: function style(feature) {\n if (rangeStyle || categoryStyle) {\n var styleColor = rangeStyle ? interpolator(feature.properties[rangeStyle.property]) : colorPicker(feature.properties[categoryStyle.property]);\n var styles = _objectSpread(_objectSpread({}, linePolygonStyle), {\n fillColor: styleColor,\n color: (linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.strokeColor) || styleColor,\n dashArray: (linePolygonStyle === null || linePolygonStyle === void 0 ? void 0 : linePolygonStyle.layerLineDash) || ''\n });\n return styles;\n } else if (layerStyle === \"default\") {\n return Object.assign(baseLayerStyles, {\n fillColor: fillColor\n });\n } else if (layerStyle === \"random polygons\") {\n //Create a random style and uses it as fillColor.\n var colorHex = \"#\".concat(Math.round(Math.random() * 0xffffff).toString(16));\n return Object.assign(baseLayerStyles, {\n fillColor: colorHex\n });\n }\n }\n });\n if (zoomToFeatureOnClick) {\n layer.on(\"click\", function (event) {\n if (event.propagatedFrom instanceof leaflet__WEBPACK_IMPORTED_MODULE_0__.Polygon) {\n _this.map.fitBounds(event.propagatedFrom.getBounds());\n }\n });\n }\n if (highlightFeatureOnHoverOrSelect && linePolygonStyle) {\n layer.on(\"mouseover\", function (event) {\n if (event.propagatedFrom instanceof leaflet__WEBPACK_IMPORTED_MODULE_0__.Polygon || event.propagatedFrom instanceof leaflet__WEBPACK_IMPORTED_MODULE_0__.Polyline) {\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight + 2\n });\n }\n });\n layer.on(\"mouseout\", function (event) {\n if (!(event.propagatedFrom.getPopup() && event.propagatedFrom.getPopup().isOpen())) {\n //go back to normal weight only if there is no open popup\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight\n });\n }\n });\n layer.on(\"popupopen\", function (event) {\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight + 2\n });\n });\n layer.on(\"popupclose\", function (event) {\n event.propagatedFrom.setStyle({\n weight: baseLayerStyles.weight\n });\n });\n }\n if (cluster) {\n //set the clusters color\n document.documentElement.style.setProperty('--cluster-color', _consts_js__WEBPACK_IMPORTED_MODULE_3__.MARKER_COLORS[markerColor]);\n //create clusters layer\n clusterLayer = leaflet__WEBPACK_IMPORTED_MODULE_0__.markerClusterGroup({\n maxClusterRadius: maxClusterRadius,\n disableClusteringAtZoom: disableClusteringAtZoom,\n spiderfyOnMaxZoom: enableSpiderfy,\n showCoverageOnHover: false\n });\n clusterLayer.addLayer(layer);\n //add the sortorder as an option to the clusterLayer (needed for the legend)\n clusterLayer.options.sortOrder = layer.options.sortOrder;\n this.layersData.push({\n configLayer: configLayer,\n layer: layer,\n data: data,\n clusterLayer: clusterLayer\n });\n } else {\n this.layersData.push({\n configLayer: configLayer,\n layer: layer,\n data: data\n });\n }\n\n //If displayScaleRange exists, the displayMinScale/displayMaxScale are created using those and the default min/max mapzoom levels. \n if (configLayer.displayScaleRange) {\n var displayMinScale = configLayer.displayScaleRange.minScale ? configLayer.displayScaleRange.minScale : this.map.options.minZoom;\n var displayMaxScale = configLayer.displayScaleRange.maxScale ? configLayer.displayScaleRange.maxScale : this.map.options.maxZoom;\n\n //Add a listener to control the visibility zoom when zooming\n this.map.on('zoomend ', function (e) {\n //console.log('zoom = '+ this.map.getZoom());\n if (cluster) {\n if (_this.map.getZoom() >= displayMinScale && _this.map.getZoom() <= displayMaxScale) {\n _this.map.addLayer(clusterLayer);\n } else {\n _this.map.removeLayer(clusterLayer);\n }\n } else {\n if (_this.map.getZoom() >= displayMinScale && _this.map.getZoom() <= displayMaxScale) {\n _this.map.addLayer(layer);\n } else {\n _this.map.removeLayer(layer);\n }\n }\n });\n\n //Add or not the layer on load\n if (this.mapConfig.showLayersOnLoad) {\n if (cluster) {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(clusterLayer);\n }\n } else {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(layer);\n }\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n } else if (this.mapConfig.showFirstLayerOnLoad && sortOrder == 1) {\n if (cluster) {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(clusterLayer);\n }\n } else {\n if (this.map.getZoom() >= displayMinScale && this.map.getZoom() <= displayMaxScale) {\n this.map.addLayer(layer);\n }\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n }\n }\n //If there is no displayScaleRange in the map config (general case))\n else {\n if (this.mapConfig.showLayersOnLoad) {\n if (cluster) {\n this.map.addLayer(clusterLayer);\n } else {\n layer.addTo(this.map);\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n } else if (this.mapConfig.showFirstLayerOnLoad && sortOrder == 1) {\n if (cluster) {\n this.map.addLayer(clusterLayer);\n } else {\n layer.addTo(this.map);\n if (configLayer.loadToBack) {\n layer.bringToBack();\n }\n }\n }\n }\n\n //open popup closest to the map centre\n if (configLayer.openPopupClosestToMapCentre) {\n var closestMarker = leaflet__WEBPACK_IMPORTED_MODULE_0__.GeometryUtil.closestLayer(this.map, layer.getLayers(), this.map.getCenter());\n closestMarker.layer.openPopup();\n }\n this.loadedLayerCount++;\n\n //only happens once, after the last layer has loaded - put the BLPUpolygon layer on top if it exists\n if (this.mapClass.blpuPolygon && this.loadedLayerCount == this.layerCount) {\n this.mapClass.blpuPolygon.bringToFront();\n }\n\n //only happens once, after the last layer has loaded - add the drill down listener if true\n if (this.mapConfig.performDrillDown && this.loadedLayerCount == this.layerCount) {\n this.drilldown = new _drill_down_js__WEBPACK_IMPORTED_MODULE_8__[\"default\"](this.map);\n this.drilldown.init();\n }\n if (this.mapConfig.showLegend) {\n if (!configLayer.excludeFromLegend) {\n var count = layer.getLayers().length;\n var countLabel = configLayer.countLabel || 'items';\n if (cluster) {\n this.layers.push(clusterLayer);\n } else {\n this.layers.push(layer);\n }\n var legendEntry = \"\\n
\\n
\\n \\n \").concat(scaleRange && rangeStyle.gradientLegendBorder ? \"\") : '', \"\\n
\\n
\\n \\n \\n \").concat(markerIcon2 && markerColorIcon2 ? \"\") : '', \"\\n \\n
\\n
\\n \").concat(layerName, \"\\n \").concat(this.mapConfig.hideNumberOfItems || configLayer.hideNumberOfItems ? '' : \"
\\n \\n \").concat(count, \" \").concat(countLabel, \" shown\\n \"), \"\\n \\n\\n
\\n
\\n \").concat(scaleRange ? '
' : '', \"\\n \").concat(scaleLegendTitle ? scaleLegendTitle : '', \"\\n \").concat(scaleRange ? scaleLegend : '', \"\\n \").concat(scaleRange ? \"\".concat(scaleLegendLabels, \"\") : '', \"\\n \").concat(scaleRange ? '
' : '', \"\\n \").concat(categories ? categoryLegend : '', \"\\n \");\n if (cluster) {\n this.overlayMaps[legendEntry] = clusterLayer;\n } else {\n this.overlayMaps[legendEntry] = layer;\n }\n }\n var layerPersonas = configLayer.personas;\n for (var x in this.personas) {\n if (layerPersonas.includes(this.personas[x].id)) {\n if (cluster) {\n this.personas[x].layers.push(clusterLayer);\n } else {\n this.personas[x].layers.push(layer);\n }\n }\n }\n\n //only happens once, after the last layer has loaded\n if (this.loadedLayerCount == this.layerCount) {\n this.createControl();\n if (this.mapConfig.personas && this.mapConfig.personas.length > 0) {\n this.personasClass = new _personas_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"](this.mapClass, this.layers, this.personas, this.layerControl, this.overlayMaps, this.filters);\n this.personasClass.init();\n }\n }\n }\n if (this.mapConfig.search && searchable) {\n // this.search = new Search(this.mapClass, layer);\n // this.search.init();\n this.search.searchLayer.addLayer(layer);\n }\n\n //only happens once, after the last layer has loaded\n if (this.loadedLayerCount == this.layerCount && this.mapConfig.search) {\n this.search.createMarkup();\n }\n\n //only happens once, after the last layer has loaded - create filters above the map\n if (this.mapConfig.filtersSection && this.loadedLayerCount == this.layerCount) {\n this.filters = new _filters_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"](this.mapClass, this.layersData);\n this.filters.init();\n }\n\n // Only happens once, after the last layer has loaded - create list view and or statistics tables after the map\n if (this.mapConfig.layerDownloads && this.loadedLayerCount == this.layerCount) {\n this.dataDownloads = new _data_download_js__WEBPACK_IMPORTED_MODULE_10__[\"default\"](this.mapClass, this.layersData, true);\n this.dataDownloads.init();\n }\n // only happens once, after the last layer has loaded - create list view after the map - now created with the tables\n // if (this.mapConfig.list && this.loadedLayerCount == this.layerCount) {\n // this.list = new List(this.mapClass,this.layersData);\n // this.list.init();\n // }\n\n // Only happens once, after the last layer has loaded - create list view and or statistics tables after the map\n if ((this.mapConfig.statistics || this.mapConfig.list) && this.loadedLayerCount == this.layerCount) {\n this.statistics = new _table_view_js__WEBPACK_IMPORTED_MODULE_9__[\"default\"](this.mapClass, this.layersData);\n this.statistics.init();\n }\n\n //only happens once, after the last layer has loaded: address search\n if (this.loadedLayerCount == this.layerCount && this.mapConfig.showAddressSearch) {\n this.showAddressSearch = new _address_search_js__WEBPACK_IMPORTED_MODULE_7__[\"default\"](this.mapClass);\n this.showAddressSearch.init();\n }\n\n //TEST aCCESSIBLITY\n if (this.loadedLayerCount == this.layerCount) {\n var AccessibilityControl = new _accessiblity_js__WEBPACK_IMPORTED_MODULE_11__[\"default\"](undefined);\n AccessibilityControl.init();\n }\n }\n }, {\n key: \"createControl\",\n value: function createControl() {\n var _this2 = this;\n this.layerControl = new leaflet__WEBPACK_IMPORTED_MODULE_0__.control.layers(null, this.overlayMaps, {\n collapsed: false,\n sortLayers: true,\n sortFunction: function sortFunction(a, b) {\n var x = a.options.sortOrder;\n var y = b.options.sortOrder;\n if (isNaN(x) && isNaN(y)) {\n return x.localeCompare(y);\n } else {\n return x >= y ? 1 : -1;\n }\n }\n });\n this.map.addControl(this.layerControl, {\n collapsed: false,\n position: \"topleft\"\n });\n var mapLegend = document.getElementById(\"legend\");\n mapLegend.appendChild(this.layerControl.getContainer());\n leaflet__WEBPACK_IMPORTED_MODULE_0__.DomEvent.on(this.layerControl.getContainer(), \"click\", function () {\n leaflet__WEBPACK_IMPORTED_MODULE_0__.DomEvent.stopPropagation;\n if (_this2.personasClass) {\n _this2.personasClass.removeActiveClass();\n }\n });\n //Make the legend not clickeable if there is blockInteractiveLegend\n if (this.mapConfig.blockInteractiveLegend) {\n this.layerControl.getContainer().classList.add(\"non-clickable-legend\");\n }\n return this.layerControl;\n }\n }, {\n key: \"loadLayers\",\n value: function loadLayers() {\n var _this3 = this;\n if (this.mapConfig.personas) {\n var _iterator3 = _createForOfIteratorHelper(this.mapConfig.personas),\n _step3;\n try {\n for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n var group = _step3.value;\n //crate layergroup object with this new empty list of layers\n var persona = {\n id: group.id,\n icon: group.icon,\n iconActive: group.iconActive,\n text: group.text,\n collapsed: false,\n layers: [],\n easyButton: null\n };\n this.personas.push(persona);\n }\n } catch (err) {\n _iterator3.e(err);\n } finally {\n _iterator3.f();\n }\n }\n if (this.mapConfig.search) {\n this.search = new _search_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"](this.mapClass);\n this.search.init();\n }\n // if (this.mapConfig.showAddressSearch){\n // this.showAddressSearch = new addressSearch(this.mapClass);\n // this.showAddressSearch.init();\n // }\n\n //for each layer in the config file\n var _iterator4 = _createForOfIteratorHelper(this.mapConfig.layers),\n _step4;\n try {\n var _loop = function _loop() {\n var configLayer = _step4.value;\n //Get the right geoserver WFS link using the hostname\n var url = '';\n //If there is cql, we add the cql filter to the wfs call\n if (configLayer.cqlFilter) {\n url = _this3.mapClass.geoserver_wfs_url + configLayer.geoserverLayerName + \"&cql_filter=\" + configLayer.cqlFilter;\n //If not, we use the default wfs call\n } else {\n url = _this3.mapClass.geoserver_wfs_url + configLayer.geoserverLayerName;\n }\n configLayer.url = url;\n //Fetch the url\n fetch(url, {\n method: \"get\"\n }).then(function (response) {\n return response.json();\n }).then(function (data) {\n return _this3.addWFSLayer(data, configLayer);\n }).catch(function (error) {\n console.log(error);\n alert(\"Something went wrong, please reload the page\");\n });\n };\n for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {\n _loop();\n }\n } catch (err) {\n _iterator4.e(err);\n } finally {\n _iterator4.f();\n }\n }\n }]);\n return DataLayers;\n}();\nleaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.CustomColor = leaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.extend({\n createIcon: function createIcon(oldIcon) {\n var icon = leaflet__WEBPACK_IMPORTED_MODULE_0__.DivIcon.prototype.createIcon.call(this, oldIcon);\n icon.style.backgroundColor = this.options.color;\n return icon;\n }\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (DataLayers);\n\n//# sourceURL=webpack://LBHWebmap/./js/map/data-layers.js?"); /***/ }), diff --git a/src/js/helpers/dynamic-styles.js b/src/js/helpers/dynamic-styles.js index 1089a5d..02cbad7 100644 --- a/src/js/helpers/dynamic-styles.js +++ b/src/js/helpers/dynamic-styles.js @@ -63,4 +63,9 @@ function getCategoryColor (data,colorPalette="schemePastel1"){ } -export { getFeatureData,getMinMax,createBins,getScaleRange,colorInterpolator,getDistinctValues,getCategoryColor}; \ No newline at end of file +function getCategoryCounts(data,property,category){ + const numberOfFeatures = data.features.filter(feature => feature.properties?.[property] == category && feature.geometry) + return ` (${numberOfFeatures?.length})` +} + +export { getFeatureData,getMinMax,createBins,getScaleRange,colorInterpolator,getDistinctValues,getCategoryColor,getCategoryCounts}; \ No newline at end of file diff --git a/src/js/map/data-layers.js b/src/js/map/data-layers.js index 3a51f01..b4f1e78 100644 --- a/src/js/map/data-layers.js +++ b/src/js/map/data-layers.js @@ -12,7 +12,7 @@ import Table from "./table-view.js"; import DataDownload from "./data-download.js"; import Accessibility from "./accessiblity.js"; import { getFeatureData,getMinMax,createBins,getScaleRange, - colorInterpolator,getDistinctValues,getCategoryColor } from "../helpers/dynamic-styles.js"; + colorInterpolator,getDistinctValues,getCategoryColor,getCategoryCounts } from "../helpers/dynamic-styles.js"; import createH3Geojson from "../helpers/h3-layer.js"; import { color } from "d3"; @@ -177,6 +177,8 @@ class DataLayers { } addWFSLayer(data, configLayer) { + // filter out null geometries + data.features = data.features.filter(feature => feature?.geometry) const layerName = configLayer.title; const sortOrder = configLayer.sortOrder && !isNaN(configLayer.sortOrder) @@ -237,15 +239,15 @@ class DataLayers { ${scaleRange.map((x,i)=> i % 2 == 0 || i==0 || scaleRange.length-1==i ?`0?i*rangeLegendSpacing-5:i*rangeLegendSpacing} y="20" font-size="12" font-weight="bold">${x}`:'')} ` const scaleLegendTitle = scaleLegend && rangeStyle.legendTitle - //categoryStyle const categoryStyle = configLayer.categoryStyle; + const categoryCount = categoryStyle?.categoryCount; const categories = categoryStyle && getDistinctValues(data,categoryStyle.property) const colorPicker = categories && getCategoryColor(categories,categoryStyle.palette||"schemePastel1") const categoryLegend = categories && `
${categories.map((category)=>` - ${category} + ${category}${categoryCount?getCategoryCounts(data,categoryStyle.property,category):''} `).join("")}
`