Um mapa simples com menos HTML

P: Podemos exibir um mapa com HTML sem Javascript?
R: Sim, duas linhas de HTML com um elemento personalizado

Este artigo apresenta uma maneira simples de ter um mapa em uma página da web. Para fazer isso, adicione essas duas linhas de HTML à sua página da web.

<script src="//unpkg.com/[email protected]/dist/mapbox"></script>
<x-mapbox center="Toronto, Canada" access-token="xxxyyy"></x-mapbox>

Você precisa de um token de acesso.

O Mapbox usa tokens de acesso para associar solicitações de API à sua conta. Esse token impedirá o uso abusivo do mapa e também será usado para cobrar quando suas solicitações forem superiores a 50.000 solicitações por mês.

Um token de acesso pode ser fornecido <x-mapbox>como um atributo, access-token. Embora seja possível fornecer um token de acesso como atributo, é altamente recomendável fornecê-lo a partir do código JS como window.xKeys.mapbpx, que será usado window.mapboxgl.accessTokeninternamente.

<script>window.xKeys = {mapbox: 'pk.xxxyyyzzz' }</script>
<script src="//unpkg.com/[email protected]/dist/mapbox"></script>
<x-mapbox center="Toronto, Canada"></x-mapbox>

O que é<x-mapbox>?

<x-mapbox>é um dos elementos personalizados dehttps://elements-x.com. Por padrão, um mapa é exibido no modo terreno, mas você pode alternar para o modo satélite clicando no ícone do canto superior direito. É simples de usar, desde que você importe arquivos elements-x/dist/mapbox.

<x-mapbox>tem mais recursos como o seguinte;

• Marcadores de exibição, com ou sem pop-up.
• Geocodificação integrada fornecendo endereço em vez de longitude e latitude.
• Mapa de pesquisa com <x-div>e <input>tags.

Ao adicionar <x-marker>, <x-mapbox>você pode ver um marcador.

<x-mapbox>
  <x-marker lnglat="1600 pennsilvania ave, ashington DC" center>
  </x-marker>
</x-mapbox>

      

       https://stackblitz.com/edit/x-mapbox-marker?file=index.html
      

Ao adicionar qualquer HTML em <x-marker>, você pode ver um pop-up.

<x-mapbox>
  <x-marker lnglat="1600 pennsilvania ave, washington DC" center>
    <h3>White House</h3> Trump once lived here.
  </x-marker>
</x-mapbox>

      

       https://stackblitz.com/edit/x-mapbox-marker-popup?file=index.html
      

Para ter uma função de pesquisa para o seu mapa, você precisa envolver seu <input>e <x-mapbox>com <x-div>.

<x-div>
  <b class="label">Search Map:</b>
  <input x-change="set(#marker[lnglat])" />
  <x-mapbox>
    <x-marker id="marker" lnglat="Toronto, Canada" center>
      Looking For Here?
    </x-marker>
  </x-mapbox>
</x-div>

      

       https://stackblitz.com/edit/x-mapbox-search?file=index.html
      

Boa codificação :)

elements-x é uma coleção de elementos personalizados que são personalizáveis ​​em estilo e independentes de qualquer estrutura.