Merge pull request #13 from maltaesousa/fts

I'll open an issue for this so we don't forget.

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -1,2 +1,3 @@
 assets/*/*
 !assets/*/.gitkeep
+node_modules

index.html

@@ -8,8 +8,8 @@
   <meta http-equiv="Expires" content="0" />
   <link rel="stylesheet" href="assets/ol/ol.css" type="text/css">
   <link rel="stylesheet" href="assets/ol-ext/ol-ext.min.css" type="text/css">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/fontawesome/css/all.css">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
   <style>
     .map {
       height: 400px;
@@ -22,6 +22,7 @@
   </style>
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList,URL,Object.assign"></script>
   <script src="assets/jquery/jquery-3.3.1.min.js"></script>
+  <script src="assets/jquery-ui/jquery-ui.min.js"></script>
   <script src="assets/proj4/proj4.js"></script>
   <script src="assets/ol/ol.js"></script>
   <script src="assets/ol-ext/ol-ext.min.js"></script>
@@ -181,6 +182,32 @@ <h3>Exemple 4</h3>
 
     <hr>
 
+    <h3>Exemple 5</h3>
+    <p>Fonctionnalité de recherche</p>
+    <div class="form-group">
+      <div class="dropdown" style="cursor: pointer;" id="search-box"></div>
+    </div>
+    <div id="sitn-map-5" class="map"></div>
+
+    <script>
+      // Création de la carte
+      map5 = new SitnMap()
+      map5.createMap({
+        target: 'sitn-map-5'
+      })
+
+      // Création du champ de recherche
+      searchBox = map5.searchBox({
+        target: 'search-box', // l'élecment <div> cible dans lequel sera placé la recherche
+        map: map5, // la carte sur laquelle le zoom doit être fait
+        inputclasses: ['form-control'], // classes css pour le champ texte, optionnelles
+        resultclasses: ['dropdown-menu'], // classes css pour la liste des résultats, optionnelles
+        headerclasses: ['dropdown-header'], // classes css pour le titre des sections, optionnelles
+        itemclasses: ['dropdown-item'], // classes css pour les items, optionnelles
+      })
+    </script>
+
+    <hr>
   </div>
 </body>
 

js/sitnlayers.js

@@ -61,7 +61,7 @@
     sitnLayers.setSimpleGeom = function (value) {
       _drawSimpleGeom = value
       if (_drawSimpleGeom && _drawSource.getFeatures().length > 1) {
-        lastFeature = _drawSource.getFeatures().slice(-1)[0]
+        let lastFeature = _drawSource.getFeatures().slice(-1)[0]
         _drawSource.clear()
         _drawSource.addFeature(lastFeature)
       }
@@ -310,6 +310,194 @@
       }
     }
 
