Merge pull request #258 from IGNF/feat/add-coord-info-to-popup

feat(search): info attributaires sur le marker de geolocalisation (#244)
IGNF · Nov 15, 2024 · b03d05c · b03d05c
2 parents 9c9ea3e + 6380d12
commit b03d05c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css
@@ -402,14 +402,14 @@
   font-size: 0.75em;
   /* font-family: "Open Sans", sans-serif;
   color: #002A50; */
-  background-color: #FFF;
-  box-shadow: 0 0 5px #000;
+  background-color: var(--background-default-grey);
+  box-shadow: 0 0 5px var(--text-default-grey);
 }
 
 .gp-feature-info-div::before {
   content: "";
   position: absolute;
-  border-top: 15px solid #FFF;
+  border-top: 15px solid var(--background-default-grey);
   border-right: 14px solid transparent;
   border-left: 14px solid transparent;
   bottom: -15px;
@@ -428,11 +428,21 @@
   cursor: pointer;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
-  background-color: #FFF;
-  background-repeat: no-repeat;
-  background-image: url("img/close-blue.svg");
-  background-size: 14px 14px;
-  background-position: center;
+  background-color: var(--background-default-grey);
+}
+
+.gp-feature-info-div .closer::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: var(--text-action-high-blue-france);
+  -webkit-mask: url("img/close-blue.svg") center no-repeat;
+  mask: url("img/close-blue.svg") center no-repeat;
+  -webkit-mask-size: 14px 14px;
+  mask-size: 14px 14px;
 }
 
 .gp-features-content-div {

diff --git a/src/packages/Controls/ReverseGeocode/ReverseGeocode.js b/src/packages/Controls/ReverseGeocode/ReverseGeocode.js
@@ -469,8 +469,7 @@ var ReverseGeocode = class ReverseGeocode extends Control {
         var context = this;
         var element = document.createElement("div");
         element.className = "gp-feature-info-div";
-        var closer = document.createElement("input");
-        closer.type = "button";
+        var closer = document.createElement("button");
         closer.className = "gp-styling-button closer";
         // on closer click : remove popup
         closer.onclick = function () {

diff --git a/src/packages/Controls/Route/Route.js b/src/packages/Controls/Route/Route.js
@@ -848,8 +848,7 @@ var Route = class Route extends Control {
         var context = this;
         var element = document.createElement("div");
         element.className = "gp-feature-info-div";
-        var closer = document.createElement("input");
-        closer.type = "button";
+        var closer = document.createElement("button");
         closer.className = "gp-styling-button closer";
         // on closer click : remove popup
         closer.onclick = function () {

diff --git a/src/packages/Controls/SearchEngine/SearchEngine.js b/src/packages/Controls/SearchEngine/SearchEngine.js
@@ -722,9 +722,8 @@ var SearchEngine = class SearchEngine extends Control {
     _initPopupDiv () {
         var context = this;
         var element = document.createElement("div");
-        element.className = "gp-feature-info-div";
-        var closer = document.createElement("input");
-        closer.type = "button";
+        element.className = "gp-feature-info-div gpf-widget-color";
+        var closer = document.createElement("button");
         closer.className = "gp-styling-button closer";
         // on closer click : remove popup
         closer.onclick = function () {
@@ -1494,7 +1493,7 @@ var SearchEngine = class SearchEngine extends Control {
         if (this.options.position && !this.collapsed) {
             this.updatePosition(this.options.position);
         }
-        
+
         // on nettoie si on ferme le composant
         if (this.collapsed) {
             this._clearResults();
@@ -1523,18 +1522,22 @@ var SearchEngine = class SearchEngine extends Control {
             navigator.geolocation.getCurrentPosition((position) => {
                 var view = this.getMap().getView();
                 var viewProj = view.getProjection().getCode();
-                var coordinates = [position.coords.longitude, position.coords.latitude];
+                var coordinates_4326 = [position.coords.longitude, position.coords.latitude];
+                var coordinates;
                 if (viewProj !== "EPSG:4326") {
                     // on retransforme les coordonnées de la position dans la projection de la carte
-                    coordinates = olProjTransform(coordinates, "EPSG:4326", viewProj);
+                    coordinates = olProjTransform(coordinates_4326, "EPSG:4326", viewProj);
+                } else {
+                    coordinates = coordinates_4326;
                 }
                 if (isNaN(coordinates[0]) || isNaN(coordinates[1])) {
                     this._setMarker();
                     return;
                 }
                 this._setPosition(coordinates, 10); // FIXME zoom fixe !
                 if (this._displayMarker) {
-                    this._setMarker(coordinates, "sans information");
+                    var markerInfo = "<h6> Ma position </h6> longitude : " + coordinates_4326[0] + "<br/> latitude : " + coordinates_4326[1];
+                    this._setMarker(coordinates, markerInfo);
                 }
                 /**
                  * event triggered when i want a geolocation

diff --git a/src/packages/Controls/Utils/Gfi.js b/src/packages/Controls/Utils/Gfi.js
@@ -125,8 +125,7 @@ var Gfi = {
         var element = document.createElement("div");
         element.className = "gp-feature-info-div";
 
-        var closer = document.createElement("input");
-        closer.type = "button";
+        var closer = document.createElement("button");
         closer.className = "gp-styling-button closer";
 
         // fait disparaître la popup au clic sur x