Source code

src/showcase/pages/components/map.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the maps component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentMap" class="component-library">
  <include src="partials/components/page-header.html" locals='{"title":"componentMap"}'></include>
  <div class="catalog-grid">
    <article class="card full">
      <header class="card-header"><h2 x-text="$t('galleryMap')"></h2></header>
      <div class="card-body">
        <p class="text-muted" x-text="$t('galleryMapIntro')"></p>
        <div x-data="uiMap(mapOptions)">
          <include src="{{ uiRoot }}/map.html"></include>
          <div class="demo-row mt-3">
            <template x-for="location in locations" :key="location.label">
              <button
                class="btn btn-secondary btn-sm"
                @click="command('locate', location)"
                :disabled="status !== 'ready'"
                x-text="location.label"
              ></button>
            </template>
          </div>
        </div>
        <p class="form-text mt-3">
          Natural Earth ·
          <a
            href="https://www.naturalearthdata.com/about/terms-of-use/"
            target="_blank"
            rel="noreferrer"
          >
            Public domain
          </a>
        </p>
      </div>
    </article>
  </div>
</section>