‫-: Continuiamo ora a costruire la nostra integrazione con le mappe.
‫E quindi ora andiamo effettivamente a Mapbox.
‫E così, ora sto usando Mapbox invece di Google Maps e questo
‫perché qualche tempo fa,
‫Google Maps ha iniziato a richiedere effettivamente
‫una carta di credito da te
‫per poter utilizzare Google Maps.
‫E non penso che sia una buona idea per un corso
‫come questo e, in realtà, mi piace
‫molto anche Mapbox, quindi penso che sia perfetto per noi da usare in questo corso.
‫Hanno anche un'eccellente documentazione
‫che proveremo tra un secondo qui.
‫Ma per ora, iniziamo e creiamo un nuovo account.
‫Quindi basta premere qui per iniziare a costruire.
‫E poi, ovviamente, crea il tuo account gratuito.
‫Ne ho già uno e quindi,
‫a questo punto, metti in pausa il video per creare quell'account.
‫E dopo aver creato il tuo
‫account, dovresti atterrare su una pagina simile a questa.
‫Ora, quando guardi questo video,
‫questa pagina qui potrebbe,
‫ovviamente, essere cambiata, e probabilmente lo è,
‫ma quello che
‫dobbiamo fare ora è trovare un collegamento che
‫dice qualcosa del genere, quindi installa lo sviluppo del
‫software delle mappe kit, quindi questo qui, o anche integrare Mapbox, che
‫dovrebbe essere più o meno lo stesso.
‫Quindi farò clic qui per installare le mappe per JavaScript.
‫E quello che faremo qui
‫è usare il CDN di Mapbox quindi la
‫rete di distribuzione dei contenuti e
‫per ora almeno
‫non il bundler del modulo NPM.
‫Quindi il primo passo, come dice qui,
‫è includere questi file qui e nel file HTML avuto.
‫Ed è qui che ora abbiamo bisogno di
‫quella tecnica di estensione della testa che avevamo prima.
‫Ed è qui che ora abbiamo
‫effettivamente bisogno di estendere la tecnica della testa.
‫Qui nel tour,
‫ricorda come l'abbiamo spostato fuori dalla testa, in realtà.
‫Ma ora abbiamo ancora bisogno di alcune cose
‫che dobbiamo aggiungere alla testa.
‫E quindi questo è questo script e anche questo foglio di stile.
‫Traduciamo rapidamente questo qui in carlino.
‫E anche il collegamento, ed
‫è proprio così.
‫Eliminiamo questa
‫parte e torniamo al passaggio successivo qui.
‫Successivamente, dobbiamo copiare questo codice JavaScript qui,
‫nel nostro file.
‫E alla nostra sceneggiatura, ovviamente.
‫Quindi proprio qui in mapbox. js.
‫Ora probabilmente non avrai questo token di
‫accesso a questo
‫punto, quindi ti è richiesto di farlo già,
‫o altrimenti ti mostrerò come farlo in un secondo.
‫Indentiamo questa parte qui.
‫Con questo, siamo già a posto.
‫Questo dovrebbe infatti già creare
‫una mappa e visualizzarla sulla nostra pagina.
‫Questo perché il contenitore qui è impostato per mappare.
‫E ciò significa che metterà la
‫mappa su un elemento con l'ID della mappa.
‫Ecco perché qui, nel nostro tour, abbiamo
‫questo elemento qui, oh,
‫dov'è?
‫Quindi proprio qui, abbiamo un elemento con mappa ID.
‫Il motivo è che qui in Mapbox, abbiamo effettivamente
‫bisogno di un elemento
‫con un ID che possiamo specificare qui.
‫E l'impostazione predefinita è map,
‫quindi è così che l'ho chiamato in html.
‫Quindi abbiamo anche questo stile predefinito qui,
‫che cambieremo in un secondo.
‫Per ora, torniamo alle nostre
‫istruzioni qui, e quindi dice che abbiamo finito qui.
‫Ma ora torniamo effettivamente al nostro
‫account e creiamo quel token di cui abbiamo
‫bisogno per poter effettivamente accedere a Mapbox.
‫Per favore, non limitarti a
‫copiare il mio token, non funzionerà bene per te.
‫Ma invece, creane uno tuo.
‫Puoi semplicemente creare un nuovo nome per esso.
‫Chiamiamola semplicemente in questo modo.
‫E poi crea il token qui.
‫Quindi inserisci la
‫tua password e quindi puoi utilizzare quel token.
‫Quindi, ancora una volta, non sono sicuro che abbia
‫già creato questo token per te o se avessi davvero
‫bisogno di crearne uno nuovo.
‫Ad ogni modo, è anche bello avere un token per ogni progetto,
‫in modo da
‫poter limitare quel token solo a quel progetto.
‫Ho creato il mio account qui molto tempo fa, e quindi
‫non sono davvero sicuro, ancora una volta, di come abbia
‫funzionato, ma comunque, avendo quel token ora dovresti essere a posto.
‫In effetti, ora dovrebbe già visualizzare la nostra mappa predefinita.
‫Quindi ricarichiamo, e infatti questa è la nostra mappa predefinita.
‫Non sembra molto carino, beh, possiamo
‫ingrandire, ma in realtà
‫lo stile non è poi così carino
‫e non si adatta molto al nostro sito
‫Web e,
‫naturalmente, non abbiamo nemmeno le nostre posizioni
‫tracciate da nessuna parte per il carta geografica.
‫E quindi ora pensiamo a tutto questo.
‫Torniamo a Mapbox, e
‫ora entriamo nel nostro studio di progettazione.
‫Facciamo semplicemente clic qui su "inizia a progettare una
‫mappa" o ancora, se il tuo
‫sito web ha un
‫aspetto leggermente diverso a questo punto, cerca lo studio di progettazione.
‫Forse si presenta da qualche parte qui.
‫Quindi proviamolo.
‫Qui possiamo davvero fare qualsiasi cosa riguardo
‫alla progettazione di una mappa.
‫In realtà, questo non è proprio quello che mi
‫aspettavo, perché è un po' troppo complesso cambiare
‫tutte queste cose
‫qui, ma ci sono alcuni stili predefiniti, ah sì, questo
‫è quello che stavo cercando.
‫Creiamo un nuovo stile
‫qui, e poi da lì possiamo scegliere un tipo predefinito.
‫E davvero quello che voglio è questo stile leggero.
‫Quindi crea, e in realtà sono molto contento del
‫modo in cui appare fuori dagli schemi.
‫Ora, per qualche ragione non vedo
‫nulla qui, ok, è perché è stato zoomato nel mare.
‫Ma comunque, ora ingrandiamo da qualche parte qui, e
‫penso che sia già abbastanza
‫carino, quindi aggiungiamo solo un nome qui,
‫quindi
‫lo chiamo Registrazione video di Natour perché ho
‫già uno stile di Natour, ma
‫tu ovviamente puoi chiamarlo come vuoi.
‫Confermiamo il nome qui, torniamo indietro, e poi
‫qui su condividi e usa.
‫E quello che vogliamo non è condividere, ma invece usare.
‫Da qualche parte quaggiù, dovremmo vedere il nostro URL di stile,
‫e quindi, sì, è quello.
‫Quindi deve essere un URL che fondamentalmente inizia con Mapbox.
‫Copiamolo, torniamo indietro e poi sostituiamo lo stile
‫che abbiamo qui come predefinito, con quello
‫che abbiamo appena creato.
‫Dagli un
‫salvataggio
‫e sì, sembra molto meglio.
‫Ed è esattamente lo stile che abbiamo appena creato.
‫Quindi ora possiamo ingrandire, rimpicciolire o
‫addirittura viceversa, possiamo spostare
‫la mappa dove vogliamo e
‫possiamo anche definire un sacco di proprietà, di opzioni
‫per questa mappa.
‫In questo momento, ogni volta che
‫carichiamo la mappa, sembra
‫sempre la stessa, sempre centrata qui a Boston.
‫Ma possiamo cambiarlo specificando il centro
‫qui.
‫E quindi dobbiamo passare in un array di due coordinate.
‫Prendiamo effettivamente quello di Los Angeles che
‫abbiamo usato prima in Postman, quindi
‫esattamente
‫questo, ma, in realtà, Mapbox è esattamente come
‫MongoDB, nell'aspetto che richiede prima una longitudine e
‫poi la latitudine.
‫Dobbiamo cambiarli qui intorno.
‫E diamo un'occhiata a cosa otteniamo.
‫E, beh, questo non ci porta da nessuna parte.
‫Specifichiamo anche qui un livello di zoom.
‫Diciamo quattro.
‫Forse questo lo risolve.
‫E in realtà, quella era questa illusione.
‫Quindi ci sono diversi livelli di zoom.
‫Ad esempio, possiamo provarne uno anche
‫qui, e questo dovrebbe essere molto più ingrandito,
‫o forse rimpicciolito, non ne sono proprio sicuro.
‫Ah, ok, quindi questo lo rimpicciolisce davvero del tutto.
‫Quindi diciamo 10 qui per esempio,
‫e come vedi mi piace molto
‫giocare con questo tipo
‫di cose, e sì, a 10 ora è davvero molto vicino.
‫Possiamo anche dire che vogliamo che non sia interattivo,
‫e quindi è molto semplice.
‫Impostiamo interattivo su false.
‫E poi fondamentalmente la tua
‫mappa sembrerà una semplice immagine sul tuo sito web.
‫Quindi, come vedi, non posso scorrere nulla qui
‫e non posso nemmeno spostarlo.
‫Quindi non c'è niente che posso fare ora.
‫E queste sono in realtà solo un paio di opzioni che
‫possiamo impostare.
‫In realtà torniamo qui
‫a Mapbox, alla documentazione ea Mapbox JavaScript.
‫Qui trovi tutta la documentazione per
‫tutto quello che puoi fare con la versione JavaScript di Mapbox.
‫Quello che volevo solo mostrarti è che le cose che
‫ti ho appena mostrato sono in realtà qui.
‫Quindi abbiamo il contenitore che abbiamo specificato,
‫abbiamo lo stile e
‫abbiamo davvero un sacco di cose.
‫Così interattivo, e se
‫vuoi puoi ovviamente giocare con tutti
‫questi.
‫Volevo solo mostrarti che è così
‫che puoi imparare altre cose su Mapbox.
‫Ora, in realtà non vogliamo niente di tutto questo.
‫Perché non vogliamo centrare la mappa da nessuna parte,
‫ma invece vogliamo che capisca automaticamente la
‫posizione della mappa in base ai nostri punti di posizione del tour.
‫Quello che faremo ora
‫è fondamentalmente mettere tutte le posizioni per un determinato tour
‫sulla mappa e quindi consentire alla
‫mappa di capire automaticamente quale parte della mappa dovrebbe
‫visualizzare per adattarsi correttamente a tutti questi punti.
‫La prima cosa che dobbiamo fare
‫è creare una variabile legata.
‫I limiti equivalgono a un nuovo Mapbox GL. limiti di longitudine latitude.
‫E abbiamo accesso a questo oggetto Mapbox perché
‫abbiamo incluso la libreria Mapbox all'inizio
‫della nostra pagina.
‫Proprio qui,
‫incluso questo script qui,
‫quindi questa libreria Mapbox, questo
‫è ciò che espone l'oggetto Mapbox GL, che possiamo
‫quindi utilizzare in tutto il nostro sito.
‫Questo oggetto di confine qui è
‫fondamentalmente l'area che verrà visualizzata sulla mappa.
‫Ora lo estenderemo a tutte le posizioni che si
‫trovano nel nostro array di posizioni.
‫E questo avrà un po' più senso una
‫volta che inizieremo a usarlo.
‫Esaminiamo ora tutte le nostre posizioni e aggiungiamo
‫un marcatore per ciascuna di esse.
‫Per ciascuno,
‫vediamo il blocco per le
‫posizioni, quindi qui vogliamo aggiungere un marcatore.
‫E per questo, in realtà abbiamo
‫bisogno di creare un nuovo elemento
‫html, a questo proposito, è davvero un po' di basso livello, ma
‫lo trovo davvero molto
‫carino, perché, in questo modo, abbiamo molto controllo
‫su ciò che sta effettivamente accadendo nella nostra mappa.
‫E quello che ti sto mostrando
‫qui è in realtà solo una piccola parte
‫di tutte le grandi cose che puoi fare con Mapbox.
‫Questo qui è solo un JavaScript
‫standard, quindi possiamo usare
‫create element per creare elementi.
‫Proprio come dice il
‫nome, e qui vogliamo creare un nuovo diff.
‫E vogliamo anche dare un nome alla classe e
‫impostarlo su marker.
‫Ed eccolo qui, è un punto e virgola.
‫E così nel CSS abbiamo effettivamente una
‫classe per questo marcatore.
‫Marker, qui vedi l'immagine di sfondo che è specificata,
‫che è questo pin verde qui.
‫Quella spilla che vedrai tra un secondo sulla mappa è in
‫realtà un'immagine personalizzata che ho disegnato io.
‫Non viene direttamente da Mapbox.
‫In questo modo, puoi davvero adattarlo al tuo stile e al
‫tuo marchio.
‫Ho anche definito la dimensione del marker qui, sì,
‫è davvero personalizzabile.
‫Ora creiamo effettivamente un nuovo marker all'interno di Mapbox
‫dicendo new Mapbox GL. marcatore.
‫E poi lì, passiamo l'elemento che abbiamo appena creato, quindi L,
‫e poi specifichiamo anche una proprietà di ancoraggio.
‫Che ho
‫messo in fondo qui.
‫E ciò significa che è la parte inferiore dell'elemento, e quindi
‫in questo caso la parte inferiore
‫di quel pin, che sarà posizionato nella posizione GPS esatta.
‫Potremmo anche metterlo al
‫centro, ma penso che abbia più
‫senso che, apriamo di nuovo quell'immagine,
‫penso che abbia più senso che questa fine
‫qui dell'immagine sia quella che punta davvero
‫all'esatta posizione GPS.
‫Questo è ciò che facciamo con questa proprietà di ancoraggio.
‫Quindi questo è il
‫marcatore, e ora, su quello, possiamo chiamare un paio di metodi.
‫Al momento, Mapbox non sa nulla delle coordinate GPS di
‫questo marker.
‫Non l'abbiamo impostato da nessuna parte.
‫Facciamolo ora,
‫quindi imposta longitudine, latitudine e uguale alla
‫posizione. coordinate.
‫Ricorda che questa è una matrice di longitudine e
‫latitudine forzata.
‫Questo è esattamente ciò che Mapbox si aspetta.
‫Giusto per essere sicuri di aver capito davvero,
‫diamo un'occhiata ai tour.
‫Di nuovo, ogni posizione ha queste proprietà di coordinate, ed è
‫da lì che ora stiamo leggendo le coordinate.
‫Posizione. coordinate.
‫E poi, infine, aggiungi a e poi la nostra variabile di mappa.
‫Quindi questa mappa qui è questa variabile di mappa in cui
‫abbiamo creato il nostro nuovo Mapbox. mappa proprio all'inizio.
‫E ora, tutto ciò che dobbiamo fare per finire, è
‫effettivamente estendere i nostri limiti.
‫Quindi limiti. estendere e anche con posizioni, o addirittura "loc",
‫che è la posizione corrente. coordinate.
‫Questa prima parte qui in realtà aggiunge il
‫marker, o
‫lo crea, rendiamolo ancora più
‫specifico,
‫crea marker quindi
‫aggiungi il marker e poi qui, estendi i limiti
‫della mappa per includere la posizione corrente.
‫Ma questo non è ancora abbastanza, perché ora facciamo
‫anche in modo che la mappa si
‫adatti effettivamente ai limiti.
‫Quindi mappa. adatta, non trova, ma adatta i limiti, e
‫quindi ovviamente il nostro oggetto limiti.
‫Wow.
‫Quindi, un sacco di lavoro solo per mettere alcuni indicatori sulla mappa.
‫Ma, ancora una volta, trovo davvero piacevole
‫lavorare con questa libreria.
‫E ora diamo un'occhiata e non
‫sono proprio sicuro che tutto sia andato bene qui.
‫E in realtà non è stato così,
‫quindi le nostre mappe non si trovano davvero da nessuna
‫parte, ingrandiamo un po' per vedere se sono
‫effettivamente da qualche parte e
‫non lo sono.
‫Diamo un'occhiata alla nostra console,
‫e in effetti c'è una sorta di errore.
‫Quindi lat, i limiti di longitudine non sono un costruttore,
‫e in effetti è il contrario.
‫Quindi di nuovo, Mapbox, proprio come MongoDB, si
‫aspetta che le coordinate siano prima la longitudine
‫e poi la latitudine.
‫Questo è ciò
‫che abbiamo qui in questo nome, e
‫quindi qui dovrebbe essere lo stesso.
‫Quindi longitudine, latitudine.
‫Proviamo di nuovo qui.
‫Ahh, ora funziona.
‫Molto bello.
‫Hai visto che bel zoom.
‫Questo è ciò che fa il metodo dei limiti di adattamento.
‫Quindi sposta e ingrandisce la mappa fino ai limiti
‫per adattarsi effettivamente ai nostri indicatori.
‫Ora, vedi che abbiamo questo tipo di altri elementi qui
‫sovrapposti alla nostra mappa.
‫E questo è dovuto a questo design che
‫ho creato con questi bordi qui.
‫Ma questo non è un problema
‫perché possiamo effettivamente specificare manualmente un po' di riempimento a questi limiti.
‫Possiamo passare un oggetto qui, quindi
‫diciamo 200 pixel in alto, 200 pixel in
‫basso, e poi 100
‫pixel a sinistra ea destra.
‫E non dobbiamo specificare i pixel qui, immagino
‫che sia solo io a scrivere così tanti CSS.
‫Proviamo di nuovo.
‫Oh, bella animazione zoom,
‫ma non ha rispettato molto le nostre impostazioni.
‫E in realtà, è perché questo non è corretto.
‫Quindi, dovremmo invece creare un oggetto, e
‫poi lì dentro dobbiamo specificare la proprietà padding, che
‫poi ha tutto questo.
‫Quindi facciamolo.
‫Imbottitura.
‫E ora,
‫taglia questo e mettilo lì.
‫Salvalo qui.
‫Un'altra volta.
‫Amico, c'è ancora qualcosa che non va qui.
‫Che cos'è?
‫Ahh, e ovviamente questo codice non dovrebbe essere qui.
‫Non è nell'estensione, è davvero qui nei limiti.
‫Quindi questo è in realtà dove ha senso essere.
‫Risolviamo questo codice qui, e ora ha senso.
‫Ovviamente deve essere nei limiti
‫di adattamento, che alla fine è la funzione
‫che esegue lo spostamento e lo zoom.
‫È lì che dovrebbe essere
‫il riempimento e potremmo specificare un sacco di altre opzioni.
‫E ancora, se sei
‫interessato a questo, dai un'occhiata alla documentazione.
‫Quindi un terzo tentativo
‫qui, speriamo questa volta di
‫aver capito bene, ahh, e sì, sembra molto meglio.
‫Ma ci sono ancora alcune cose che possiamo migliorare qui, perché
‫in questo momento non possiamo nemmeno sapere quale
‫sia ciascuna di queste posizioni.
‫E quindi in realtà vogliamo una sorta di pop-up
‫qui, che mostri le informazioni sulla posizione.
‫Non solo il marcatore, ma vogliamo anche aggiungere un pop-up.
‫E quindi è un po' simile all'aggiunta del marker,
‫quindi diciamo nuovo Mapbox GL. apparire.
‫Quindi, proprio come prima, specifichiamo le coordinate
‫di quel pop-up.
‫Quindi quello proprio qui.
‫Quindi abbiamo anche bisogno di definire l'html per questo
‫pop-up, e lo farò ora usando il metodo
‫set html, perché questo mi consentirà di
‫aggiungere del contenuto direttamente
‫in quell'html, quindi imposta html e poi un stringa modello qui.
‫Voglio che questo sia un
‫paragrafo e le informazioni che voglio visualizzare qui
‫sono il giorno in cui saremo in questa
‫posizione, e poi il nome della posizione.
‫Quindi, in pratica, voglio visualizzare il giorno, ecco
‫perché abbiamo creato queste proprietà del giorno qui, e
‫poi la descrizione.
‫Giorno, e poi luogo, ricorda quale è l'indie della posizione
‫corrente per ogni ciclo, e
‫poi giorno,
‫luogo. descrizione.
‫Salvalo qui,
‫ora sembra molto più carino.
‫E poi, proprio come con l'altro, dobbiamo
‫anche aggiungere a, e poi la nostra variabile di mappa.
‫E questo non sembrerà perfetto,
‫perché dobbiamo specificare alcune opzioni, ma a
‫questo punto volevo comunque mostrarti il risultato.
‫E così, ora vedi che in realtà si
‫sovrappongono ai marcatori.
‫Possiamo effettivamente risolverlo usando una proprietà offset.
‫Passiamo queste opzioni proprio qui nel nuovo pop-up.
‫Diciamo
‫offset di 30 pixel.
‫E ho anche
‫notato che abbiamo un po' troppa
‫imbottitura nella parte inferiore, quindi riduciamola a 150 e ripetiamo l'operazione.
‫E quindi, questo sembra piuttosto carino, penso.
‫Quindi chi ora dà un'occhiata
‫alla nostra pagina, può vedere molto rapidamente
‫che tipo di itinerario sarà in questo tour.
‫E se ci sono
‫troppe informazioni, possiamo anche chiudere questi pop-up.
‫E potremmo davvero aggiungere tutti i tipi di cose a questa mappa.
‫Ad esempio, potremmo creare questa linea qui tra
‫questi punti e unirli
‫insieme, come una linea verde qui o qualcosa del genere.
‫Oppure potremmo anche visualizzare il percorso
‫reale da un
‫punto all'altro utilizzando fondamentalmente le indicazioni,
‫ma manteniamo le cose semplici qui.
‫L'unica cosa che mi resta da
‫fare qui è disabilitare effettivamente la funzionalità di zoom.
‫Perché in questo momento,
‫diciamo che stiamo ingrandendo questa
‫pagina, o in realtà se stiamo
‫scorrendo su questa pagina, e
‫quindi una volta che raggiungiamo questo
‫qui, e poi continuiamo a scorrere qui, allora scorriamo la mappa invece della pagina.
‫Non è una buona esperienza utente, quindi tutto
‫ciò che dobbiamo fare
‫ora è disabilitare sostanzialmente la funzionalità di scorrimento su
‫questa mappa.
‫Consentiremo comunque alle persone di spostarsi in questo modo, ma
‫lo zoom sarà disabilitato.
‫Andiamo qui sulla nostra mappa e aggiungiamola.
‫E non stiamo usando le impostazioni predefinite interattive, perché non
‫potremmo nemmeno fare una panoramica della mappa.
‫Ma ancora una volta, questo dovrebbe almeno essere consentito.
‫L'opzione che sto impostando qui è scroll zoom false.
‫E ancora, per tutte le possibili
‫opzioni che potresti
‫impostare qui, vai avanti e dai un'occhiata al riferimento.
‫E così ora, quando mettiamo il mouse qui e scorriamo,
‫non cambia il livello di zoom.
‫Perfetto.
‫Possiamo ancora eseguire la panoramica, quindi penso che sia davvero carino ora.
‫Proviamolo in un altro.
‫Diciamo qui l'escursionista della foresta.
‫E così, funziona ancora.
‫E questi qui sono una specie di
‫sovrapposizione, ma nessun problema, possiamo sempre chiuderli se vogliamo.
‫Diamo un'occhiata qui per esempio, esploratore del mare.
‫E se
‫siamo abbastanza veloci, possiamo persino vedere
‫l'animazione dello zoom che sposta la mappa in quella posizione.
‫Ok, perfetto.
‫Quindi spero che tu sia stato in grado
‫di seguire davvero questo esempio con tutto ciò che abbiamo fatto in Mapbox.
‫Ora, nel caso in cui qualcosa non
‫funzionasse, assicurati di
‫utilizzare una versione simile
‫alla mia, quindi intendo una versione simile della libreria Mapbox.
‫Che nel mio caso qui è la versione 0. 54.
‫Il tuo probabilmente non dovrebbe essere 1. qualcosa.
‫Quindi, se stai guardando
‫questo video molto tempo dopo questa registrazione e hai un V1 qui,
‫allora vai avanti e cambialo in 0. qualcosa, in modo che
‫fondamentalmente non ci siano cambiamenti di rottura lì.
‫Ad ogni modo, con questo, in realtà concludiamo la nostra pagina del tour,
‫e quindi non abbiamo più bisogno
‫di niente di tutto questo, c'è anche
‫la mappa, e quindi questa parte del sito web è effettivamente finita.
‫Stupendo.
‫Congratulazioni per averlo reso realtà, per aver iniziato
‫davvero a costruire questo bellissimo sito Web utilizzando tutte
‫queste incredibili tecnologie che hai
‫imparato finora.