@hisptz/dhis2-analytics 1.0.5 → 1.0.7

package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.js

@@ -0,0 +1,95 @@
+import React, { forwardRef } from "react";
+import LegendCardHeader from "../../LegendArea/components/LegendCardHeader";
+import { Divider } from "@dhis2/ui";
+import i18n from "@dhis2/d2-i18n";
+import { isEmpty } from "lodash";
+export function LegendItem(_ref) {
+  let {
+    legend
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item-color",
+    style: {
+      backgroundColor: legend.color
+    }
+  }), legend.name ? /*#__PURE__*/React.createElement("div", {
+    className: "legend-item-label"
+  }, `${legend.name}`) : /*#__PURE__*/React.createElement("div", {
+    className: "legend-item-label"
+  }, `${legend.min} - ${legend.max}`));
+}
+function getLegendsFromParams(params) {
+  if (!params) return [];
+  const {
+    palette,
+    min,
+    max
+  } = params;
+  console.log(params);
+  const sanitizedPalette = Array.isArray(palette) ? palette : palette.split(",");
+  const classes = sanitizedPalette.length;
+  const difference = max - min;
+  const interval = Math.round(difference / classes);
+  const legends = [];
+  console.log(10 / 9);
+  for (let i = 0; i < classes; i++) {
+    const min = i * interval;
+    const max = min + interval;
+    const name = i === classes - 1 ? `> ${min}` : undefined;
+    legends.push({
+      id: sanitizedPalette[i],
+      color: sanitizedPalette[i],
+      min,
+      max,
+      name
+    });
+  }
+  return legends;
+}
+function EarthEngineLegend(_ref2, ref) {
+  var _options$legend$items, _options$legend, _options$description, _options$unit, _options$source;
+  let {
+    layer,
+    collapsible,
+    onCollapse,
+    name
+  } = _ref2;
+  const {
+    options
+  } = layer;
+  const legends = (_options$legend$items = options === null || options === void 0 ? void 0 : (_options$legend = options.legend) === null || _options$legend === void 0 ? void 0 : _options$legend.items) !== null && _options$legend$items !== void 0 ? _options$legend$items : getLegendsFromParams(options === null || options === void 0 ? void 0 : options.params);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 200,
+      alignItems: "start",
+      gap: 8
+    },
+    className: "legend-card",
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LegendCardHeader, {
+    title: name,
+    collapsible: collapsible,
+    onCollapse: onCollapse
+  }), /*#__PURE__*/React.createElement(Divider, {
+    margin: "0"
+  }), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: 0
+    }
+  }, (_options$description = options === null || options === void 0 ? void 0 : options.description) !== null && _options$description !== void 0 ? _options$description : ""), !isEmpty(legends) && /*#__PURE__*/React.createElement("b", null, (_options$unit = options === null || options === void 0 ? void 0 : options.unit) !== null && _options$unit !== void 0 ? _options$unit : ""), /*#__PURE__*/React.createElement("div", {
+    className: "legend-list"
+  }, legends === null || legends === void 0 ? void 0 : legends.map(legend => /*#__PURE__*/React.createElement(LegendItem, {
+    key: `${legend === null || legend === void 0 ? void 0 : legend.color}-legend-list`,
+    legend: legend
+  }))), (options === null || options === void 0 ? void 0 : options.source) && /*#__PURE__*/React.createElement("div", {
+    className: "row gap-8"
+  }, i18n.t("Source"), ":", /*#__PURE__*/React.createElement("a", {
+    className: "source-url",
+    target: "_blank",
+    referrerPolicy: "no-referrer",
+    href: options === null || options === void 0 ? void 0 : options.sourceUrl
+  }, (_options$source = options === null || options === void 0 ? void 0 : options.source) !== null && _options$source !== void 0 ? _options$source : "")));
+}
+export default /*#__PURE__*/forwardRef(EarthEngineLegend);

package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/constants/index.js

