Una mappa semplice con meno HTML

D: Possiamo visualizzare una mappa con HTML senza Javascript?
R: Sì, due righe di HTML con un elemento personalizzato

Questo articolo è per presentarti un modo semplice per avere una mappa su una pagina web. Per fare ciò, aggiungi queste due righe di HTML alla tua pagina web.

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

Hai bisogno di un token di accesso.

Mapbox utilizza i token di accesso per associare le richieste API al tuo account. Questo token ti impedirà di utilizzare la mappa in modo abusivo e viene utilizzato anche per fatturarti quando le tue richieste superano le 50.000 richieste al mese.

È possibile fornire un token di accesso <x-mapbox>come attributo, access-token. Sebbene sia possibile fornire un token di accesso come attributo, si consiglia vivamente di fornirlo dal codice JS come window.xKeys.mapbpx, che verrà utilizzato 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>

Cosa c'è<x-mapbox>?

<x-mapbox>è uno degli elementi personalizzati dihttps://elements-x.com. Per impostazione predefinita, una mappa viene visualizzata in modalità terreno, ma puoi passare alla modalità satellite facendo clic su un'icona nell'angolo in alto a destra. È semplice da usare fintanto che importi elements-x/dist/mapbox.

<x-mapbox>ha più funzionalità come le seguenti;

• Visualizza gli indicatori, con o senza popup.
• Geocodifica incorporata fornendo l'indirizzo invece di longitudine e latitudine.
• Cerca nella mappa con <x-div>e <input>tag.

Aggiungendo <x-marker>, <x-mapbox>puoi vedere un indicatore.

<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
      

Aggiungendo qualsiasi codice HTML in <x-marker>, puoi vedere un popup.

<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
      

Per avere una funzione di ricerca per la tua mappa, devi avvolgere il tuo <input>e <x-mapbox>con <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
      

Buona codifica :)

elements-x è una raccolta di elementi personalizzati personalizzabili in stile e indipendenti da qualsiasi framework.