@devgateway/dvz-ui-react 1.3.5 → 1.5.0

package/dist/esm/embeddable/map/map.js

@@ -1,18 +1,28 @@
-var $ = Object.defineProperty;
-var J = (T, I, e) => I in T ? $(T, I, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[I] = e;
-var _ = (T, I, e) => J(T, typeof I != "symbol" ? I + "" : I, e);
-import { jsx as b, jsxs as w, Fragment as X } from "react/jsx-runtime";
-import { injectIntl as Y, FormattedMessage as q } from "react-intl";
-import * as m from "d3";
-import { Container as R, Segment as K, Dimmer as Q, Loader as ee, Message as N, Icon as E, Popup as te, Grid as O } from "semantic-ui-react";
-import H from "react";
-import * as se from "topojson-client";
-import ie from "./legend.js";
+var X = Object.defineProperty;
+var Y = (w, F, e) => F in w ? X(w, F, { enumerable: !0, configurable: !0, writable: !0, value: e }) : w[F] = e;
+var H = (w, F, e) => Y(w, typeof F != "symbol" ? F + "" : F, e);
+import { jsx as b, jsxs as M, Fragment as R } from "react/jsx-runtime";
+import { injectIntl as q, FormattedMessage as K } from "react-intl";
+import * as g from "d3";
+import { Container as U, Segment as Q, Dimmer as ee, Loader as te, Message as N, Icon as E, Popup as se, Grid as S } from "semantic-ui-react";
+import V from "react";
+import * as ie from "topojson-client";
+import oe from "./legend.js";
 import { formatContent as k } from "../common/MapTooltip.js";
-import F from "../../utils/deviceType.js";
-import oe from "geostats";
+import T from "../../utils/deviceType.js";
+import ae from "geostats";
 import { Config as re } from "../../conf/index.js";
-const ae = "_Color_", U = "location", S = "showAll", j = "ifUnitHasData", le = 10, ne = {
+function O(w, F, e) {
+  var l;
+  if (!(w != null && w.length)) return F;
+  const s = ((l = w[0]) == null ? void 0 : l.items) ?? [], i = (a) => (a == null ? void 0 : a.trim().toLowerCase()) ?? "", o = i(F), t = i(e).toUpperCase(), r = s.find(
+    (a) => i(a.value) === o || a.code.trim().toLowerCase() === o
+  ) ?? null;
+  if (!r) return F;
+  const n = t && r.labels && r.labels[t] ? r.labels[t] : r.value;
+  return (n == null ? void 0 : n.trim()) || r.value.trim();
+}
+const le = "_Color_", G = "location", j = "showAll", B = "ifUnitHasData", ne = 10, pe = {
   mobile: 4,
   tablet: 4,
   midTablet: 2,
@@ -26,14 +36,14 @@ const ae = "_Color_", U = "location", S = "showAll", j = "ifUnitHasData", le = 1
   laptop: 200,
   desktop: 100,
   wide: 100
-}, V = {
+}, Z = {
   mobile: 250,
   tablet: 250,
   midTablet: 250,
   laptop: 0,
   desktop: 0,
   wide: 0
-}, pe = {
+}, he = {
   greens: [
     "#ccffdd",
     "#b3ffcc",
@@ -106,102 +116,144 @@ const ae = "_Color_", U = "location", S = "showAll", j = "ifUnitHasData", le = 1
     "#1a66ff",
     "#0055ff"
   ]
-}, he = ["mobile", "tablet", "midTablet"].includes(F()), G = ["mobile", "tablet"].includes(F());
-class de extends H.Component {
+}, de = ["mobile", "tablet", "midTablet"].includes(
+  T()
+), $ = ["mobile", "tablet"].includes(T());
+class ue extends V.Component {
   constructor(e) {
+    var s;
     super(e);
-    _(this, "handleScroll", () => {
+    H(this, "handleScroll", () => {
       let e = null;
       clearTimeout(e), e = setTimeout(() => {
-        m.select(this.getMapId()).selectAll(".map-labels-container").size() > 0 || this.updateFeatures(this.getFeatures(), !1);
+        g.select(this.getMapId()).selectAll(".map-labels-container").size() > 0 || this.updateFeatures(this.getFeatures(), !1);
       }, 300);
     });
-    this.mapContainer = H.createRef(), this.state = { mainLayer: null, layers: null }, this.classColor = this.classColor.bind(this), this.featuresZoom = this.featuresZoom.bind(this), this.fullView = this.fullView.bind(this), this.onZoomIn = this.onZoomIn.bind(this), this.onZoomOut = this.onZoomOut.bind(this), this.onReset = this.onReset.bind(this), this.onClick = this.onClick.bind(this), this.showTooltip = this.showTooltip.bind(this), this.mousemove = this.mousemove.bind(this), this.mouseout = this.mouseout.bind(this), this.updateFeatures = this.updateFeatures.bind(this), this.d3Map = this.d3Map.bind(this), this.getFeatures = this.getFeatures.bind(this), this.boundingExtent = this.boundingExtent.bind(this), this.getMapId = this.getMapId.bind(this), this.zoomed = this.zoomed.bind(this), this.zoomEnd = this.zoomEnd.bind(this), this.drawPoints = this.drawPoints.bind(this), this.extractFeatures = this.extractFeatures.bind(this), this.getLayers = this.getLayers.bind(this), this.onPointClick = this.onPointClick.bind(this), this.onPolygonClick = this.onPolygonClick.bind(this), this.getCenter = this.getCenter.bind(this), this.mapPosition = null, this.zooming = !1, this.translateValue = ne[F()], this.projection = m.geoMercator().scale(e.scale).center(e.center).translate([this.getWidth() / this.translateValue, this.getHeight() / 2]), this.path = m.geoPath().projection(this.projection), this.zoom = m.zoom().scaleExtent([1, 16]).on("zoom", this.zoomed).on("end", this.zoomEnd), this.centered = null, this.state = {
+    this.mapContainer = V.createRef(), this.state = { mainLayer: null, layers: null }, this.classColor = this.classColor.bind(this), this.featuresZoom = this.featuresZoom.bind(this), this.fullView = this.fullView.bind(this), this.onZoomIn = this.onZoomIn.bind(this), this.onZoomOut = this.onZoomOut.bind(this), this.onReset = this.onReset.bind(this), this.onClick = this.onClick.bind(this), this.showTooltip = this.showTooltip.bind(this), this.mousemove = this.mousemove.bind(this), this.mouseout = this.mouseout.bind(this), this.updateFeatures = this.updateFeatures.bind(this), this.d3Map = this.d3Map.bind(this), this.getFeatures = this.getFeatures.bind(this), this.boundingExtent = this.boundingExtent.bind(this), this.getMapId = this.getMapId.bind(this), this.zoomed = this.zoomed.bind(this), this.zoomEnd = this.zoomEnd.bind(this), this.drawPoints = this.drawPoints.bind(this), this.extractFeatures = this.extractFeatures.bind(this), this.getLayers = this.getLayers.bind(this), this.onPointClick = this.onPointClick.bind(this), this.onPolygonClick = this.onPolygonClick.bind(this), this.getCenter = this.getCenter.bind(this), this.mapPosition = null, this.zooming = !1, this.translateValue = pe[T()], this.projection = g.geoMercator().scale(e.scale).center(e.center).translate([this.getWidth() / this.translateValue, this.getHeight() / 2]), this.path = g.geoPath().projection(this.projection), this.zoom = g.zoom().scaleExtent([1, 16]).on("zoom", this.zoomed).on("end", this.zoomEnd), this.centered = null, this.state = {
       selectedMeasure: e.transformedData && e.transformedData.measures && e.transformedData.measures.length > 1 ? e.transformedData.measures[0] : null,
       generatedBreaks: [],
       selectedPolygon: null,
       layersLoading: !1
-    };
+    }, this.metadataTypes = ((s = e.transformedData) == null ? void 0 : s.types) || [];
   }
   componentDidMount() {
-    window.addEventListener("scroll", this.handleScroll, { passive: !0 }), window.addEventListener("touchmove", this.handleScroll, { passive: !0 }), this.loadLayers(), this.tooltip = m.select("body").append("div").style("position", "absolute").style("visibility", "hidden");
+    window.addEventListener("scroll", this.handleScroll, { passive: !0 }), window.addEventListener("touchmove", this.handleScroll, { passive: !0 }), this.loadLayers(), this.tooltip = g.select("body").append("div").style("position", "absolute").style("visibility", "hidden"), console.log("Map props", this.metadataTypes);
   }
-  componentDidCatch(e, t) {
+  componentDidCatch(e, s) {
     console.log(e);
   }
   componentWillUnmount() {
     window.removeEventListener("scroll", this.handleScroll);
   }
   loadLayers() {
-    const { source: e, mainLayerId: t, enabledLayers: i } = this.props;
+    const { source: e, mainLayerId: s, enabledLayers: i } = this.props;
     if (this.setState({
       layers: [],
       layersLoading: !0
     }), i && i.length > 0) {
       const o = [];
-      i.forEach((s) => {
+      i.forEach((t) => {
         o.push(
-          new Promise((l, c) => {
-            m.json(re.REACT_APP_WP_API + "/wp/v2/media/" + s.id).then((r) => {
-              l({ id: s.id, url: r.source_url, index: s.index });
-            }).catch(function(r) {
-              l({ id: s.id, url: null, index: s.index });
+          new Promise((r, n) => {
+            g.json(re.REACT_APP_WP_API + "/wp/v2/media/" + t.id).then((l) => {
+              r({
+                id: t.id,
+                url: l.source_url,
+                index: t.index,
+                layerMappingField: t.layerMappingField,
+                layerDatasource: t.datasource,
+                layerApiField: t.apiField,
+                layerLocale: t.locale,
+                displayLayerLabels: t.displayLayerLabels
+              });
+            }).catch(function(l) {
+              r({
+                id: t.id,
+                url: null,
+                index: t.index,
+                layerMappingField: t.layerMappingField,
+                layerDatasource: t.datasource,
+                layerApiField: t.apiField,
+                layerLocale: t.locale,
+                displayLayerLabels: t.displayLayerLabels
+              });
             });
           })
         );
-      }), Promise.all(o).then((s) => {
-        const l = [];
-        s.forEach((c) => {
-          c.url && l.push(
-            new Promise((r, a) => {
-              m.json(c.url).then((h) => {
-                r({ id: c.id, data: h, index: c.index });
+      }), Promise.all(o).then((t) => {
+        const r = [];
+        t.forEach((n) => {
+          n.url && r.push(
+            new Promise((l, a) => {
+              g.json(n.url).then((h) => {
+                l({
+                  id: n.id,
+                  data: h,
+                  index: n.index,
+                  layerMappingField: n.layerMappingField,
+                  layerDatasource: n.layerDatasource,
+                  layerApiField: n.layerApiField,
+                  layerLocale: n.layerLocale,
+                  displayLayerLabels: n.displayLayerLabels
+                });
               });
             })
           );
-        }), Promise.all(l).then((c) => {
+        }), Promise.all(r).then((n) => {
           this.setState({
-            layers: c,
+            layers: n,
             layersLoading: !1
           });
         });
       });
     } else
-      m.json(e).then((o) => {
+      g.json(e).then((o) => {
         this.setState({
-          layers: [{ id: null, url: e, data: o, index: 0 }],
+          layers: [
+            {
+              id: null,
+              url: e,
+              data: o,
+              index: 0,
+              layerMappingField: null,
+              layerDatasource: null,
+              layerApiField: null,
+              layerLocale: null,
+              displayLayerLabels: !1
+            }
+          ],
           layersLoading: !1
         });
       });
   }
   getMainLayer() {
-    const e = this.getLayers(), { mainLayerId: t, enabledLayers: i } = this.props;
+    const e = this.getLayers(), { mainLayerId: s, enabledLayers: i } = this.props;
     let o;
     return e && (o = e.filter(
-      (s) => s.id == t || s.id == null
+      (t) => t.id == s || t.id == null
     )[0] || e[0]), o ? o.data : null;
   }
-  componentDidUpdate(e, t, i) {
-    const { selectedMeasure: o, layers: s, selectedPolygon: l } = this.state, c = this.getMainLayer(), { transformedData: r, intl: a, zoomOnFilterField: h, appliedFilters: n } = this.props, { appliedFilters: u } = e;
+  componentDidUpdate(e, s, i) {
+    const { selectedMeasure: o, layers: t, selectedPolygon: r } = this.state, n = this.getMainLayer(), { transformedData: l, intl: a, zoomOnFilterField: h, appliedFilters: p } = this.props, { appliedFilters: d } = e;
     if (h) {
-      const L = [], p = [];
-      u && Object.keys(u).forEach((d) => {
-        u[d] != null && u[d] instanceof Array && L.push(
-          ...u[d].filter(
-            (v) => v != Number.MIN_SAFE_INTEGER
+      const v = [], c = [];
+      d && Object.keys(d).forEach((f) => {
+        d[f] != null && d[f] instanceof Array && v.push(
+          ...d[f].filter(
+            (y) => y != Number.MIN_SAFE_INTEGER
           )
         );
-      }), n && Object.keys(n).forEach((d) => {
-        n[d] != null && n[d] instanceof Array && p.push(
-          ...n[d].filter((v) => v != Number.MIN_SAFE_INTEGER)
+      }), p && Object.keys(p).forEach((f) => {
+        p[f] != null && p[f] instanceof Array && c.push(
+          ...p[f].filter((y) => y != Number.MIN_SAFE_INTEGER)
         );
-      }), L.length > 0 && p.length == 0 && this.onReset();
+      }), v.length > 0 && c.length == 0 && this.onReset();
     }
     this.tooltip.style("visibility", "hidden"), e.enabledLayers.length != this.props.enabledLayers.length && this.loadLayers();
-    const f = this.getFeatures();
+    const u = this.getFeatures();
     e.center !== this.props.center && (this.mapPosition = null, this.projection.scale(this.props.scale).center(this.props.center).translate([this.getWidth() / 2, this.getHeight() / 2]));
-    const g = this.filterUpdated(e, t);
-    this.d3Map(f, g), s && r && (r != e.transformedData || s != t.layers || o != t.selectedMeasure || l != t.selectedPolygon || c != t.mainLayer || e.mainLayerId !== this.props.mainLayerId || JSON.stringify(e.enabledLayers) != JSON.stringify(this.props.enabledLayers)) && this.updateFeatures(this.getFeatures(), g);
+    const m = this.filterUpdated(e, s);
+    this.d3Map(u, m), t && l && (l != e.transformedData || t != s.layers || o != s.selectedMeasure || r != s.selectedPolygon || n != s.mainLayer || e.mainLayerId !== this.props.mainLayerId || JSON.stringify(e.enabledLayers) != JSON.stringify(this.props.enabledLayers)) && this.updateFeatures(this.getFeatures(), m);
   }
   getHeight() {
     return this.props.height;
@@ -210,99 +262,99 @@ class de extends H.Component {
     return this.mapContainer.current ? this.mapContainer.current.offsetWidth : this.props.width;
   }
   boundingExtent(e) {
-    let t, i, o, s;
-    for (const l in e) {
-      const [[c, r], [a, h]] = this.path.bounds(e[l]);
-      (c < t || t == null) && (t = c), (a > i || i == null) && (i = a), (r < o || o == null) && (o = r), (h > s || s == null) && (s = h);
+    let s, i, o, t;
+    for (const r in e) {
+      const [[n, l], [a, h]] = this.path.bounds(e[r]);
+      (n < s || s == null) && (s = n), (a > i || i == null) && (i = a), (l < o || o == null) && (o = l), (h > t || t == null) && (t = h);
     }
     return [
-      [t, o],
-      [i, s]
+      [s, o],
+      [i, t]
     ];
   }
   onReset() {
     this.mapPosition = null, this.tooltip.style("visibility", "hidden"), this.fullView();
   }
   resizeLabels(e) {
-    const { labelFontSize: t, mapLabelField: i } = this.props;
-    m.select(this.getMapId()).selectAll(".map-labels-container").each((o, s, l) => {
-      const c = m.select(l[s]), r = c.select("div"), a = e.k > 1 ? e.k : 1, h = t / a;
-      r.style("font-size", `${h}px`);
-      const n = this.getLabelPosition(o), u = this.getLabelBoxWidth(o) / a, f = n[0] - u / 2, g = e.k > 1 ? 10 / e.k : 10, L = n[1] - g;
-      c.attr("x", f).attr("y", L).attr("width", this.getLabelBoxWidth(o) / a).attr("height", this.getLabelBoxHeight(o) / a);
+    const { labelFontSize: s, mapLabelField: i } = this.props;
+    g.select(this.getMapId()).selectAll(".map-labels-container").each((o, t, r) => {
+      const n = g.select(r[t]), l = n.select("div"), a = e.k > 1 ? e.k : 1, h = s / a;
+      l.style("font-size", `${h}px`);
+      const p = this.getLabelPosition(o), d = this.getLabelBoxWidth(o) / a, u = p[0] - d / 2, m = e.k > 1 ? 10 / e.k : 10, v = p[1] - m;
+      n.attr("x", u).attr("y", v).attr("width", this.getLabelBoxWidth(o) / a).attr("height", this.getLabelBoxHeight(o) / a);
     });
   }
   resizePointLabels(e) {
-    const { labelFontSize: t } = this.props;
-    m.select(this.getMapId()).selectAll(".point-labels-container").each((i, o, s) => {
-      const l = m.select(s[o]), c = l.select("div"), r = e.k > 1 ? e.k : 1, a = t / r;
-      c.style("font-size", `${a}px`);
+    const { labelFontSize: s } = this.props;
+    g.select(this.getMapId()).selectAll(".point-labels-container").each((i, o, t) => {
+      const r = g.select(t[o]), n = r.select("div"), l = e.k > 1 ? e.k : 1, a = s / l;
+      n.style("font-size", `${a}px`);
       const h = this.projection([
         i.geometry.coordinates[1],
         i.geometry.coordinates[0]
-      ]), n = (this.getLabelBoxWidth(i) + 20) / r, u = this.getLabelBoxHeight(i) / r, f = h[0] - n / 2, g = h[1] - u / 2;
-      l.attr("x", f).attr("y", g).attr("width", n).attr("height", u);
+      ]), p = (this.getLabelBoxWidth(i) + 20) / l, d = this.getLabelBoxHeight(i) / l, u = h[0] - p / 2, m = h[1] - d / 2;
+      r.attr("x", u).attr("y", m).attr("width", p).attr("height", d);
     });
   }
   resizeCircles(e) {
-    m.select(this.getMapId()).select("svg").selectAll("circle").attr("r", e.k > 1 ? 6 / e.k : 6);
+    g.select(this.getMapId()).select("svg").selectAll("circle").attr("r", e.k > 1 ? 6 / e.k : 6);
   }
   zoomed(e) {
     this.tooltip.style("visibility", "hidden");
-    const t = e.transform;
-    m.select(this.getMapId()).select("svg").select("g").attr("transform", t), this.resizeCircles(t), this.resizeLabels(t), this.resizePointLabels(t);
+    const s = e.transform;
+    g.select(this.getMapId()).select("svg").select("g").attr("transform", s), this.resizeCircles(s), this.resizeLabels(s), this.resizePointLabels(s);
   }
   zoomEnd(e) {
-    const { editing: t } = this.props, i = e.transform;
-    this.mapPosition = { k: i.k, x: i.x, y: i.y }, t && window.parent.postMessage(
+    const { editing: s } = this.props, i = e.transform;
+    this.mapPosition = { k: i.k, x: i.x, y: i.y }, s && window.parent.postMessage(
       { type: "map", value: JSON.stringify(this.mapPosition) },
       "*"
     );
   }
   classColor(e) {
-    let { zoomEnabled: t } = this.props;
-    return t || (t = !!["mobile", "tablet", "midTablet"].includes(
-      F()
-    )), t ? "active zoom-enabled" : "active";
+    let { zoomEnabled: s } = this.props;
+    return s || (s = !!["mobile", "tablet", "midTablet"].includes(
+      T()
+    )), s ? "active zoom-enabled" : "active";
   }
   generateBreaks(e) {
-    const { autoGenerateBreaks: t, numberOfBreaks: i, colorScheme: o } = this.props, s = [];
-    if (t && e && e.length > 0) {
-      const l = e.filter((a) => a.properties && a.properties.value != null).map((a) => a.properties.value.toFixed(2)), c = [];
-      l.forEach((a) => {
+    const { autoGenerateBreaks: s, numberOfBreaks: i, colorScheme: o } = this.props, t = [];
+    if (s && e && e.length > 0) {
+      const r = e.filter((a) => a.properties && a.properties.value != null).map((a) => a.properties.value.toFixed(2)), n = [];
+      r.forEach((a) => {
         if (a > 0) {
-          const h = a * 0.99, n = a * 1.01;
-          c.indexOf(h) === -1 && c.push(h), c.indexOf(n) === -1 && c.push(n);
+          const h = a * 0.99, p = a * 1.01;
+          n.indexOf(h) === -1 && n.push(h), n.indexOf(p) === -1 && n.push(p);
         }
       });
-      const r = pe[o];
-      if (c.length > 0) {
-        const a = new oe(c);
+      const l = he[o];
+      if (n.length > 0) {
+        const a = new ae(n);
         a.setPrecision(2);
-        const h = c.length > 1 ? c.length - 1 : c.length;
-        return a.getJenks(Math.min(i, h)), a.ranges.forEach((n, u) => {
-          const f = {};
-          f.min = parseFloat(n.substr(0, n.indexOf("-") - 1)) + (u > 0 ? 0.01 : 0), f.max = parseFloat(
-            n.substr(n.indexOf("-") + 2, n.length)
-          ), f.color = r[u], s.push(f);
-        }), s;
+        const h = n.length > 1 ? n.length - 1 : n.length;
+        return a.getJenks(Math.min(i, h)), a.ranges.forEach((p, d) => {
+          const u = {};
+          u.min = parseFloat(p.substr(0, p.indexOf("-") - 1)) + (d > 0 ? 0.01 : 0), u.max = parseFloat(
+            p.substr(p.indexOf("-") + 2, p.length)
+          ), u.color = l[d], t.push(u);
+        }), t;
       }
     }
-    return s;
+    return t;
   }
   getBreaks() {
-    const { legendBreaks: e, autoGenerateBreaks: t } = this.props;
-    if (t) {
+    const { legendBreaks: e, autoGenerateBreaks: s } = this.props;
+    if (s) {
       const i = this.getFeatures();
       return this.generateBreaks(i);
     } else {
       let i = e;
       return this.getSelectedMeasure() && (i = e.filter((o) => o.measure === this.getSelectedMeasure()).filter((o) => {
         if (o.filters && o.filters.length > 0 && this.props.appliedFilters && JSON.stringify(this.props.appliedFilters) !== "{}") {
-          const l = Object.keys(this.props.appliedFilters);
-          return o.filters.filter((r) => {
-            if (l.indexOf(r.field) != -1) {
-              const a = this.props.appliedFilters[r.field], h = r.values;
+          const r = Object.keys(this.props.appliedFilters);
+          return o.filters.filter((l) => {
+            if (r.indexOf(l.field) != -1) {
+              const a = this.props.appliedFilters[l.field], h = l.values;
               return a.join(",").indexOf(h) != -1;
             }
             return !1;
@@ -312,33 +364,33 @@ class de extends H.Component {
       })), i;
     }
   }
-  fillColor(e, t) {
+  fillColor(e, s) {
     const { mapNoDataColor: i, mainLayerId: o } = this.props;
-    let s;
+    let t;
     if (e.properties && e.properties.variables && this.state.selectedMeasure && e.properties.value != null) {
-      const c = ae + this.state.selectedMeasure;
-      if (s = e.properties.variables[c.trim()], s)
-        return s;
+      const n = le + this.state.selectedMeasure;
+      if (t = e.properties.variables[n.trim()], t)
+        return t;
     }
     if (e.properties.value != null && (o && e.properties.layerId === o || !o)) {
-      const c = t.find((r) => {
-        if (r.min != null && r.max != null)
-          return e.properties.value >= r.min && e.properties.value <= r.max;
-        if (r.min != null)
-          return e.properties.value >= r.min;
-        if (r.max != null)
-          return e.properties.value <= r.max;
+      const n = s.find((l) => {
+        if (l.min != null && l.max != null)
+          return e.properties.value >= l.min && e.properties.value <= l.max;
+        if (l.min != null)
+          return e.properties.value >= l.min;
+        if (l.max != null)
+          return e.properties.value <= l.max;
       });
-      return c && c.color ? c.color : i;
+      return n && n.color ? n.color : i;
     }
-    const l = this.props.enabledLayers.filter(
-      (c) => c.id === e.properties.layerId
+    const r = this.props.enabledLayers.filter(
+      (n) => n.id === e.properties.layerId
     )[0];
-    return l && l.bgColor && l.bgColor != "undefined" ? l.bgColor : i;
+    return r && r.bgColor && r.bgColor != "undefined" ? r.bgColor : i;
   }
   setValues() {
     const e = this.getFeatures();
-    m.select(this.getMapId()).select("svg").select("g").selectAll("path").data(e).join("path").attr("d", this.path);
+    g.select(this.getMapId()).select("svg").select("g").selectAll("path").data(e).join("path").attr("d", this.path);
   }
   getLabelPosition(e) {
     return e.properties.LABEL_LATITUDE && e.properties.LABEL_LONGITUDE ? this.projection([
@@ -346,158 +398,166 @@ class de extends H.Component {
       e.properties.LABEL_LATITUDE
     ]) : this.path.centroid(e);
   }
-  updateFeatures(e, t) {
-    const { mapLabelField: i, symbols: o, highlightedLocation: s } = this.props, l = [
-      ...e.filter((c) => s != c.properties[i]),
-      ...e.filter((c) => s == c.properties[i])
+  updateFeatures(e, s) {
+    const { mapLabelField: i, symbols: o, highlightedLocation: t } = this.props, r = [
+      ...e.filter((n) => t != n.properties[i]),
+      ...e.filter((n) => t == n.properties[i])
     ];
-    this.drawPolygons(l), this.drawLabels(l), this.drawPoints(l, t), o.length > 0 && this.addSymbols(o, l);
+    this.drawPolygons(r), this.drawLabels(r), this.drawPoints(r, s), o.length > 0 && this.addSymbols(o, r);
   }
   drawLabels(e) {
     const {
-      mapLabelField: t,
+      mapLabelField: s,
       mapLabelShowValue: i,
       intl: o,
-      valueFormat: s,
-      showNoDataLabel: l,
-      labelFontColor: c,
-      labelFontWeight: r,
+      valueFormat: t,
+      showNoDataLabel: r,
+      labelFontColor: n,
+      labelFontWeight: l,
       labelFontSize: a,
       showAdminUnitLabel: h,
-      mapType: n,
-      noDataText: u,
-      labelsExclusionList: f
-    } = this.props, g = m.select(this.getMapId()).select("svg").select("g");
-    if (g.selectAll(".map-labels-container").size() > 0) {
+      mapType: p,
+      noDataText: d,
+      labelsExclusionList: u
+    } = this.props, m = g.select(this.getMapId()).select("svg").select("g");
+    if (m.selectAll(".map-labels-container").size() > 0) {
       console.log("Labels already exist, skipping redraw...");
       return;
     }
-    g.selectAll(".map-labels").data(
-      e.filter((p) => f && f.length > 0 ? !f.includes(p.properties[t]) : !0)
-    ).enter().append("foreignObject").attr("class", "map-labels-container").attr("x", (p) => {
-      const d = this.getLabelPosition(p);
-      if (p.properties[t]) {
-        const v = this.getLabelBoxWidth(p);
-        return d[0] - v / 2;
+    m.selectAll(".map-labels").data(
+      e.filter((c) => u && u.length > 0 ? !u.includes(c.properties[s]) : !0)
+    ).enter().append("foreignObject").attr("class", "map-labels-container").attr("x", (c) => {
+      const f = this.getLabelPosition(c);
+      if (c.properties[s]) {
+        const y = this.getLabelBoxWidth(c);
+        return f[0] - y / 2;
       }
-      return d[0];
-    }).attr("y", (p) => this.getLabelPosition(p)[1] - 10).attr("width", (p) => this.getLabelBoxWidth(p)).attr("height", (p) => this.getLabelBoxHeight(p)).attr("font-size", (p, d) => `${a}px`).attr("overflow", "visible").attr("opacity", 1).style("display", (p) => h === S || h === j && p.properties.hasDataRow ? "block" : "none").attr("pointer-events", n == "POINTS_MAP" ? "none" : "all").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout).append("xhtml:div").style("font-size", (p) => `${a}px`).style("color", (p, d) => c).style("font-weight", (p) => r).style("background-color", (p) => p.properties.hasDataRow && i && (p.properties.value != null || p.properties.value == null && l) ? "#fff6e1" : "none").style("border-radius", (p) => "4px").style("line-height", "95%").style("text-align", "center").html((p, d) => this.createLabel(p));
+      return f[0];
+    }).attr("y", (c) => this.getLabelPosition(c)[1] - 10).attr("width", (c) => this.getLabelBoxWidth(c)).attr("height", (c) => this.getLabelBoxHeight(c)).attr("font-size", (c, f) => `${a}px`).attr("overflow", "visible").attr("opacity", 1).style("display", (c) => h === j || h === B && c.properties.hasDataRow || c.properties.displayLayerLabels ? "block" : "none").attr("pointer-events", p == "POINTS_MAP" ? "none" : "all").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout).append("xhtml:div").style("font-size", (c) => `${a}px`).style("color", (c, f) => n).style("font-weight", (c) => l).style("background-color", (c) => c.properties.hasDataRow && i && (c.properties.value != null || c.properties.value == null && r) ? "#fff6e1" : "none").style("border-radius", (c) => "4px").style("line-height", "95%").style("text-align", "center").html((c, f) => this.createLabel(c));
+  }
+  getTranslatedLocationName(e, s, i) {
+    if (e.properties.displayLayerLabels && e.properties.layerLocale) {
+      const o = e.properties.layerMappingField || s, t = e.properties[o];
+      return O(this.metadataTypes, t, e.properties.layerLocale);
+    }
+    return e.properties[s];
   }
   createLabel(e) {
     const {
-      mapLabelField: t,
+      mapLabelField: s,
       mapLabelShowValue: i,
       intl: o,
-      valueFormat: s,
-      showNoDataLabel: l,
-      showAdminUnitLabel: c,
-      noDataText: r
+      valueFormat: t,
+      showNoDataLabel: r,
+      showAdminUnitLabel: n,
+      noDataText: l
     } = this.props;
     let a = "";
-    if (c == S || c == j && e.properties.hasDataRow) {
-      a = e.properties[t];
-      const h = e.properties.abbrev;
-      if (a && a.length > le && h && (a = h), i)
+    if (n == j || n == B && e.properties.hasDataRow || e.properties.displayLayerLabels) {
+      const h = e.properties.displayLayerLabels && e.properties.layerMappingField ? e.properties.layerMappingField : s, p = e.properties[h], d = e.properties.layerLocale || (o == null ? void 0 : o.locale);
+      a = O(this.metadataTypes, p, d);
+      const u = e.properties.abbrev;
+      if (a && a.length > ne && u && (a = u), i)
         if (e.properties.value != null) {
-          const n = e.properties.variables || {};
+          const m = e.properties.variables || {};
           a += "<br><span class='map-label-value'>" + k(
-            s,
+            t,
             {
               value: e.properties.value,
               measure: this.getSelectedMeasure(),
-              ...n
+              ...m
             },
             o
           ) + "</span>";
         } else
-          l == !0 && e.properties.value == null && e.properties.hasDataRow && (a += "<br><span class='map-label-value'>" + r + "</span>");
+          r == !0 && e.properties.value == null && e.properties.hasDataRow && (a += "<br><span class='map-label-value'>" + l + "</span>");
     }
     return a;
   }
   drawPolygons(e) {
     const {
-      mapLabelField: t,
+      mapLabelField: s,
       mapBoundaryColor: i,
       mapFocusBoundaryColor: o,
-      highlightedLocation: s
-    } = this.props, l = this.getBreaks(), c = m.select(this.getMapId()).select("svg").select("g"), r = e.filter(
+      highlightedLocation: t
+    } = this.props, r = this.getBreaks(), n = g.select(this.getMapId()).select("svg").select("g"), l = e.filter(
       (a) => a.geometry && a.geometry && (a.geometry.type == "Polygon" || a.geometry.type == "MultiPolygon")
     );
-    r.length > 0 && c.selectAll("path").data(r).join("path").attr("d", this.path).attr("fill", (a) => this.fillColor(a, l)).attr("stroke-width", (a) => s == a.properties[t] ? 1.2 : 0.4).attr("stroke", (a) => s == a.properties[t] ? o : i).on("click", this.onPolygonClick);
+    l.length > 0 && n.selectAll("path").data(l).join("path").attr("d", this.path).attr("fill", (a) => this.fillColor(a, r)).attr("stroke-width", (a) => t == a.properties[s] ? 1.2 : 0.4).attr("stroke", (a) => t == a.properties[s] ? o : i).on("click", this.onPolygonClick);
   }
-  drawPoints(e, t) {
+  drawPoints(e, s) {
     const {
       intl: i,
       pointLabelColor: o,
-      pointLabelFormat: s,
-      transformedData: l,
-      defaultPointColor: c,
-      appliedFilters: r,
+      pointLabelFormat: t,
+      transformedData: r,
+      defaultPointColor: n,
+      appliedFilters: l,
       zoomOnFilterField: a,
       noDataText: h,
-      showShadingLayerLabels: n
-    } = this.props, u = m.select(this.getMapId()).select("svg").select("g");
-    let f = [];
-    if (l.pointsData) {
-      let p = this.state.selectedPolygon;
-      t && r && r[a] && (p = r[a]), f = l.pointsData.filter((d) => d.lat && d.lng && d.label == p).map((d) => ({
+      showShadingLayerLabels: p
+    } = this.props, d = g.select(this.getMapId()).select("svg").select("g");
+    let u = [];
+    if (r.pointsData) {
+      let c = this.state.selectedPolygon;
+      s && l && l[a] && (c = l[a]), u = r.pointsData.filter((f) => f.lat && f.lng && f.label == c).map((f) => ({
         properties: {
-          label: d.label,
-          lat: d.lat,
-          lng: d.lng,
-          value: d.value,
-          variables: d.variables
+          label: f.label,
+          lat: f.lat,
+          lng: f.lng,
+          value: f.value,
+          variables: f.variables
         }
-      })), u.selectAll(".circle").data(f).enter().append("circle").attr("id", (d, v) => "circle" + v).attr("cx", (d) => this.projection([
-        d.properties.lng,
-        d.properties.lat
-      ])[0]).attr("cy", (d) => this.projection([
-        d.properties.lng,
-        d.properties.lat
-      ])[1]).attr("r", (d, v) => 2).style("stroke-width", 0.5).style("fill", (d, v) => c).on("mouseover", (d, v) => this.onPointClick(d, v)).on("mouseout", this.mouseout);
+      })), d.selectAll(".circle").data(u).enter().append("circle").attr("id", (f, y) => "circle" + y).attr("cx", (f) => this.projection([
+        f.properties.lng,
+        f.properties.lat
+      ])[0]).attr("cy", (f) => this.projection([
+        f.properties.lng,
+        f.properties.lat
+      ])[1]).attr("r", (f, y) => 2).style("stroke-width", 0.5).style("fill", (f, y) => n).on("mouseover", (f, y) => this.onPointClick(f, y)).on("mouseout", this.mouseout);
     }
-    const g = this.getBreaks();
-    let L = [];
-    n == S ? L = e.filter(
-      (p) => p.geometry && p.geometry.type == "Point"
-    ) : n == j && (L = e.filter(
-      (p) => p.geometry && p.geometry.type == "Point" && p.properties.hasDataRow
-    )), L.length > 0 && u.selectAll(".point-labels").data(L).enter().append("foreignObject").attr("id", (p, d) => "point-label" + d).attr("class", "point-labels-container").attr("x", (p) => {
-      const d = this.getLabelBoxWidth(p) + 20;
+    const m = this.getBreaks();
+    let v = [];
+    p == j ? v = e.filter(
+      (c) => c.geometry && c.geometry.type == "Point"
+    ) : p == B && (v = e.filter(
+      (c) => c.geometry && c.geometry.type == "Point" && c.properties.hasDataRow
+    )), v.length > 0 && d.selectAll(".point-labels").data(v).enter().append("foreignObject").attr("id", (c, f) => "point-label" + f).attr("class", "point-labels-container").attr("x", (c) => {
+      const f = this.getLabelBoxWidth(c) + 20;
       return this.projection([
-        p.geometry.coordinates[1],
-        p.geometry.coordinates[0]
-      ])[0] - d / 2;
-    }).attr("y", (p) => this.projection([
-      p.geometry.coordinates[1],
-      p.geometry.coordinates[0]
-    ])[1] - this.getLabelBoxHeight(p) / 2).attr("width", (p) => this.getLabelBoxWidth(p) + 20).attr("height", (p) => "1px").attr("overflow", "visible").attr("font-size", "12px").style("opacity", 1).append("xhtml:div").style("color", (p, d) => o).style("font-weight", (p) => "bold").style("background-color", (p) => this.fillColor(p, g)).style("padding", (p) => "5px 3px 5px 3px").style("border-radius", (p) => "4px").style("line-height", "100%").style("text-align", "center").html((p, d) => k(
-      s,
+        c.geometry.coordinates[1],
+        c.geometry.coordinates[0]
+      ])[0] - f / 2;
+    }).attr("y", (c) => this.projection([
+      c.geometry.coordinates[1],
+      c.geometry.coordinates[0]
+    ])[1] - this.getLabelBoxHeight(c) / 2).attr("width", (c) => this.getLabelBoxWidth(c) + 20).attr("height", (c) => "1px").attr("overflow", "visible").attr("font-size", "12px").style("opacity", 1).append("xhtml:div").style("color", (c, f) => o).style("font-weight", (c) => "bold").style("background-color", (c) => this.fillColor(c, m)).style("padding", (c) => "5px 3px 5px 3px").style("border-radius", (c) => "4px").style("line-height", "100%").style("text-align", "center").html((c, f) => k(
+      t,
       {
-        value: p.properties.value,
-        locationName: p.properties[this.props.mapLabelField]
+        value: c.properties.value,
+        locationName: c.properties[this.props.mapLabelField]
       },
       i
-    )).on("mouseover", (p, d, v) => {
-      m.select(this.getMapId()).select("svg").select("g").select("#point-label" + v).raise(), this.showTooltip(p, d);
+    )).on("mouseover", (c, f, y) => {
+      g.select(this.getMapId()).select("svg").select("g").select("#point-label" + y).raise(), this.showTooltip(c, f);
     }).on("mousemove", this.mousemove).on("mouseout", this.mouseout);
   }
-  addSymbols(e, t) {
-    const { mappingField: i } = this.props, o = m.select(this.getMapId()).select("svg").select("g");
-    e.forEach((s) => {
-      if (s.field && s.image && s.values) {
-        const l = t.filter((r) => {
-          const a = U == s.field ? i : "value", h = (r.properties[a] || (r.properties.variables ? r.properties.variables[a] : "")) + "", u = (s.values + "").split(",");
-          return r.properties.LATITUDE && r.properties.LONGITUDE && u.filter(
-            (f) => f.trim().toLowerCase() == h.trim().toLowerCase()
+  addSymbols(e, s) {
+    const { mappingField: i } = this.props, o = g.select(this.getMapId()).select("svg").select("g");
+    e.forEach((t) => {
+      if (t.field && t.image && t.values) {
+        const r = s.filter((l) => {
+          const a = G == t.field ? i : "value", h = (l.properties[a] || (l.properties.variables ? l.properties.variables[a] : "")) + "", d = (t.values + "").split(",");
+          return l.properties.LATITUDE && l.properties.LONGITUDE && d.filter(
+            (u) => u.trim().toLowerCase() == h.trim().toLowerCase()
           ).length > 0;
-        }), c = t.filter((r) => {
-          const a = U == s.field ? i : "value", h = (r.properties[a] || (r.properties.variables ? r.properties.variables[a] : "")) + "", u = (s.values + "").split(",");
-          return !r.properties.LATITUDE && !r.properties.LONGITUDE && u.filter(
-            (f) => f.trim().toLowerCase() == h.trim().toLowerCase()
+        }), n = s.filter((l) => {
+          const a = G == t.field ? i : "value", h = (l.properties[a] || (l.properties.variables ? l.properties.variables[a] : "")) + "", d = (t.values + "").split(",");
+          return !l.properties.LATITUDE && !l.properties.LONGITUDE && d.filter(
+            (u) => u.trim().toLowerCase() == h.trim().toLowerCase()
           ).length > 0;
         });
-        o.selectAll("image").data(l).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + s.image).attr("transform", (r) => "translate(" + this.projection([r.properties.LONGITUDE, r.properties.LATITUDE]) + ")").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout), o.selectAll("image").data(c).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + s.image).attr("x", (r) => this.path.centroid(r)[0] - 20).attr("y", (r) => this.path.centroid(r)[1]).on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout);
+        o.selectAll("image").data(r).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + t.image).attr("transform", (l) => "translate(" + this.projection([l.properties.LONGITUDE, l.properties.LATITUDE]) + ")").on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout), o.selectAll("image").data(n).enter().append("image").attr("width", 40).attr("height", 40).attr("class", "map-symbol").attr("xlink:href", "/" + t.image).attr("x", (l) => this.path.centroid(l)[0] - 20).attr("y", (l) => this.path.centroid(l)[1]).on("mouseover", this.showTooltip).on("mousemove", this.mousemove).on("mouseout", this.mouseout);
       }
     });
   }
@@ -506,187 +566,196 @@ class de extends H.Component {
     return e ? 30 : 25;
   }
   getLabelBoxWidth(e) {
-    const { mapLabelField: t } = this.props, i = 80;
-    if (e.properties[t]) {
-      const o = e.properties[t].length;
+    const { mapLabelField: s } = this.props, i = 80;
+    if (e.properties[s]) {
+      const o = e.properties[s].length;
       return o < 10 ? i : o * 8;
     }
     return 0;
   }
-  featuresZoom(e, t, i) {
-    const o = m.select(this.getMapId()).select("svg"), s = this.boundingExtent(e), [[l, c], [r, a]] = s, h = this.getWidth(), n = this.getHeight(), u = Math.min(
+  featuresZoom(e, s, i) {
+    const o = g.select(this.getMapId()).select("svg"), t = this.boundingExtent(e), [[r, n], [l, a]] = t, h = this.getWidth(), p = this.getHeight(), d = Math.min(
       8,
-      0.9 / Math.max((r - l) / h, (a - c) / n)
-    ), f = [h / 2 - (l + r) / 2, n / 2 - (c + a) / 2];
-    t ? o.call(
+      0.9 / Math.max((l - r) / h, (a - n) / p)
+    ), u = [h / 2 - (r + l) / 2, p / 2 - (n + a) / 2];
+    s ? o.call(
       this.zoom.transform,
-      m.zoomIdentity.translate(f[0], f[1]).scale(u)
+      g.zoomIdentity.translate(u[0], u[1]).scale(d)
     ) : o.transition().duration(450).call(
       this.zoom.transform,
-      m.zoomIdentity.translate(f[0], f[1]).scale(u)
+      g.zoomIdentity.translate(u[0], u[1]).scale(d)
     ).on("end", i);
   }
   fullView() {
-    const { mapPosition: e, editing: t } = this.props, i = m.select(this.getMapId()).select("svg");
+    const { mapPosition: e, editing: s } = this.props, i = g.select(this.getMapId()).select("svg");
     i.select("g").selectAll(".active").attr("class", function() {
-      return m.select(this).attr("class").replace(/background/gi, "");
+      return g.select(this).attr("class").replace(/background/gi, "");
     });
-    let s = m.zoomIdentity;
-    e && !t ? s = s.translate(e.x, e.y).scale(e.k) : s = s.translate(0, 0).scale(1), i.transition().duration(300).call(this.zoom.transform, s);
+    let t = g.zoomIdentity;
+    e && !s ? t = t.translate(e.x, e.y).scale(e.k) : t = t.translate(0, 0).scale(1), i.transition().duration(300).call(this.zoom.transform, t);
   }
-  showTooltip(e, t) {
+  showTooltip(e, s) {
     let {
       showTooltip: i,
       zoomEnabled: o,
-      tooltipTheme: s,
-      customTooltips: l,
-      tooltipFontSize: c,
-      tooltipFormat: r,
+      tooltipTheme: t,
+      customTooltips: r,
+      tooltipFontSize: n,
+      tooltipFormat: l,
       intl: a,
       mappingField: h,
-      showNoDataTooltip: n,
-      fields: u,
-      mapType: f,
-      noDataText: g
+      showNoDataTooltip: p,
+      fields: d,
+      mapType: u,
+      noDataText: m
     } = this.props;
     if (o = !!["mobile", "tablet", "midTablet"].includes(
-      F()
-    ), i && t.properties.value != null || i && n) {
-      m.select(this.getMapId()).select("svg").select("g").selectAll(".active").attr("class", (z) => z.properties[h] === t.properties[h] ? "focus" + (o ? " zoom-enabled" : "") : "active" + (o ? " zoom-enabled" : ""));
-      const d = r || `{locationName} %({value},2) 
- {label}: %({value},2)`, v = t.properties.variables || {}, M = {
-        ...t.properties,
-        value: t.properties.value,
+      T()
+    ), i && s.properties.value != null || i && p) {
+      g.select(this.getMapId()).select("svg").select("g").selectAll(".active").attr("class", (A) => A.properties[h] === s.properties[h] ? "focus" + (o ? " zoom-enabled" : "") : "active" + (o ? " zoom-enabled" : ""));
+      const f = l || `{locationName} %({value},2) 
+ {label}: %({value},2)`, y = s.properties.variables || {}, I = {
+        ...s.properties,
+        value: s.properties.value,
         measure: this.getSelectedMeasure(),
-        measureLabel: t.properties.measureLabel,
-        locationName: t.properties[h],
-        ...v
+        measureLabel: s.properties.measureLabel,
+        locationName: this.getTranslatedLocationName(s, h, a),
+        label: this.getTranslatedLocationName(s, h, a),
+        ...y
       };
-      this.tooltip.attr("class", s).style("position", "absolute").style("visibility", "hidden").style("visibility", "visible").html((z) => {
-        let y = `<div style='font-size:${c}px;' class='tooltip-content' >`;
-        if (t.properties.value != null) {
-          const x = d.split(`
-`), A = x[0], B = x.length > 1 ? x[1] : null;
-          let D = 1, P;
-          u.length > 1 && f != "POINTS_MAP" ? (D = x.length > 2 ? 2 : 1, P = x[D]) : P = null, A && (y += k(A, M, a)), B && (y.endsWith("<hr>") || (y += "<hr>"), y += k(B, M, a)), P && t.properties.children && t.properties.children.forEach((C, W) => {
-            const Z = {
+      this.tooltip.attr("class", t).style("position", "absolute").style("visibility", "hidden").style("visibility", "visible").html((A) => {
+        let L = `<div style='font-size:${n}px;' class='tooltip-content' >`;
+        if (s.properties.value != null) {
+          const x = f.split(`
+`), D = x[0], W = x.length > 1 ? x[1] : null;
+          let z = 1, P;
+          d.length > 1 && u != "POINTS_MAP" ? (z = x.length > 2 ? 2 : 1, P = x[z]) : P = null, D && (L += k(D, I, a)), W && (L.endsWith("<hr>") || (L += "<hr>"), L += k(W, I, a)), P && s.properties.children && s.properties.children.forEach((C, _) => {
+            const J = {
               value: C.value,
               label: C.label,
               measure: this.getSelectedMeasure(),
-              measureLabel: t.properties.measureLabel,
-              ...v
+              measureLabel: s.properties.measureLabel,
+              ...y
             };
-            y.endsWith("<hr>") || (y += "<hr>"), y += k(
+            L.endsWith("<hr>") || (L += "<hr>"), L += k(
               P,
-              Z,
+              J,
               a
             );
-          }), x.length > D + 1 && (y.endsWith("<hr>") || (y += "<hr>"), x.forEach((C, W) => {
-            W > D && (y.endsWith("<hr>") || (y += "<hr>"), y += k(C, M, a));
-          })), l.filter(
-            (C) => C.location === t.properties[h]
+          }), x.length > z + 1 && (L.endsWith("<hr>") || (L += "<hr>"), x.forEach((C, _) => {
+            _ > z && (L.endsWith("<hr>") || (L += "<hr>"), L += k(C, I, a));
+          })), r.filter(
+            (C) => C.location === s.properties[h]
           ).forEach((C) => {
-            y.endsWith("<hr>") || (y += "<hr>"), y += C.tooltip;
+            L.endsWith("<hr>") || (L += "<hr>"), L += C.tooltip;
           });
         } else {
-          const x = r || `{locationName} %({value},2) 
- {label}: %({value},2)`, A = {
+          const x = l || `{locationName} %({value},2) 
+ {label}: %({value},2)`, D = {
             value: null,
             measure: this.getSelectedMeasure(),
-            measureLabel: t.properties.measureLabel,
-            locationName: t.properties[h],
-            ...v
+            measureLabel: s.properties.measureLabel,
+            locationName: this.getTranslatedLocationName(s, h, a),
+            ...y
           };
-          y += k(x, A, a), y += "</div>";
+          L += k(x, D, a), L += "</div>";
         }
-        return y;
+        return L;
       });
     }
   }
-  mousemove(e, t) {
+  mousemove(e, s) {
     this.tooltip.style("top", e.pageY + "px").style("left", e.pageX + 5 + "px");
   }
-  mouseout(e, t) {
+  mouseout(e, s) {
     const { showTooltip: i } = this.props;
-    i && (m.select(this.getMapId()).select("svg").select("g").selectAll(".focus").attr("class", "active"), this.tooltip.style("visibility", "hidden"));
+    i && (g.select(this.getMapId()).select("svg").select("g").selectAll(".focus").attr("class", "active"), this.tooltip.style("visibility", "hidden"));
   }
-  onClick(e, t) {
-    t.properties && this.tooltip.style("visibility", "visible").style("top", e.pageY + "px").style("left", e.pageX + 5 + "px"), e.stopPropagation(), e.preventDefault();
+  onClick(e, s) {
+    s.properties && this.tooltip.style("visibility", "visible").style("top", e.pageY + "px").style("left", e.pageX + 5 + "px"), e.stopPropagation(), e.preventDefault();
   }
-  onPointClick(e, t, i) {
-    this.showTooltip(e, t), this.tooltip.style("visibility", "visible").style("top", e.pageY + "px").style("left", e.pageX + 5 + "px");
-    const o = m.select(this.getMapId()).select("svg").select("g");
+  onPointClick(e, s, i) {
+    this.showTooltip(e, s), this.tooltip.style("visibility", "visible").style("top", e.pageY + "px").style("left", e.pageX + 5 + "px");
+    const o = g.select(this.getMapId()).select("svg").select("g");
     o.selectAll("circle").style("fill", this.props.defaultPointColor).style("stroke", "none"), o.select("#circle" + i).raise().style("fill", "#fff");
   }
-  onPolygonClick(e, t) {
+  onPolygonClick(e, s) {
     const { mappingField: i } = this.props;
-    this.state.selectedPolygon !== t.properties[i] && t.properties.value !== null && this.setState({ selectedPolygon: t.properties[i] });
+    this.state.selectedPolygon !== s.properties[i] && s.properties.value !== null && this.setState({ selectedPolygon: s.properties[i] });
   }
   onZoomIn(e) {
-    m.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy, 1.5);
+    g.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy, 1.5);
   }
   onZoomOut() {
-    m.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy, 0.6667);
+    g.select(this.getMapId()).select("svg").transition().call(this.zoom.scaleBy, 0.6667);
   }
   getSelectedMeasure() {
     let e = this.state.selectedMeasure;
     return !e && this.props.transformedData && this.props.transformedData.measures && this.props.transformedData.measures.length > 1 && (e = this.props.transformedData.measures[0]), e;
   }
   getCollectionField(e) {
-    const { topoJSONField: t } = this.props;
+    const { topoJSONField: s } = this.props;
     if (e && e.objects) {
       const i = Object.keys(e.objects);
       for (const o in i) {
-        const s = i[o];
-        if (e.objects[s].type == "GeometryCollection")
-          return s;
+        const t = i[o];
+        if (e.objects[t].type == "GeometryCollection")
+          return t;
       }
     }
-    return t;
+    return s;
   }
   extractFeatures(e) {
-    const t = this.getCollectionField(e);
-    return e && e.objects && e.objects[t] ? se.feature(e, e.objects[t]).features : e && e.features ? e.features : [];
+    const s = this.getCollectionField(e);
+    return e && e.objects && e.objects[s] ? ie.feature(e, e.objects[s]).features : e && e.features ? e.features : [];
   }
   getLayers() {
-    const { layers: e } = this.state, { enabledLayers: t } = this.props;
+    const { layers: e } = this.state, { enabledLayers: s } = this.props;
     return e && e.length > 0 ? e.map((o) => {
-      const s = t.find((l) => l.id == o.id);
-      return o.index = s ? s.index : 0, o;
-    }).sort((o, s) => parseInt(o.index) < parseInt(s.index) ? 1 : parseInt(o.index) > parseInt(s.index) ? -1 : 0) : [];
+      const t = s.find((r) => r.id == o.id);
+      return o.index = t ? t.index : 0, o;
+    }).sort((o, t) => parseInt(o.index) < parseInt(t.index) ? 1 : parseInt(o.index) > parseInt(t.index) ? -1 : 0) : [];
   }
   getFeatures() {
-    const e = this.getMainLayer(), t = this.getLayers();
+    const e = this.getMainLayer(), s = this.getLayers();
     if (e) {
-      const { transformedData: i, mappingField: o, app: s, mainLayerId: l, enabledLayers: c } = this.props;
-      let r = [];
+      const { transformedData: i, mappingField: o, app: t, mainLayerId: r, enabledLayers: n } = this.props;
+      let l = [];
       try {
-        r = this.extractFeatures(e), r.map((n) => (n.properties.layerId = l, n)), t && t.forEach((n) => {
-          if (n.id != l) {
-            let u = this.extractFeatures(n.data);
-            u = u.map((f) => (f.properties.layerId = n.id, f)), r = [...u, ...r];
+        l = this.extractFeatures(e), l.map((p) => {
+          p.properties.layerId = r;
+          const d = s.find((u) => String(u.id) === String(r));
+          return d && (p.properties.layerMappingField = d.layerMappingField, p.properties.layerDatasource = d.layerDatasource, p.properties.layerApiField = d.layerApiField, p.properties.layerLocale = d.layerLocale, p.properties.displayLayerLabels = d.displayLayerLabels), n.forEach((u) => {
+            String(u.id) == r && Object.keys(u || {}).forEach((m) => {
+              p.properties[m] = u[m];
+            });
+          }), p;
+        }), s && s.forEach((p) => {
+          if (p.id != r) {
+            let d = this.extractFeatures(p.data);
+            d = d.map((u) => (u.properties.layerId = p.id, u.properties.layerMappingField = p.layerMappingField, u.properties.layerDatasource = p.layerDatasource, u.properties.layerApiField = p.layerApiField, u.properties.layerLocale = p.layerLocale, u.properties.displayLayerLabels = p.displayLayerLabels, u)), l = [...d, ...l];
           }
         });
-      } catch (n) {
-        console.log("error updating features .." + n);
+      } catch (p) {
+        console.log("error updating features .." + p);
       }
-      const a = r.filter((n) => n.properties != null);
+      const a = l.filter((p) => p.properties != null);
       let h = i.locationsData;
       return i.measures && i.measures.length > 1 && (h = i.locationsData.filter(
-        (n) => n.measure === this.getSelectedMeasure()
-      )), a.map((n) => {
+        (p) => p.measure === this.getSelectedMeasure()
+      )), a.map((p) => {
         if (h) {
-          const u = h.find((f) => {
-            const g = f.label ? ("" + f.label).toLowerCase() : "", L = n.properties[o] ? n.properties[o].toLowerCase() : "";
-            return g === L;
+          const d = h.find((u) => {
+            const m = u.label ? ("" + u.label).toLowerCase() : "", v = p.properties[o] ? p.properties[o].toLowerCase() : "";
+            return m === v;
           });
-          if (u) {
-            let f = u.measure;
-            i.measureLabelMap && u.measure && i.measureLabelMap[u.measure] && (f = i.measureLabelMap[u.measure]), n.properties.value = u.value, n.properties.measure = u.measure, n.properties.measureLabel = f, n.properties.children = u.children, n.properties.variables = u.variables, n.properties.hasDataRow = !0, Object.keys(u).forEach((g) => {
-              n.properties[g] = u[g];
+          if (d) {
+            let u = d.measure;
+            i.measureLabelMap && d.measure && i.measureLabelMap[d.measure] && (u = i.measureLabelMap[d.measure]), p.properties.value = d.value, p.properties.measure = d.measure, p.properties.measureLabel = u, p.properties.children = d.children, p.properties.variables = d.variables, p.properties.hasDataRow = !0, Object.keys(d).forEach((m) => {
+              p.properties[m] = d[m];
             });
           } else
-            n.properties.value = null, n.properties.measure = null, n.properties.children = null, n.properties.measureLabel = null, n.properties.hasDataRow = !1;
+            p.properties.value = null, p.properties.measure = null, p.properties.children = null, p.properties.measureLabel = null, p.properties.hasDataRow = !1;
         }
       }), a;
     }
@@ -696,75 +765,75 @@ class de extends H.Component {
     const { unique: e } = this.props;
     return ".map.wrapper." + e;
   }
-  filterUpdated(e, t) {
-    const { zoomOnFilterField: i } = this.props, o = e && e.appliedFilters || {}, s = this.props.appliedFilters || {};
-    let l = !1;
-    return o[i] != s[i] && (l = !0), l;
+  filterUpdated(e, s) {
+    const { zoomOnFilterField: i } = this.props, o = e && e.appliedFilters || {}, t = this.props.appliedFilters || {};
+    let r = !1;
+    return o[i] != t[i] && (r = !0), r;
   }
-  getCenter(e, t) {
-    const { zoomOnFilter: i, zoomOnFilterField: o, mappingField: s, appliedFilters: l } = this.props;
-    let c = null;
+  getCenter(e, s) {
+    const { zoomOnFilter: i, zoomOnFilterField: o, mappingField: t, appliedFilters: r } = this.props;
+    let n = null;
     if (i && o) {
-      let r = this.state.selectedPolygon;
-      t && l && l[o] && (r = l[o]);
+      let l = this.state.selectedPolygon;
+      s && r && r[o] && (l = r[o]);
       const a = e.filter(
-        (h) => h.properties != null && h.properties[s] == r
+        (h) => h.properties != null && h.properties[t] == l
       )[0];
-      a && a.properties != null && a.properties.value && (c = a);
+      a && a.properties != null && a.properties.value && (n = a);
     }
-    return c;
+    return n;
   }
   area(e) {
-    let t = 0;
+    let s = 0;
     const i = e.coordinates.length > 1 ? e.coordinates[0][0] : e.coordinates[0];
     for (let o = 0; o < i.length - 1; o++)
-      t += i[o][0] * i[o + 1][1] - i[o + 1][0] * i[o][1];
-    return 0.5 * t;
+      s += i[o][0] * i[o + 1][1] - i[o + 1][0] * i[o][1];
+    return 0.5 * s;
   }
   centroid(e) {
-    const t = [0, 0], i = e.coordinates.length > 1 ? e.coordinates[0][0] : e.coordinates[0];
-    for (let s = 0; s < i.length - 1; s++)
-      t[0] += (i[s][0] + i[s + 1][0]) * (i[s][0] * i[s + 1][1] - i[s + 1][0] * i[s][1]), t[1] += (i[s][1] + i[s + 1][1]) * (i[s][0] * i[s + 1][1] - i[s + 1][0] * i[s][1]);
+    const s = [0, 0], i = e.coordinates.length > 1 ? e.coordinates[0][0] : e.coordinates[0];
+    for (let t = 0; t < i.length - 1; t++)
+      s[0] += (i[t][0] + i[t + 1][0]) * (i[t][0] * i[t + 1][1] - i[t + 1][0] * i[t][1]), s[1] += (i[t][1] + i[t + 1][1]) * (i[t][0] * i[t + 1][1] - i[t + 1][0] * i[t][1]);
     const o = this.area(e);
-    return t[0] /= o * 6, t[1] /= o * 6, t;
-  }
-  d3Map(e, t) {
-    let { zoomEnabled: i, mapContainerBgColor: o, mapPosition: s, editing: l, mapType: c } = this.props;
-    i || (i = !!["mobile", "tablet"].includes(F()));
-    const r = this.getBreaks(), a = m.select(this.getMapId());
-    let h = a.select("svg"), n = this.getWidth();
-    n === 0 ? n = window.innerWidth + V[F()] : n += V[F()];
-    const u = this.getHeight() - 100;
-    if (h.empty() ? h = a.append("svg") : h.selectAll("*").remove(), h.attr("style", `background-color:${o};`).attr("viewBox", `0 0 ${n} ${u}`).attr("preserveAspectRatio", "xMidYMid meet"), h.append("g").selectAll("path").data(e).enter().append("path").attr("fill", (g) => this.fillColor(g, r)).attr("d", m.geoPath().projection(this.projection)).attr("class", (g) => this.classColor(g)).on("mouseover", c !== "POINTS_MAP" ? this.showTooltip : null).on("mousemove", c !== "POINTS_MAP" ? this.mousemove : null).on("mouseout", c !== "POINTS_MAP" ? this.mouseout : null), this.mapPosition && h.transition().duration(300).call(
+    return s[0] /= o * 6, s[1] /= o * 6, s;
+  }
+  d3Map(e, s) {
+    let { zoomEnabled: i, mapContainerBgColor: o, mapPosition: t, editing: r, mapType: n } = this.props;
+    i || (i = !!["mobile", "tablet"].includes(T()));
+    const l = this.getBreaks(), a = g.select(this.getMapId());
+    let h = a.select("svg"), p = this.getWidth();
+    p === 0 ? p = window.innerWidth + Z[T()] : p += Z[T()];
+    const d = this.getHeight() - 100;
+    if (h.empty() ? h = a.append("svg") : h.selectAll("*").remove(), h.attr("style", `background-color:${o};`).attr("viewBox", `0 0 ${p} ${d}`).attr("preserveAspectRatio", "xMidYMid meet"), h.append("g").selectAll("path").data(e).enter().append("path").attr("fill", (m) => this.fillColor(m, l)).attr("d", g.geoPath().projection(this.projection)).attr("class", (m) => this.classColor(m)).on("mouseover", n !== "POINTS_MAP" ? this.showTooltip : null).on("mousemove", n !== "POINTS_MAP" ? this.mousemove : null).on("mouseout", n !== "POINTS_MAP" ? this.mouseout : null), this.mapPosition && h.transition().duration(300).call(
       this.zoom.transform,
-      m.zoomIdentity.translate(this.mapPosition.x, this.mapPosition.y).scale(this.mapPosition.k)
-    ), !this.mapPosition && s && s.x && s.y && s.k && (h.transition().duration(300).call(
+      g.zoomIdentity.translate(this.mapPosition.x, this.mapPosition.y).scale(this.mapPosition.k)
+    ), !this.mapPosition && t && t.x && t.y && t.k && (h.transition().duration(300).call(
       this.zoom.transform,
-      m.zoomIdentity.translate(s.x, s.y).scale(s.k)
-    ), c === "POINTS_MAP")) {
-      const L = {
+      g.zoomIdentity.translate(t.x, t.y).scale(t.k)
+    ), n === "POINTS_MAP")) {
+      const v = {
         mobile: 100,
         tablet: 0,
         midTablet: 0,
         desktop: 0,
         laptop: 0,
         wide: 0
-      }[F()];
+      }[T()];
       h.transition().duration(300).call(
         this.zoom.transform,
-        m.zoomIdentity.translate(s.x + L, s.y).scale(s.k)
+        g.zoomIdentity.translate(t.x + v, t.y).scale(t.k)
       );
     }
-    i || l ? h.call(this.zoom) : h.on("dblclick.zoom", null);
-    const f = this.getCenter(e, t);
-    if (f) {
-      const g = this.path.bounds(f), L = [
-        (g[0][0] + g[1][0]) / 2,
-        (g[0][1] + g[1][1]) / 2
+    i || r ? h.call(this.zoom) : h.on("dblclick.zoom", null);
+    const u = this.getCenter(e, s);
+    if (u) {
+      const m = this.path.bounds(u), v = [
+        (m[0][0] + m[1][0]) / 2,
+        (m[0][1] + m[1][1]) / 2
       ];
       h.transition().duration(750).call(
         this.zoom.transform,
-        m.zoomIdentity.translate(n / 2, u / 2).scale(12).translate(-L[0], -L[1])
+        g.zoomIdentity.translate(p / 2, d / 2).scale(12).translate(-v[0], -v[1])
       );
     }
   }
@@ -776,52 +845,65 @@ class de extends H.Component {
     this.state.selectedMeasure != e && this.setState({ selectedMeasure: e });
   }
   getFilters() {
-    const { appliedFilters: e } = this.props, t = {};
+    const { appliedFilters: e } = this.props, s = {};
     return e && Object.keys(e).forEach((o) => {
-      const s = e[o];
-      s && (t[o] = Array.isArray(s) ? s.join(" ,") : s);
-    }), t;
+      const t = e[o];
+      t && (s[o] = Array.isArray(t) ? t.join(" ,") : t);
+    }), s;
   }
   getHighlightedLocationData() {
-    const { highlightedLocation: e, transformedData: t } = this.props;
-    let i = t.locationsData;
-    return t.measures && t.measures.length > 1 && (i = t.locationsData.filter(
-      (s) => s.measure === this.getSelectedMeasure()
+    const { highlightedLocation: e, transformedData: s } = this.props;
+    let i = s.locationsData;
+    return s.measures && s.measures.length > 1 && (i = s.locationsData.filter(
+      (t) => t.measure === this.getSelectedMeasure()
     )), i.find(
-      (s) => s.label === e
+      (t) => t.label === e
+    );
+  }
+  getTranslatedHighlightedLocationName() {
+    const { highlightedLocation: e, mapLabelField: s, intl: i } = this.props;
+    if (!e)
+      return null;
+    const t = this.getFeatures().find(
+      (r) => r.properties[s] === e
     );
+    if (t && t.properties.displayLayerLabels && t.properties.layerLocale) {
+      const r = t.properties.layerMappingField || s, n = t.properties[r];
+      return O(this.metadataTypes, n, t.properties.layerLocale);
+    }
+    return e;
   }
   getHighlightedLocationColor(e) {
-    const t = this.getBreaks(), { mapNoDataColor: i } = this.props, o = e ? e.value : null;
+    const s = this.getBreaks(), { mapNoDataColor: i } = this.props, o = e ? e.value : null;
     if (o != null) {
-      const s = t.find((l) => {
-        if (l.min != null && l.max != null)
-          return o >= l.min && o <= l.max;
-        if (l.min != null)
-          return o >= l.min;
-        if (l.max != null)
-          return o <= l.max;
+      const t = s.find((r) => {
+        if (r.min != null && r.max != null)
+          return o >= r.min && o <= r.max;
+        if (r.min != null)
+          return o >= r.min;
+        if (r.max != null)
+          return o <= r.max;
       });
-      return s && s.color ? s.color : i;
+      return t && t.color ? t.color : i;
     }
     return i;
   }
   renderLoader() {
-    return /* @__PURE__ */ b(R, { className: "loading", children: /* @__PURE__ */ b(
-      K,
+    return /* @__PURE__ */ b(U, { className: "loading", children: /* @__PURE__ */ b(
+      Q,
       {
         basic: !0,
         padded: !0,
         textAlign: "center",
         style: { margin: "30px" },
-        children: /* @__PURE__ */ b(Q, { active: !0, inverted: !0, children: /* @__PURE__ */ b(ee, { size: "medium" }) })
+        children: /* @__PURE__ */ b(ee, { active: !0, inverted: !0, children: /* @__PURE__ */ b(te, { size: "medium" }) })
       }
     ) });
   }
   noMapSelected() {
-    return /* @__PURE__ */ w(N, { icon: !0, warning: !0, children: [
+    return /* @__PURE__ */ M(N, { icon: !0, warning: !0, children: [
       /* @__PURE__ */ b(E, { name: "map outline" }),
-      /* @__PURE__ */ w(N.Content, { children: [
+      /* @__PURE__ */ M(N.Content, { children: [
         /* @__PURE__ */ b(N.Header, { children: "No map selected" }),
         "Pick one from the list in the ",
         /* @__PURE__ */ b("strong", { children: "Map Layers" }),
@@ -832,53 +914,53 @@ class de extends H.Component {
   render() {
     let {
       app: e,
-      legendTitle: t,
+      legendTitle: s,
       nationalAverageLabel: i,
       intl: o,
-      zoomEnabled: s,
-      transformedData: l,
-      measureSelectorLabel: c,
-      valueFormat: r,
+      zoomEnabled: t,
+      transformedData: r,
+      measureSelectorLabel: n,
+      valueFormat: l,
       showOverallValue: a,
       unique: h,
-      highlightedLocation: n,
-      labelFontColor: u,
-      legendFontSize: f,
-      editing: g,
-      highlightedLocLabelFormat: L,
-      noDataText: p
+      highlightedLocation: p,
+      labelFontColor: d,
+      legendFontSize: u,
+      editing: m,
+      highlightedLocLabelFormat: v,
+      noDataText: c
     } = this.props;
-    s || (s = !!["mobile", "tablet", "midTablet"].includes(
-      F()
+    t || (t = !!["mobile", "tablet", "midTablet"].includes(
+      T()
     ));
-    const d = this.getAvg(), v = this.getFilters(), M = this.getHighlightedLocationData(), z = {
-      backgroundColor: this.getHighlightedLocationColor(M),
-      color: u,
-      fontSize: f + "px"
+    const f = this.getAvg(), y = this.getFilters(), I = this.getHighlightedLocationData(), A = {
+      backgroundColor: this.getHighlightedLocationColor(I),
+      color: d,
+      fontSize: u + "px"
     };
-    g && (z.marginTop = "25px");
-    const y = () => /* @__PURE__ */ w(R, { fluid: !0, className: "footnote ", children: [
-      /* @__PURE__ */ w(O, { columns: 2, children: [
-        e !== "csv" && a && /* @__PURE__ */ b(O.Column, { textAlign: "left", width: 4, children: /* @__PURE__ */ w("div", { className: "national-average-div", children: [
+    m && (A.marginTop = "25px");
+    const L = () => /* @__PURE__ */ M(U, { fluid: !0, className: "footnote ", children: [
+      /* @__PURE__ */ M(S, { columns: 2, children: [
+        e !== "csv" && a && /* @__PURE__ */ b(S.Column, { textAlign: "left", width: 4, children: /* @__PURE__ */ M("div", { className: "national-average-div", children: [
           /* @__PURE__ */ b("span", { className: "national-avg-label", children: i }),
           /* @__PURE__ */ b("span", { className: "national-avg-value", children: k(
-            r,
-            { value: d },
+            l,
+            { value: f },
             o
           ) })
         ] }) }),
         /* @__PURE__ */ b(
-          O.Column,
+          S.Column,
           {
             textAlign: "right",
             width: e !== "csv" && a ? 12 : 16,
             children: /* @__PURE__ */ b(
-              ie,
+              oe,
               {
                 filteredBreaks: this.getBreaks(),
                 formattedLegendTitle: k(
-                  t,
-                  { ...v },
+                  s,
+                  { ...y },
                   o
                 ),
                 selectedMeasure: this.state.selectedMeasure,
@@ -888,9 +970,9 @@ class de extends H.Component {
           }
         )
       ] }),
-      /* @__PURE__ */ b("div", { className: "measure-selector", children: /* @__PURE__ */ w("ul", { children: [
-        c && /* @__PURE__ */ b("li", { children: /* @__PURE__ */ b("span", { className: "label", children: c }) }),
-        l && l.measures && l.measures.length > 1 && l.measures.map((x) => /* @__PURE__ */ w("li", { onClick: this.selectedMeasureChanged.bind(this, x), children: [
+      /* @__PURE__ */ b("div", { className: "measure-selector", children: /* @__PURE__ */ M("ul", { children: [
+        n && /* @__PURE__ */ b("li", { children: /* @__PURE__ */ b("span", { className: "label", children: n }) }),
+        r && r.measures && r.measures.length > 1 && r.measures.map((x) => /* @__PURE__ */ M("li", { onClick: this.selectedMeasureChanged.bind(this, x), children: [
           /* @__PURE__ */ b(
             "input",
             {
@@ -899,49 +981,49 @@ class de extends H.Component {
               value: x
             }
           ),
-          /* @__PURE__ */ b("label", { children: l.measureLabelMap[x] || x })
+          /* @__PURE__ */ b("label", { children: r.measureLabelMap[x] || x })
         ] }))
       ] }) })
     ] });
-    return /* @__PURE__ */ w("div", { className: "map component wp-data-viz-map", ref: this.mapContainer, children: [
-      this.state.layersLoading && (g ? this.noMapSelected() : this.renderLoader()),
-      !this.state.layersLoading && /* @__PURE__ */ w(X, { children: [
-        !G && /* @__PURE__ */ b(y, {}),
-        /* @__PURE__ */ w(
+    return /* @__PURE__ */ M("div", { className: "map component wp-data-viz-map", ref: this.mapContainer, children: [
+      this.state.layersLoading && (m ? this.noMapSelected() : this.renderLoader()),
+      !this.state.layersLoading && /* @__PURE__ */ M(R, { children: [
+        !$ && /* @__PURE__ */ b(L, {}),
+        /* @__PURE__ */ M(
           "div",
           {
             className: "map wrapper scaling-svg-container " + h,
             style: {
-              height: this.props.height - ce[F()] + "px"
+              height: this.props.height - ce[T()] + "px"
             },
             children: [
-              M && M.value && /* @__PURE__ */ b(
+              I ? /* @__PURE__ */ b(
                 "div",
                 {
                   className: "highlighted-loc-info",
-                  style: z,
-                  children: /* @__PURE__ */ w("span", { children: [
+                  style: A,
+                  children: /* @__PURE__ */ M("span", { children: [
                     " ",
                     k(
-                      L,
+                      v,
                       {
-                        value: M.value,
-                        locationName: M.label,
-                        measureName: M.measure
+                        value: I.value,
+                        locationName: this.getTranslatedHighlightedLocationName() || I.label,
+                        measureName: I.measure
                       },
                       o
                     )
                   ] })
                 }
-              ),
-              (g || s) && !he && /* @__PURE__ */ w("div", { className: "control panel ignore", children: [
+              ) : /* @__PURE__ */ b(R, { children: " " }),
+              (m || t) && !de && /* @__PURE__ */ M("div", { className: "control panel ignore", children: [
                 /* @__PURE__ */ b("div", { className: "zoom plus", onClick: this.onZoomIn, children: /* @__PURE__ */ b(E, { name: "plus", size: "large" }) }),
                 /* @__PURE__ */ b("div", { className: "zoom minus", onClick: this.onZoomOut, children: /* @__PURE__ */ b(E, { name: "minus", size: "large" }) }),
                 /* @__PURE__ */ b(
-                  te,
+                  se,
                   {
                     content: /* @__PURE__ */ b(
-                      q,
+                      K,
                       {
                         id: "map.reset.tooltip",
                         defaultMessage: "Reset zoom"
@@ -954,12 +1036,13 @@ class de extends H.Component {
             ]
           }
         ),
-        G && /* @__PURE__ */ b(y, {})
+        $ && /* @__PURE__ */ b(L, {})
       ] })
     ] });
   }
 }
-const Me = Y(de);
+const Te = q(ue);
 export {
-  Me as default
+  Te as default,
+  O as getTranslatedItemLabel
 };