@@ -0,0 +1,369 @@
+import i18n from "@dhis2/d2-i18n";
+export const EARTH_ENGINE_LAYER = "earthEngine";
+export const EARTH_ENGINE_LAYERS = [{
+  layer: EARTH_ENGINE_LAYER,
+  id: "population",
+  datasetId: "WorldPop/GP/100m/pop",
+  type: "ImageCollection",
+  name: i18n.t("Population"),
+  unit: i18n.t("people per hectare"),
+  description: i18n.t("Estimated number of people living in an area."),
+  source: "WorldPop / Google Earth Engine",
+  sourceUrl: "https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop",
+  img: "images/population.png",
+  defaultAggregations: ["sum", "mean"],
+  tokenType: "Bearer",
+  periodType: "Yearly",
+  filters: ["period"],
+  mosaic: true,
+  params: {
+    min: 0,
+    max: 10,
+    palette: "#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15" // Reds
+  },
+
+  opacity: 0.9
+}, {
+  layer: EARTH_ENGINE_LAYER,
+  type: "ImageCollection",
+  tokenType: "Bearer",
+  id: "populationAgeGroups",
+  datasetId: "WorldPop/GP/100m/pop_age_sex_cons_unadj",
+  name: i18n.t("Population age groups"),
+  unit: i18n.t("people per hectare"),
+  description: i18n.t("Estimated number of people living in an area, grouped by age and gender."),
+  source: "WorldPop / Google Earth Engine",
+  sourceUrl: "https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj",
+  img: "images/population.png",
+  periodType: "Yearly",
+  defaultAggregations: ["sum", "mean"],
+  bands: [{
+    id: "M_0",
+    name: i18n.t("Male 0 - 1 years")
+  }, {
+    id: "M_1",
+    name: i18n.t("Male 1 - 4 years")
+  }, {
+    id: "M_5",
+    name: i18n.t("Male 5 - 9 years")
+  }, {
+    id: "M_10",
+    name: i18n.t("Male 10 - 14 years")
+  }, {
+    id: "M_15",
+    name: i18n.t("Male 15 - 19 years")
+  }, {
+    id: "M_20",
+    name: i18n.t("Male 20 - 24 years")
+  }, {
+    id: "M_25",
+    name: i18n.t("Male 25 - 29 years")
+  }, {
+    id: "M_30",
+    name: i18n.t("Male 30 - 34 years")
+  }, {
+    id: "M_35",
+    name: i18n.t("Male 35 - 39 years")
+  }, {
+    id: "M_40",
+    name: i18n.t("Male 40 - 44 years")
+  }, {
+    id: "M_45",
+    name: i18n.t("Male 45 - 49 years")
+  }, {
+    id: "M_50",
+    name: i18n.t("Male 50 - 54 years")
+  }, {
+    id: "M_55",
+    name: i18n.t("Male 55 - 59 years")
+  }, {
+    id: "M_60",
+    name: i18n.t("Male 60 - 64 years")
+  }, {
+    id: "M_65",
+    name: i18n.t("Male 65 - 69 years")
+  }, {
+    id: "M_70",
+    name: i18n.t("Male 70 - 74 years")
+  }, {
+    id: "M_75",
+    name: i18n.t("Male 75 - 79 years")
+  }, {
+    id: "M_80",
+    name: i18n.t("Male 80 years and above")
+  }, {
+    id: "F_0",
+    name: i18n.t("Female 0 - 1 years")
+  }, {
+    id: "F_1",
+    name: i18n.t("Female 1 - 4 years")
+  }, {
+    id: "F_5",
+    name: i18n.t("Female 5 - 9 years")
+  }, {
+    id: "F_10",
+    name: i18n.t("Female 10 - 14 years")
+  }, {
+    id: "F_15",
+    name: i18n.t("Female 15 - 19 years")
+  }, {
+    id: "F_20",
+    name: i18n.t("Female 20 - 24 years")
+  }, {
+    id: "F_25",
+    name: i18n.t("Female 25 - 29 years")
+  }, {
+    id: "F_30",
+    name: i18n.t("Female 30 - 34 years")
+  }, {
+    id: "F_35",
+    name: i18n.t("Female 35 - 39 years")
+  }, {
+    id: "F_40",
+    name: i18n.t("Female 40 - 44 years")
+  }, {
+    id: "F_45",
+    name: i18n.t("Female 45 - 49 years")
+  }, {
+    id: "F_50",
+    name: i18n.t("Female 50 - 54 years")
+  }, {
+    id: "F_55",
+    name: i18n.t("Female 55 - 59 years")
+  }, {
+    id: "F_60",
+    name: i18n.t("Female 60 - 64 years")
+  }, {
+    id: "F_65",
+    name: i18n.t("Female 65 - 69 years")
+  }, {
+    id: "F_70",
+    name: i18n.t("Female 70 - 74 years"),
+    multiple: true
+  }, {
+    id: "F_75",
+    name: i18n.t("Female 75 - 79 years")
+  }, {
+    id: "F_80",
+    name: i18n.t("Female 80 years and above")
+  }],
+  filters: ["period"],
+  mosaic: true,
+  params: {
+    min: 0,
+    max: 10,
+    palette: "#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15" // Reds
+  },
+
+  opacity: 0.9,
+  tileScale: 4
+}, {
+  layer: EARTH_ENGINE_LAYER,
+  id: "footprints",
+  datasetId: "GOOGLE/Research/open-buildings/v1/polygons",
+  type: "FeatureCollection",
+  name: i18n.t("Building footprints"),
+  unit: i18n.t("Number of buildings"),
+  description: i18n.t("The outlines of buildings derived from high-resolution satellite imagery. Only for the continent of Africa."),
+  notice: i18n.t("Building counts are only available for smaller organisation unit areas."),
+  error: i18n.t("Select a smaller area or single organization unit to see the count of buildings."),
+  source: "NASA / USGS / JPL-Caltech / Google Earth Engine",
+  sourceUrl: "https://sites.research.google/open-buildings/",
+  img: "images/buildings.png",
+  aggregations: ["count"],
+  defaultAggregations: ["count"],
+  opacity: 0.9,
+  tokenType: "Bearer"
+}, {
+  layer: EARTH_ENGINE_LAYER,
+  id: "elevation",
+  type: "Image",
+  tokenType: "Bearer",
+  datasetId: "USGS/SRTMGL1_003",
+  name: i18n.t("Elevation"),
+  unit: i18n.t("meters"),
+  description: i18n.t("Elevation above sea-level."),
+  source: "NASA / USGS / JPL-Caltech / Google Earth Engine",
+  sourceUrl: "https://explorer.earthengine.google.com/#detail/USGS%2FSRTMGL1_003",
+  img: "images/elevation.png",
+  aggregations: ["min", "max", "mean", "median", "stdDev", "variance"],
+  defaultAggregations: ["mean", "min", "max"],
+  selectedBands: ["elevation"],
+  params: {
+    min: 0,
+    max: 1500,
+    palette: "#ffffd4,#fee391,#fec44f,#fe9929,#d95f0e,#993404" // YlOrBr
+  },
+
+  opacity: 0.9
+}, {
+  layer: EARTH_ENGINE_LAYER,
+  datasetId: "UCSB-CHG/CHIRPS/PENTAD",
+  id: "precipitation",
+  type: "ImageCollection",
+  tokenType: "Bearer",
+  name: i18n.t("Precipitation"),
+  unit: i18n.t("millimeter"),
+  description: i18n.t("Precipitation collected from satellite and weather stations on the ground. The values are in millimeters within 5 days periods. Updated monthly, during the 3rd week of the following month."),
+  source: "UCSB / CHG / Google Earth Engine",
+  sourceUrl: "https://explorer.earthengine.google.com/#detail/UCSB-CHG%2FCHIRPS%2FPENTAD",
+  periodType: "Custom",
+  selectedBands: ["precipitation"],
+  aggregations: ["min", "max", "mean", "median", "stdDev", "variance"],
+  defaultAggregations: ["mean", "min", "max"],
+  mask: true,
+  img: "images/precipitation.png",
+  params: {
+    min: 0,
+    max: 100,
+    palette: "#eff3ff,#c6dbef,#9ecae1,#6baed6,#3182bd,#08519c" // Blues
+  },
+
+  opacity: 0.9
+}, {
+  layer: EARTH_ENGINE_LAYER,
+  datasetId: "MODIS/006/MOD11A2",
+  id: "temperature",
+  type: "ImageCollection",
+  tokenType: "Bearer",
+  name: i18n.t("Temperature"),
+  unit: i18n.t("°C during daytime"),
+  description: i18n.t("Land surface temperatures collected from satellite. Blank spots will appear in areas with a persistent cloud cover."),
+  source: "NASA LP DAAC / Google Earth Engine",
+  sourceUrl: "https://explorer.earthengine.google.com/#detail/MODIS%2FMOD11A2",
+  img: "images/temperature.png",
+  aggregations: ["min", "max", "mean", "median", "stdDev", "variance"],
+  defaultAggregations: ["mean", "min", "max"],
+  periodType: "Custom",
+  selectedBands: ["LST_Day_1km"],
+  mask: true,
+  methods: {
+    toFloat: [],
+    multiply: [0.02],
+    subtract: [273.15]
+  },
+  params: {
+    min: 0,
+    max: 40,
+    palette: "#fff5f0,#fee0d2,#fcbba1,#fc9272,#fb6a4a,#ef3b2c,#cb181d,#a50f15,#67000d" // Reds
+  },
+
+  opacity: 0.9
+}, {
+  layer: EARTH_ENGINE_LAYER,
+  type: "ImageCollection",
+  tokenType: "Bearer",
+  id: "landCover",
+  datasetId: "MODIS/006/MCD12Q1",
+  // No longer in use: 'MODIS/051/MCD12Q1',
+  name: i18n.t("Landcover"),
+  description: i18n.t("Distinct landcover types collected from satellites."),
+  source: "NASA LP DAAC / Google Earth Engine",
+  sourceUrl: "https://developers.google.com/earth-engine/datasets/catalog/MODIS_006_MCD12Q1",
+  periodType: "Yearly",
+  filters: ["period"],
+  selectedBands: ["LC_Type1"],
+  defaultAggregations: ["percentage", "hectares", "acres"],
+  maxAggregations: 1,
+  legend: {
+    items: [
+    // http://www.eomf.ou.edu/static/IGBP.pdf
+    {
+      id: 1,
+      name: i18n.t("Evergreen Needleleaf forest"),
+      color: "#162103"
+    }, {
+      id: 2,
+      name: i18n.t("Evergreen Broadleaf forest"),
+      color: "#235123"
+    }, {
+      id: 3,
+      name: i18n.t("Deciduous Needleleaf forest"),
+      color: "#399b38"
+    }, {
+      id: 4,
+      name: i18n.t("Deciduous Broadleaf forest"),
+      color: "#38eb38"
+    }, {
+      id: 5,
+      name: i18n.t("Mixed forest"),
+      color: "#39723b"
+    }, {
+      id: 6,
+      name: i18n.t("Closed shrublands"),
+      color: "#6a2424"
+    }, {
+      id: 7,
+      name: i18n.t("Open shrublands"),
+      color: "#c3a55f"
+    }, {
+      id: 8,
+      name: i18n.t("Woody savannas"),
+      color: "#b76124"
+    }, {
+      id: 9,
+      name: i18n.t("Savannas"),
+      color: "#d99125"
+    }, {
+      id: 10,
+      name: i18n.t("Grasslands"),
+      color: "#92af1f"
+    }, {
+      id: 11,
+      name: i18n.t("Permanent wetlands"),
+      color: "#10104c"
+    }, {
+      id: 12,
+      name: i18n.t("Croplands"),
+      color: "#cdb400"
+    }, {
+      id: 13,
+      name: i18n.t("Urban and built-up"),
+      color: "#cc0202"
+    }, {
+      id: 14,
+      name: i18n.t("Cropland/Natural vegetation mosaic"),
+      color: "#332808"
+    }, {
+      id: 15,
+      name: i18n.t("Snow and ice"),
+      color: "#d7cdcc"
+    }, {
+      id: 16,
+      name: i18n.t("Barren or sparsely vegetated"),
+      color: "#f7e174"
+    }, {
+      id: 17,
+      name: i18n.t("Water"),
+      color: "#aec3d6"
+    }]
+  },
+  mask: false,
+  img: "images/landcover.png",
+  opacity: 0.9
+}, {
+  layer: EARTH_ENGINE_LAYER,
+  id: "nightLights",
+  type: "ImageCollection",
+  tokenType: "Bearer",
+  legacy: true,
+  // Kept for backward compability
+  datasetId: "NOAA/DMSP-OLS/NIGHTTIME_LIGHTS",
+  name: i18n.t("Nighttime lights"),
+  unit: i18n.t("light intensity"),
+  description: i18n.t("Light intensity from cities, towns, and other sites with persistent lighting, including gas flares."),
+  source: "NOAA / Google Earth Engine",
+  sourceUrl: "https://explorer.earthengine.google.com/#detail/NOAA%2FDMSP-OLS%2FNIGHTTIME_LIGHTS",
+  periodType: "Yearly",
+  selectedBands: ["stable_lights"],
+  mask: true,
+  img: "images/nighttime.png",
+  params: {
+    min: 0,
+    max: 63,
+    palette: "#ffffd4,#fee391,#fec44f,#fe9929,#ec7014,#cc4c02,#8c2d04" // YlOrBr
+  },
+
+  opacity: 0.9
+}];
+export const SUPPORTED_EARTH_ENGINE_LAYERS = ["population", "landCover", "footprints"];

