From e2fbfe7cf05e501709481e6af98b68c8f8089e83 Mon Sep 17 00:00:00 2001
From: Miu Razvan <miu.razvan28@gmail.com>
Date: Tue, 15 Sep 2020 13:48:52 +0300
Subject: [PATCH] Closest feature to the center

---
 .../DiscodataOpenlayersMapBlock/View.jsx      | 29 +++++++++++++++++--
 .../manage/Blocks/FiltersBlock/View.jsx       |  4 +--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
index 6c5d9c35..a4eba2c4 100644
--- a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
+++ b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
@@ -104,6 +104,13 @@ const initialExtent = [
   10421410.9999871,
 ];
 let renderExtent = [];
+
+const getDistance = (P1, P2) => {
+  const cathetus_1 = Math.pow(P1[0] - P2[0], 2);
+  const cathetus_2 = Math.pow(P1[1] - P2[1], 2);
+  return Math.sqrt(cathetus_1 + cathetus_2);
+};
+
 const OpenlayersMapView = (props) => {
   const stateRef = useRef({
     map: {
@@ -899,12 +906,28 @@ const OpenlayersMapView = (props) => {
       }
       map.on('moveend', function (e) {
         if (hasSidebar && document.getElementById('dynamic-filter')) {
+          const closestFeature = {
+            feature: null,
+            distance: Infinity,
+          };
+          const features = stateRef.current.map.sitesSourceLayer
+            .getSource()
+            .getFeatures();
+
+          features.forEach((feature, index) => {
+            const distance = getDistance(
+              feature.getGeometry().flatCoordinates,
+              stateRef.current.map.element.getView().getCenter(),
+            );
+            if (closestFeature.distance > distance) {
+              closestFeature.feature = feature;
+              closestFeature.distance = distance;
+            }
+          });
           document.getElementById('dynamic-filter').dispatchEvent(
             new CustomEvent('featurechange', {
               detail: {
-                features: sitesSource.getFeaturesInExtent(
-                  map.getView().calculateExtent(),
-                ),
+                feature: closestFeature.feature,
               },
             }),
           );
diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx
index 809b344c..b23165e2 100644
--- a/src/components/manage/Blocks/FiltersBlock/View.jsx
+++ b/src/components/manage/Blocks/FiltersBlock/View.jsx
@@ -174,10 +174,10 @@ const View = ({ content, ...props }) => {
 
   const onFeaturechange = (e) => {
     if (
-      e.detail.features?.[0]?.getProperties?.()?.countryCode !==
+      e.detail.feature?.getProperties?.()?.countryCode !==
       alphaFeatureRef.current?.getProperties?.()?.countryCode
     ) {
-      setAlphaFeature(e.detail.features?.[0]);
+      setAlphaFeature(e.detail.feature);
     }
   };