+    sitnLayers.searchBox = function (config) {
+      var searchLayer = new ol.layer.Vector({ source: new ol.source.Vector() })
+      if (_map) {
+        _map.addLayer(searchLayer)
+      }
+      var width = 'auto'
+
+      if (config.width) {
+        width = config.width;
+      }
+
+      if (config) {
+        var inputclasses = config['inputclasses'] || ['']
+        var resultclasses = config['resultclasses'] || ['sitn-search-result']
+        var headerclasses = config['headerclasses'] || ['']
+        var itemclasses = config['itemclasses'] || ['']
+      }
+
+      // alias list for category names
+      var catClean = {
+        "adresses_sitn": "Adresses",
+        "axe_rue": "Axes et rues",
+        "batiments_ofs": "Bâtiments OFS",
+        "communes": "Communes",
+        "ImmeublesCanton": "Biens-fonds",
+        "localite": "Localités",
+        "nom_local_lieu_dit": "Noms locaux et Lieux-dits",
+        "search_arrets_tp": "Arrêts trans. publics",
+        "search_cours_eau": "Cours d'eau",
+        "search_satac": "N° SATAC",
+        "point_interet": "Points d'intérêt",
+        "search_uap_publique": "Unités d'aménagement publiques"
+      };
+
+      // create required divs
+      document.getElementById(config.target).innerHTML = '<input id=placeInput type=text class="' +
+        inputclasses.join(' ') + '"/>' +
+        '<ol id="selectable" class=" ' + resultclasses.join(' ') +
+        '"></ol>';
+      $('#' + config.target).width(width);
+
+      //start setting up events
+      $("#placeInput").val("Recherche un lieu ou un objet géographique");
+
+      $("#placeInput").focusin(function () {
+        $("#placeInput").val("");
+        searchLayer.getSource().clear();
+      });
+
+      $("#placeInput").focusout(function () {
+        $("#selectable").hide();
+      });
+
+      $("#selectable").hide();
+      //stop setting up events
+
+      //start get data from server
+      var inputTerm = "";
+      var recCopy = "";
+
+      $("#placeInput").keyup(function () {
+        inputTerm = $("#placeInput").val();
+        if (inputTerm.length > 2) {
+          $.ajax({
+            url: "https://sitn.ne.ch/production/wsgi/fulltextsearch",
+            crossDomain: true,
+            data: {
+              limit: 20,
+              query: inputTerm
+            },
+            success: function (rec) {
+              // get the results
+              if (rec.features.length == 0) {
+                document.getElementById("selectable").innerHTML = "Aucun résultat";
+                $("#selectable").show();
+                return;
+              }
+              // process results: group by categories
+              var itLength = rec.features.length;
+              var cat = new Array();
+              // get categories
+              for (let i = 0; i < itLength; i++) {
+                cat.push(rec.features[i].properties.layer_name);
+              }
+              // sort categories in ascending order and keep only unique
+              cat.sort();
+              var catUnique = [];
+              catUnique.push(cat[0]);
+              for (let i = 1; i < cat.length; i++) {
+                if (cat[i] != cat[i - 1]) {
+                  catUnique.push(cat[i]);
+                }
+              }
+              // group the features by categories and fill the ordered list used for place selection
+              recCopy = $.extend(true, {}, rec);
+              var index = 0;
+              var listItems = "";
+              var catTest, catName;
+              for (let i = 0; i < catUnique.length; i++) {
+                catTest = catUnique[i];
+                $.each(catClean, function (key, val) {
+                  if (catTest === key) {
+                    catName = val;
+                  }
+                });
+                listItems += '<div class="' + headerclasses.join(' ') + '"><b>' + catName + "</b></div>";
+                for (var j = 0; j < itLength; j++) {
+                  if (catUnique[i].toUpperCase() == rec.features[j].properties.layer_name.toUpperCase()) {
+                    recCopy.features[index] = rec.features[j];
+                    listItems += '<li class="' + itemclasses.join(' ') + '">'
+                      + rec.features[j].properties.label + "</li>";
+                    index += 1;
+                  }
+                }
+              }
+              document.getElementById("selectable").innerHTML = listItems;
+              $("#selectable").show();
+            },
+            error: function () {
+              $("#placeInput").val("Échec de la recherche")
+            }
+          });
+        } else if (!inputTerm) {
+          searchLayer.getSource().clear();
+        }
+      });
+      //stop get data from server
+
+      // fill selectable list and zoom to selected feature
+      $(function () {
+        $("#selectable").selectable({
+          stop: function () {
+            var result = $("#select-result").empty();
+            $(".ui-selected", this).each(function () {
+              var index = $("#selectable li").index(this);
+              if (index != -1) {
+                $("#placeInput").val(recCopy.features[index].properties.label);
+                if (_map) {
+                  var geojson_format = new ol.format.GeoJSON();
+                  searchLayer.getSource().clear();
+                  var nGeom = recCopy.features[index].geometry.coordinates.length;
+                  // geometry is not empty
+                  if (nGeom != 0) {
+                    searchLayer.getSource().addFeatures(geojson_format.readFeatures(recCopy.features[index]));
+                  } else { //geometry is empty;
+                    if (recCopy.features[index].bbox.length > 1) {
+                      var point = new ol.geom.Point(recCopy.features[index].bbox[0], recCopy.features[index].bbox[1]);
+                      var pointFeature = new ol.Feature(point);
+                      searchLayer.addFeatures(pointFeature);
+                    }
+                  }
+                  if (recCopy.features[index].geometry == 'Point') {
+                    _map.ZoomTo(10);
+                  } else {
+                    _map.getView().fit(recCopy.features[index].bbox);
+                  }
+                }
+                result.append(" #" + (index + 1));
+                $("#selectable").hide();
+              }
+            });
+          }
+        });
+      });
+
+      var css = `
+      .sitn-search-result {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1000;
+        float: left;
+        min-width: 10rem;
+        padding: .5rem 0;
+        margin: .125rem 0 0;
+        text-align: left;
+        list-style: none;
+        background-color: #fff;
+        background-clip: padding-box;
+      }`;
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var style = document.createElement('style');
+
+      head.appendChild(style);
+
+      style.type = 'text/css';
+      style.appendChild(document.createTextNode(css));
+    }
     return sitnLayers
   }