package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/hooks/index.js

@@ -0,0 +1,29 @@
+import { useDataEngine } from "@dhis2/app-runtime";
+import { find } from "lodash";
+import { useMapLayers } from "../../../../MapProvider/hooks";
+import { useState } from "react";
+const googleEngineKeyQuery = {
+  token: {
+    resource: "tokens/google"
+  }
+};
+export function useGoogleEngineToken() {
+  const engine = useDataEngine();
+  const [loading, setLoading] = useState(false);
+  const getToken = async () => {
+    setLoading(true);
+    const token = await engine.query(googleEngineKeyQuery);
+    setLoading(false);
+    return token;
+  };
+  return {
+    refresh: getToken,
+    loading
+  };
+}
+export default function useGoogleEngineLayer(layerId) {
+  const {
+    layers
+  } = useMapLayers();
+  return find(layers, ["id", layerId]);
+}

package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/index.js

@@ -0,0 +1,191 @@
+import { capitalize, find, head, isEmpty, sortBy } from "lodash";
+import React, { useMemo, useRef } from "react";
+import { GeoJSON, LayerGroup, LayersControl, Popup, TileLayer, Tooltip } from "react-leaflet";
+import { useBoundaryData } from "../BoundaryLayer/hooks/useBoundaryData";
+import useGoogleEngineLayer from "./hooks";
+import { highlightFeature, resetHighlight } from "../../../../utils/map";
+import { defaultStyle, highlightStyle } from "../BoundaryLayer";
+import { useQuery } from "react-query";
+import { CenteredContent, CircularLoader, Divider } from "@dhis2/ui";
+import i18n from "@dhis2/d2-i18n";
+function formatValues(value) {
+  return Intl.NumberFormat("en-GB", {
+    maximumFractionDigits: 2
+  }).format(value);
+}
+function getUnit(unit) {
+  if (unit === "percentage") {
+    return "%";
+  }
+}
+function Legend(_ref) {
+  let {
+    header,
+    legends,
+    value,
+    unit
+  } = _ref;
+  const legend = find(legends, ["id", header]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "row gap-8 space-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row gap-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item-color",
+    style: {
+      backgroundColor: legend === null || legend === void 0 ? void 0 : legend.color
+    }
+  }), /*#__PURE__*/React.createElement("div", null, legend === null || legend === void 0 ? void 0 : legend.name)), /*#__PURE__*/React.createElement("span", null, formatValues(value), getUnit(unit)));
+}
+function AggregationView(_ref2) {
+  let {
+    header,
+    value
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "row space-between"
+  }, /*#__PURE__*/React.createElement("span", null, capitalize(header.toString())), /*#__PURE__*/React.createElement("span", null, formatValues(value)));
+}
+function EarthEnginePopup(_ref3) {
+  var _layer$engine, _layer$engine$options, _layer$engine$options2, _engine$getAggregatio, _layer$engine$options3, _layer$engine2, _layer$engine2$option, _layer$engine3, _layer$options3, _layer$options$unit, _layer$options4, _Object$keys;
+  let {
+    layer,
+    orgUnit,
+    loading,
+    error
+  } = _ref3;
+  const engine = layer === null || layer === void 0 ? void 0 : layer.engine;
+  const legends = layer === null || layer === void 0 ? void 0 : (_layer$engine = layer.engine) === null || _layer$engine === void 0 ? void 0 : (_layer$engine$options = _layer$engine.options) === null || _layer$engine$options === void 0 ? void 0 : (_layer$engine$options2 = _layer$engine$options.legend) === null || _layer$engine$options2 === void 0 ? void 0 : _layer$engine$options2.items;
+  const data = engine === null || engine === void 0 ? void 0 : (_engine$getAggregatio = engine.getAggregation(orgUnit)) === null || _engine$getAggregatio === void 0 ? void 0 : _engine$getAggregatio.data;
+  const unit = (_layer$engine$options3 = layer === null || layer === void 0 ? void 0 : (_layer$engine2 = layer.engine) === null || _layer$engine2 === void 0 ? void 0 : (_layer$engine2$option = _layer$engine2.options) === null || _layer$engine2$option === void 0 ? void 0 : _layer$engine2$option.unit) !== null && _layer$engine$options3 !== void 0 ? _layer$engine$options3 : head(layer === null || layer === void 0 ? void 0 : (_layer$engine3 = layer.engine) === null || _layer$engine3 === void 0 ? void 0 : _layer$engine3.options.aggregations);
+  const aggregations = useMemo(() => {
+    if (!isEmpty(legends)) {
+      return sortBy(Object.keys(data !== null && data !== void 0 ? data : {}).map(key => {
+        return {
+          id: parseInt(key),
+          value: data[key]
+        };
+      }), ["value"]).reverse();
+    }
+    return data !== null && data !== void 0 ? data : {};
+  }, [data]);
+  if (loading) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 200,
+        height: 200
+      }
+    }, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, {
+      extrasmall: true
+    })));
+  }
+  if (error) {
+    var _layer$options, _layer$options2;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: "0"
+      }
+    }, orgUnit.name), /*#__PURE__*/React.createElement(Divider, {
+      margin: "0"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "column gap-8"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "column"
+    }, /*#__PURE__*/React.createElement("b", null, layer === null || layer === void 0 ? void 0 : (_layer$options = layer.options) === null || _layer$options === void 0 ? void 0 : _layer$options.name), /*#__PURE__*/React.createElement("div", null, layer === null || layer === void 0 ? void 0 : (_layer$options2 = layer.options) === null || _layer$options2 === void 0 ? void 0 : _layer$options2.unit)), /*#__PURE__*/React.createElement("div", {
+      className: "column"
+    }, /*#__PURE__*/React.createElement("p", null, i18n.t("Could not get aggregate data")), /*#__PURE__*/React.createElement("p", null, error))));
+  }
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: "0"
+    }
+  }, orgUnit.name), /*#__PURE__*/React.createElement(Divider, {
+    margin: "0"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "column gap-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/React.createElement("b", null, layer === null || layer === void 0 ? void 0 : (_layer$options3 = layer.options) === null || _layer$options3 === void 0 ? void 0 : _layer$options3.name), /*#__PURE__*/React.createElement("div", null, (_layer$options$unit = layer === null || layer === void 0 ? void 0 : (_layer$options4 = layer.options) === null || _layer$options4 === void 0 ? void 0 : _layer$options4.unit) !== null && _layer$options$unit !== void 0 ? _layer$options$unit : unit)), data && /*#__PURE__*/React.createElement("div", {
+    className: "column"
+  }, Array.isArray(aggregations) ? aggregations === null || aggregations === void 0 ? void 0 : aggregations.map(_ref4 => {
+    let {
+      id,
+      value
+    } = _ref4;
+    return /*#__PURE__*/React.createElement(Legend, {
+      key: `${orgUnit.id}-legend-details-${id}`,
+      legends: legends !== null && legends !== void 0 ? legends : [],
+      value: value,
+      header: id,
+      unit: unit
+    });
+  }) : (_Object$keys = Object.keys(aggregations)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(key => /*#__PURE__*/React.createElement(AggregationView, {
+    key: `${orgUnit.id}-aggregate-details-${key}`,
+    header: key,
+    value: aggregations[key]
+  })))));
+}
+function EarthEngineArea(_ref5) {
+  let {
+    area,
+    layer,
+    loading,
+    error
+  } = _ref5;
+  const ref = useRef();
+  return /*#__PURE__*/React.createElement(GeoJSON, {
+    ref: ref,
+    data: area.geoJSON,
+    interactive: true,
+    eventHandlers: {
+      mouseover: e => highlightFeature(e, highlightStyle),
+      mouseout: e => resetHighlight(e, defaultStyle)
+    },
+    key: `${area.id}-polygon`,
+    pathOptions: defaultStyle
+  }, /*#__PURE__*/React.createElement(Tooltip, null, area.name), /*#__PURE__*/React.createElement(Popup, {
+    minWidth: 100
+  }, /*#__PURE__*/React.createElement(EarthEnginePopup, {
+    error: error,
+    layer: layer,
+    orgUnit: area,
+    loading: loading
+  })));
+}
+export default function GoogleEngineLayer(_ref6) {
+  let {
+    layerId
+  } = _ref6;
+  const layer = useGoogleEngineLayer(layerId);
+  const {
+    name,
+    type,
+    enabled,
+    url,
+    options,
+    engine
+  } = layer !== null && layer !== void 0 ? layer : {};
+  const {
+    isLoading: loadingAggregateData,
+    error
+  } = useQuery([engine], async () => engine === null || engine === void 0 ? void 0 : engine.getAggregations(), {
+    suspense: false
+  });
+  const orgUnits = useBoundaryData();
+  if (!url) return null;
+  return /*#__PURE__*/React.createElement(LayersControl.Overlay, {
+    checked: enabled,
+    name: name !== null && name !== void 0 ? name : capitalize(type)
+  }, /*#__PURE__*/React.createElement(LayerGroup, null, /*#__PURE__*/React.createElement(TileLayer, {
+    id: options === null || options === void 0 ? void 0 : options.id,
+    url: url
+  }), orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(area => {
+    return /*#__PURE__*/React.createElement(EarthEngineArea, {
+      error: error === null || error === void 0 ? void 0 : error.toString(),
+      loading: loadingAggregateData,
+      key: `${area.id}-polygon`,
+      area: area,
+      layer: layer
+    });
+  })));
+}

package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/interfaces/index.js

@@ -0,0 +1 @@
+export {};