Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
elias75015 opened this issue Nov 6, 2024 · 0 comments

Comments

@elias75015
Copy link
Contributor

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant