feat(search): ajouter une option position top-center pour le search engine

[elias75015]

Pour la barre de recherche : en haut au milieu, pour avoir un rendu similaire à l'entrée carto.

On pourra d'ailleurs reporter le code entrée carto sur les extensions, et utiliser l'option côté entrée carto.

Sur l'entrée carto voilà ce qui est fait :

var search = new ol.control.SearchEngine({
        collapsed: false,
        collapsible: false,
        displayButtonAdvancedSearch: true,
        displayButtonGeolocate: true,
        displayButtonCoordinateSearch: true,
        displayButtonClose: false,
        resources: {
          search: true
        },
        searchOptions: {
          addToMap: false,
          filterServices: "WMTS,WMS,TMS",
          serviceOptions: {}
        },
        markerUrl : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzNiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBmaWxsPSIjMDAwMDkxIiBkPSJNMTguMzY0IDMuNjM2YTkgOSAwIDAgMSAwIDEyLjcyOEwxMiAyMi43MjhsLTYuMzY0LTYuMzY0QTkgOSAwIDAgMSAxOC4zNjQgMy42MzZaTTEyIDhhMiAyIDAgMSAwIDAgNCAyIDIgMCAwIDAgMC00WiIvPjwvc3ZnPg=="
      });
      map.addControl(search);

<style>
    /* Centrage de la barre de recherche avec marge horizontales auto et largeur fixe */
    div[id^="GPsearchEngine-"] {
      position: relative;
      width: 480px;
      margin: 0 auto;
      left: unset;
    }

    /* pas de scrollbar sur les panneaux de recherche avancée */
    form[id^="GPadvancedSearchForm"],
    form[id^="GPcoordinateSearchForm"] {
      max-height: unset;
    }

    /* MODE MOBILE : les boutons sont en dessous de la barre de recherche qui prend toute la largeur */
    @media (max-width: 576px) {
      div[id^=GPsearchEngine-] {
        top: unset;
        left: unset;
        width: 100%;
      }

      [id^="GPautocompleteResults-"] {
        height: 70vh;
      }
    }
  </style>