1 00:00:00,780 --> 00:00:04,163 ‫-: Continuiamo ora a costruire la nostra integrazione con le mappe. 2 00:00:05,720 --> 00:00:08,637 ‫E quindi ora andiamo effettivamente a Mapbox. 3 00:00:11,036 --> 00:00:15,090 ‫E così, ora sto usando Mapbox invece di Google Maps e questo 4 00:00:15,090 --> 00:00:16,710 ‫perché qualche tempo fa, 5 00:00:16,710 --> 00:00:19,260 ‫Google Maps ha iniziato a richiedere effettivamente 6 00:00:19,260 --> 00:00:21,300 ‫una carta di credito da te 7 00:00:21,300 --> 00:00:23,220 ‫per poter utilizzare Google Maps. 8 00:00:23,220 --> 00:00:26,640 ‫E non penso che sia una buona idea per un corso 9 00:00:26,640 --> 00:00:29,160 ‫come questo e, in realtà, mi piace 10 00:00:29,160 --> 00:00:33,723 ‫molto anche Mapbox, quindi penso che sia perfetto per noi da usare in questo corso. 11 00:00:35,500 --> 00:00:37,720 ‫Hanno anche un'eccellente documentazione 12 00:00:37,720 --> 00:00:40,130 ‫che proveremo tra un secondo qui. 13 00:00:40,130 --> 00:00:43,330 ‫Ma per ora, iniziamo e creiamo un nuovo account. 14 00:00:43,330 --> 00:00:45,623 ‫Quindi basta premere qui per iniziare a costruire. 15 00:00:48,208 --> 00:00:51,960 ‫E poi, ovviamente, crea il tuo account gratuito. 16 00:00:51,960 --> 00:00:54,370 ‫Ne ho già uno e quindi, 17 00:00:54,370 --> 00:00:58,200 ‫a questo punto, metti in pausa il video per creare quell'account. 18 00:00:58,200 --> 00:01:00,210 ‫E dopo aver creato il tuo 19 00:01:00,210 --> 00:01:02,960 ‫account, dovresti atterrare su una pagina simile a questa. 20 00:01:02,960 --> 00:01:05,009 ‫Ora, quando guardi questo video, 21 00:01:05,009 --> 00:01:06,820 ‫questa pagina qui potrebbe, 22 00:01:06,820 --> 00:01:09,430 ‫ovviamente, essere cambiata, e probabilmente lo è, 23 00:01:09,430 --> 00:01:11,020 ‫ma quello che 24 00:01:11,020 --> 00:01:13,900 ‫dobbiamo fare ora è trovare un collegamento che 25 00:01:13,900 --> 00:01:17,281 ‫dice qualcosa del genere, quindi installa lo sviluppo del 26 00:01:17,281 --> 00:01:21,850 ‫software delle mappe kit, quindi questo qui, o anche integrare Mapbox, che 27 00:01:21,850 --> 00:01:24,455 ‫dovrebbe essere più o meno lo stesso. 28 00:01:24,455 --> 00:01:29,025 ‫Quindi farò clic qui per installare le mappe per JavaScript. 29 00:01:29,025 --> 00:01:30,720 ‫E quello che faremo qui 30 00:01:30,720 --> 00:01:33,100 ‫è usare il CDN di Mapbox quindi la 31 00:01:33,100 --> 00:01:35,050 ‫rete di distribuzione dei contenuti e 32 00:01:35,050 --> 00:01:36,500 ‫per ora almeno 33 00:01:36,500 --> 00:01:38,503 ‫non il bundler del modulo NPM. 34 00:01:40,230 --> 00:01:43,500 ‫Quindi il primo passo, come dice qui, 35 00:01:43,500 --> 00:01:47,941 ‫è includere questi file qui e nel file HTML avuto. 36 00:01:47,941 --> 00:01:51,121 ‫Ed è qui che ora abbiamo bisogno di 37 00:01:51,121 --> 00:01:54,663 ‫quella tecnica di estensione della testa che avevamo prima. 38 00:01:56,970 --> 00:01:58,860 ‫Ed è qui che ora abbiamo 39 00:01:58,860 --> 00:02:01,293 ‫effettivamente bisogno di estendere la tecnica della testa. 40 00:02:02,443 --> 00:02:04,060 ‫Qui nel tour, 41 00:02:04,060 --> 00:02:07,690 ‫ricorda come l'abbiamo spostato fuori dalla testa, in realtà. 42 00:02:07,690 --> 00:02:10,550 ‫Ma ora abbiamo ancora bisogno di alcune cose 43 00:02:10,550 --> 00:02:12,940 ‫che dobbiamo aggiungere alla testa. 44 00:02:12,940 --> 00:02:16,533 ‫E quindi questo è questo script e anche questo foglio di stile. 45 00:02:17,570 --> 00:02:19,833 ‫Traduciamo rapidamente questo qui in carlino. 46 00:02:26,250 --> 00:02:28,533 ‫E anche il collegamento, ed 47 00:02:31,470 --> 00:02:33,300 ‫è proprio così. 48 00:02:33,300 --> 00:02:34,663 ‫Eliminiamo questa 49 00:02:35,930 --> 00:02:39,370 ‫parte e torniamo al passaggio successivo qui. 50 00:02:39,370 --> 00:02:43,720 ‫Successivamente, dobbiamo copiare questo codice JavaScript qui, 51 00:02:43,720 --> 00:02:45,885 ‫nel nostro file. 52 00:02:45,885 --> 00:02:48,050 ‫E alla nostra sceneggiatura, ovviamente. 53 00:02:48,050 --> 00:02:51,140 ‫Quindi proprio qui in mapbox. js. 54 00:02:51,140 --> 00:02:53,860 ‫Ora probabilmente non avrai questo token di 55 00:02:53,860 --> 00:02:55,360 ‫accesso a questo 56 00:02:55,360 --> 00:02:58,180 ‫punto, quindi ti è richiesto di farlo già, 57 00:02:58,180 --> 00:03:01,343 ‫o altrimenti ti mostrerò come farlo in un secondo. 58 00:03:02,586 --> 00:03:05,230 ‫Indentiamo questa parte qui. 59 00:03:05,230 --> 00:03:09,510 ‫Con questo, siamo già a posto. 60 00:03:09,510 --> 00:03:11,640 ‫Questo dovrebbe infatti già creare 61 00:03:11,640 --> 00:03:14,090 ‫una mappa e visualizzarla sulla nostra pagina. 62 00:03:14,090 --> 00:03:17,760 ‫Questo perché il contenitore qui è impostato per mappare. 63 00:03:17,760 --> 00:03:20,260 ‫E ciò significa che metterà la 64 00:03:20,260 --> 00:03:23,270 ‫mappa su un elemento con l'ID della mappa. 65 00:03:23,270 --> 00:03:26,410 ‫Ecco perché qui, nel nostro tour, abbiamo 66 00:03:27,280 --> 00:03:29,010 ‫questo elemento qui, oh, 67 00:03:29,010 --> 00:03:30,003 ‫dov'è? 68 00:03:31,100 --> 00:03:34,760 ‫Quindi proprio qui, abbiamo un elemento con mappa ID. 69 00:03:34,760 --> 00:03:37,730 ‫Il motivo è che qui in Mapbox, abbiamo effettivamente 70 00:03:37,730 --> 00:03:39,390 ‫bisogno di un elemento 71 00:03:39,390 --> 00:03:41,940 ‫con un ID che possiamo specificare qui. 72 00:03:41,940 --> 00:03:43,920 ‫E l'impostazione predefinita è map, 73 00:03:43,920 --> 00:03:46,750 ‫quindi è così che l'ho chiamato in html. 74 00:03:46,750 --> 00:03:48,900 ‫Quindi abbiamo anche questo stile predefinito qui, 75 00:03:48,900 --> 00:03:50,700 ‫che cambieremo in un secondo. 76 00:03:52,070 --> 00:03:54,393 ‫Per ora, torniamo alle nostre 77 00:03:56,530 --> 00:03:59,720 ‫istruzioni qui, e quindi dice che abbiamo finito qui. 78 00:03:59,720 --> 00:04:02,707 ‫Ma ora torniamo effettivamente al nostro 79 00:04:02,707 --> 00:04:06,185 ‫account e creiamo quel token di cui abbiamo 80 00:04:06,185 --> 00:04:09,650 ‫bisogno per poter effettivamente accedere a Mapbox. 81 00:04:09,650 --> 00:04:11,460 ‫Per favore, non limitarti a 82 00:04:11,460 --> 00:04:13,990 ‫copiare il mio token, non funzionerà bene per te. 83 00:04:13,990 --> 00:04:16,270 ‫Ma invece, creane uno tuo. 84 00:04:16,270 --> 00:04:19,363 ‫Puoi semplicemente creare un nuovo nome per esso. 85 00:04:21,760 --> 00:04:23,713 ‫Chiamiamola semplicemente in questo modo. 86 00:04:26,010 --> 00:04:28,200 ‫E poi crea il token qui. 87 00:04:28,200 --> 00:04:29,550 ‫Quindi inserisci la 88 00:04:32,040 --> 00:04:35,640 ‫tua password e quindi puoi utilizzare quel token. 89 00:04:35,640 --> 00:04:38,150 ‫Quindi, ancora una volta, non sono sicuro che abbia 90 00:04:38,150 --> 00:04:40,860 ‫già creato questo token per te o se avessi davvero 91 00:04:40,860 --> 00:04:42,360 ‫bisogno di crearne uno nuovo. 92 00:04:42,360 --> 00:04:46,500 ‫Ad ogni modo, è anche bello avere un token per ogni progetto, 93 00:04:46,500 --> 00:04:47,820 ‫in modo da 94 00:04:47,820 --> 00:04:50,668 ‫poter limitare quel token solo a quel progetto. 95 00:04:50,668 --> 00:04:54,160 ‫Ho creato il mio account qui molto tempo fa, e quindi 96 00:04:54,160 --> 00:04:57,530 ‫non sono davvero sicuro, ancora una volta, di come abbia 97 00:04:57,530 --> 00:05:01,073 ‫funzionato, ma comunque, avendo quel token ora dovresti essere a posto. 98 00:05:03,730 --> 00:05:07,883 ‫In effetti, ora dovrebbe già visualizzare la nostra mappa predefinita. 99 00:05:09,250 --> 00:05:13,990 ‫Quindi ricarichiamo, e infatti questa è la nostra mappa predefinita. 100 00:05:13,990 --> 00:05:15,960 ‫Non sembra molto carino, beh, possiamo 101 00:05:15,960 --> 00:05:17,313 ‫ingrandire, ma in realtà 102 00:05:19,390 --> 00:05:21,620 ‫lo stile non è poi così carino 103 00:05:21,620 --> 00:05:24,110 ‫e non si adatta molto al nostro sito 104 00:05:24,110 --> 00:05:25,090 ‫Web e, 105 00:05:25,090 --> 00:05:27,198 ‫naturalmente, non abbiamo nemmeno le nostre posizioni 106 00:05:27,198 --> 00:05:29,627 ‫tracciate da nessuna parte per il carta geografica. 107 00:05:29,627 --> 00:05:33,700 ‫E quindi ora pensiamo a tutto questo. 108 00:05:33,700 --> 00:05:35,914 ‫Torniamo a Mapbox, e 109 00:05:35,914 --> 00:05:38,783 ‫ora entriamo nel nostro studio di progettazione. 110 00:05:40,280 --> 00:05:42,900 ‫Facciamo semplicemente clic qui su "inizia a progettare una 111 00:05:42,900 --> 00:05:44,720 ‫mappa" o ancora, se il tuo 112 00:05:44,720 --> 00:05:46,200 ‫sito web ha un 113 00:05:46,200 --> 00:05:49,313 ‫aspetto leggermente diverso a questo punto, cerca lo studio di progettazione. 114 00:05:50,680 --> 00:05:53,093 ‫Forse si presenta da qualche parte qui. 115 00:05:56,220 --> 00:05:57,433 ‫Quindi proviamolo. 116 00:06:01,560 --> 00:06:04,330 ‫Qui possiamo davvero fare qualsiasi cosa riguardo 117 00:06:04,330 --> 00:06:07,010 ‫alla progettazione di una mappa. 118 00:06:07,010 --> 00:06:10,340 ‫In realtà, questo non è proprio quello che mi 119 00:06:10,340 --> 00:06:13,670 ‫aspettavo, perché è un po' troppo complesso cambiare 120 00:06:13,670 --> 00:06:15,090 ‫tutte queste cose 121 00:06:15,090 --> 00:06:18,670 ‫qui, ma ci sono alcuni stili predefiniti, ah sì, questo 122 00:06:18,670 --> 00:06:20,670 ‫è quello che stavo cercando. 123 00:06:21,520 --> 00:06:23,640 ‫Creiamo un nuovo stile 124 00:06:23,640 --> 00:06:27,790 ‫qui, e poi da lì possiamo scegliere un tipo predefinito. 125 00:06:27,790 --> 00:06:30,483 ‫E davvero quello che voglio è questo stile leggero. 126 00:06:31,400 --> 00:06:34,560 ‫Quindi crea, e in realtà sono molto contento del 127 00:06:34,560 --> 00:06:37,330 ‫modo in cui appare fuori dagli schemi. 128 00:06:37,330 --> 00:06:39,972 ‫Ora, per qualche ragione non vedo 129 00:06:39,972 --> 00:06:43,937 ‫nulla qui, ok, è perché è stato zoomato nel mare. 130 00:06:43,937 --> 00:06:48,937 ‫Ma comunque, ora ingrandiamo da qualche parte qui, e 131 00:06:50,570 --> 00:06:53,830 ‫penso che sia già abbastanza 132 00:06:53,830 --> 00:06:57,407 ‫carino, quindi aggiungiamo solo un nome qui, 133 00:06:57,407 --> 00:06:58,550 ‫quindi 134 00:07:00,790 --> 00:07:04,968 ‫lo chiamo Registrazione video di Natour perché ho 135 00:07:04,968 --> 00:07:08,430 ‫già uno stile di Natour, ma 136 00:07:08,430 --> 00:07:11,724 ‫tu ovviamente puoi chiamarlo come vuoi. 137 00:07:11,724 --> 00:07:16,340 ‫Confermiamo il nome qui, torniamo indietro, e poi 138 00:07:16,340 --> 00:07:19,230 ‫qui su condividi e usa. 139 00:07:19,230 --> 00:07:23,393 ‫E quello che vogliamo non è condividere, ma invece usare. 140 00:07:23,393 --> 00:07:28,393 ‫Da qualche parte quaggiù, dovremmo vedere il nostro URL di stile, 141 00:07:28,640 --> 00:07:30,960 ‫e quindi, sì, è quello. 142 00:07:30,960 --> 00:07:34,877 ‫Quindi deve essere un URL che fondamentalmente inizia con Mapbox. 143 00:07:37,480 --> 00:07:40,630 ‫Copiamolo, torniamo indietro e poi sostituiamo lo stile 144 00:07:40,630 --> 00:07:43,640 ‫che abbiamo qui come predefinito, con quello 145 00:07:43,640 --> 00:07:45,363 ‫che abbiamo appena creato. 146 00:07:47,699 --> 00:07:49,363 ‫Dagli un 147 00:07:50,750 --> 00:07:51,630 ‫salvataggio 148 00:07:54,060 --> 00:07:56,650 ‫e sì, sembra molto meglio. 149 00:07:56,650 --> 00:07:59,650 ‫Ed è esattamente lo stile che abbiamo appena creato. 150 00:07:59,650 --> 00:08:02,473 ‫Quindi ora possiamo ingrandire, rimpicciolire o 151 00:08:02,473 --> 00:08:04,830 ‫addirittura viceversa, possiamo spostare 152 00:08:04,830 --> 00:08:07,433 ‫la mappa dove vogliamo e 153 00:08:08,964 --> 00:08:13,136 ‫possiamo anche definire un sacco di proprietà, di opzioni 154 00:08:13,136 --> 00:08:15,123 ‫per questa mappa. 155 00:08:15,960 --> 00:08:17,810 ‫In questo momento, ogni volta che 156 00:08:17,810 --> 00:08:19,230 ‫carichiamo la mappa, sembra 157 00:08:19,230 --> 00:08:21,510 ‫sempre la stessa, sempre centrata qui a Boston. 158 00:08:21,510 --> 00:08:24,230 ‫Ma possiamo cambiarlo specificando il centro 159 00:08:25,720 --> 00:08:26,803 ‫qui. 160 00:08:28,600 --> 00:08:31,580 ‫E quindi dobbiamo passare in un array di due coordinate. 161 00:08:31,580 --> 00:08:34,610 ‫Prendiamo effettivamente quello di Los Angeles che 162 00:08:34,610 --> 00:08:37,473 ‫abbiamo usato prima in Postman, quindi 163 00:08:42,356 --> 00:08:43,189 ‫esattamente 164 00:08:48,210 --> 00:08:51,870 ‫questo, ma, in realtà, Mapbox è esattamente come 165 00:08:51,870 --> 00:08:55,200 ‫MongoDB, nell'aspetto che richiede prima una longitudine e 166 00:08:55,200 --> 00:08:56,603 ‫poi la latitudine. 167 00:08:58,270 --> 00:09:00,020 ‫Dobbiamo cambiarli qui intorno. 168 00:09:02,925 --> 00:09:05,363 ‫E diamo un'occhiata a cosa otteniamo. 169 00:09:07,330 --> 00:09:10,083 ‫E, beh, questo non ci porta da nessuna parte. 170 00:09:12,330 --> 00:09:15,953 ‫Specifichiamo anche qui un livello di zoom. 171 00:09:17,310 --> 00:09:18,400 ‫Diciamo quattro. 172 00:09:18,400 --> 00:09:19,843 ‫Forse questo lo risolve. 173 00:09:26,030 --> 00:09:29,153 ‫E in realtà, quella era questa illusione. 174 00:09:30,221 --> 00:09:33,150 ‫Quindi ci sono diversi livelli di zoom. 175 00:09:33,150 --> 00:09:35,820 ‫Ad esempio, possiamo provarne uno anche 176 00:09:35,820 --> 00:09:38,760 ‫qui, e questo dovrebbe essere molto più ingrandito, 177 00:09:38,760 --> 00:09:41,460 ‫o forse rimpicciolito, non ne sono proprio sicuro. 178 00:09:41,460 --> 00:09:45,040 ‫Ah, ok, quindi questo lo rimpicciolisce davvero del tutto. 179 00:09:45,040 --> 00:09:46,943 ‫Quindi diciamo 10 qui per esempio, 180 00:09:49,180 --> 00:09:51,430 ‫e come vedi mi piace molto 181 00:09:51,430 --> 00:09:53,320 ‫giocare con questo tipo 182 00:09:53,320 --> 00:09:57,360 ‫di cose, e sì, a 10 ora è davvero molto vicino. 183 00:09:57,360 --> 00:10:00,913 ‫Possiamo anche dire che vogliamo che non sia interattivo, 184 00:10:02,130 --> 00:10:04,400 ‫e quindi è molto semplice. 185 00:10:04,400 --> 00:10:07,683 ‫Impostiamo interattivo su false. 186 00:10:08,610 --> 00:10:10,610 ‫E poi fondamentalmente la tua 187 00:10:10,610 --> 00:10:13,823 ‫mappa sembrerà una semplice immagine sul tuo sito web. 188 00:10:15,960 --> 00:10:18,570 ‫Quindi, come vedi, non posso scorrere nulla qui 189 00:10:18,570 --> 00:10:20,650 ‫e non posso nemmeno spostarlo. 190 00:10:20,650 --> 00:10:22,955 ‫Quindi non c'è niente che posso fare ora. 191 00:10:22,955 --> 00:10:25,940 ‫E queste sono in realtà solo un paio di opzioni che 192 00:10:25,940 --> 00:10:26,803 ‫possiamo impostare. 193 00:10:29,010 --> 00:10:32,090 ‫In realtà torniamo qui 194 00:10:32,090 --> 00:10:36,093 ‫a Mapbox, alla documentazione ea Mapbox JavaScript. 195 00:10:39,160 --> 00:10:42,020 ‫Qui trovi tutta la documentazione per 196 00:10:42,020 --> 00:10:46,300 ‫tutto quello che puoi fare con la versione JavaScript di Mapbox. 197 00:10:46,300 --> 00:10:48,790 ‫Quello che volevo solo mostrarti è che le cose che 198 00:10:48,790 --> 00:10:51,240 ‫ti ho appena mostrato sono in realtà qui. 199 00:10:51,240 --> 00:10:53,550 ‫Quindi abbiamo il contenitore che abbiamo specificato, 200 00:10:53,550 --> 00:10:55,023 ‫abbiamo lo stile e 201 00:10:55,990 --> 00:10:57,970 ‫abbiamo davvero un sacco di cose. 202 00:10:57,970 --> 00:10:59,720 ‫Così interattivo, e se 203 00:10:59,720 --> 00:11:02,750 ‫vuoi puoi ovviamente giocare con tutti 204 00:11:02,750 --> 00:11:03,873 ‫questi. 205 00:11:05,192 --> 00:11:08,120 ‫Volevo solo mostrarti che è così 206 00:11:08,120 --> 00:11:11,400 ‫che puoi imparare altre cose su Mapbox. 207 00:11:11,400 --> 00:11:14,496 ‫Ora, in realtà non vogliamo niente di tutto questo. 208 00:11:14,496 --> 00:11:17,800 ‫Perché non vogliamo centrare la mappa da nessuna parte, 209 00:11:17,800 --> 00:11:20,490 ‫ma invece vogliamo che capisca automaticamente la 210 00:11:20,490 --> 00:11:24,551 ‫posizione della mappa in base ai nostri punti di posizione del tour. 211 00:11:24,551 --> 00:11:26,739 ‫Quello che faremo ora 212 00:11:26,739 --> 00:11:30,410 ‫è fondamentalmente mettere tutte le posizioni per un determinato tour 213 00:11:30,410 --> 00:11:32,660 ‫sulla mappa e quindi consentire alla 214 00:11:32,660 --> 00:11:36,180 ‫mappa di capire automaticamente quale parte della mappa dovrebbe 215 00:11:36,180 --> 00:11:39,280 ‫visualizzare per adattarsi correttamente a tutti questi punti. 216 00:11:39,280 --> 00:11:41,540 ‫La prima cosa che dobbiamo fare 217 00:11:41,540 --> 00:11:43,713 ‫è creare una variabile legata. 218 00:11:47,060 --> 00:11:52,060 ‫I limiti equivalgono a un nuovo Mapbox GL. limiti di longitudine latitude. 219 00:12:00,360 --> 00:12:03,320 ‫E abbiamo accesso a questo oggetto Mapbox perché 220 00:12:03,320 --> 00:12:05,520 ‫abbiamo incluso la libreria Mapbox all'inizio 221 00:12:05,520 --> 00:12:06,983 ‫della nostra pagina. 222 00:12:09,210 --> 00:12:10,113 ‫Proprio qui, 223 00:12:11,270 --> 00:12:12,883 ‫incluso questo script qui, 224 00:12:14,050 --> 00:12:15,760 ‫quindi questa libreria Mapbox, questo 225 00:12:15,760 --> 00:12:18,760 ‫è ciò che espone l'oggetto Mapbox GL, che possiamo 226 00:12:18,760 --> 00:12:21,193 ‫quindi utilizzare in tutto il nostro sito. 227 00:12:24,180 --> 00:12:26,870 ‫Questo oggetto di confine qui è 228 00:12:26,870 --> 00:12:29,589 ‫fondamentalmente l'area che verrà visualizzata sulla mappa. 229 00:12:29,589 --> 00:12:32,860 ‫Ora lo estenderemo a tutte le posizioni che si 230 00:12:32,860 --> 00:12:35,043 ‫trovano nel nostro array di posizioni. 231 00:12:35,043 --> 00:12:37,597 ‫E questo avrà un po' più senso una 232 00:12:37,597 --> 00:12:39,333 ‫volta che inizieremo a usarlo. 233 00:12:41,490 --> 00:12:44,050 ‫Esaminiamo ora tutte le nostre posizioni e aggiungiamo 234 00:12:44,050 --> 00:12:46,203 ‫un marcatore per ciascuna di esse. 235 00:12:48,150 --> 00:12:49,750 ‫Per ciascuno, 236 00:12:49,750 --> 00:12:52,313 ‫vediamo il blocco per le 237 00:12:54,840 --> 00:12:58,150 ‫posizioni, quindi qui vogliamo aggiungere un marcatore. 238 00:12:58,150 --> 00:13:00,160 ‫E per questo, in realtà abbiamo 239 00:13:00,160 --> 00:13:02,053 ‫bisogno di creare un nuovo elemento 240 00:13:04,228 --> 00:13:07,900 ‫html, a questo proposito, è davvero un po' di basso livello, ma 241 00:13:07,900 --> 00:13:09,780 ‫lo trovo davvero molto 242 00:13:09,780 --> 00:13:12,230 ‫carino, perché, in questo modo, abbiamo molto controllo 243 00:13:12,230 --> 00:13:15,110 ‫su ciò che sta effettivamente accadendo nella nostra mappa. 244 00:13:15,110 --> 00:13:17,070 ‫E quello che ti sto mostrando 245 00:13:17,070 --> 00:13:19,366 ‫qui è in realtà solo una piccola parte 246 00:13:19,366 --> 00:13:22,083 ‫di tutte le grandi cose che puoi fare con Mapbox. 247 00:13:23,525 --> 00:13:26,593 ‫Questo qui è solo un JavaScript 248 00:13:26,593 --> 00:13:28,928 ‫standard, quindi possiamo usare 249 00:13:28,928 --> 00:13:31,490 ‫create element per creare elementi. 250 00:13:31,490 --> 00:13:33,040 ‫Proprio come dice il 251 00:13:33,040 --> 00:13:35,490 ‫nome, e qui vogliamo creare un nuovo diff. 252 00:13:35,490 --> 00:13:38,653 ‫E vogliamo anche dare un nome alla classe e 253 00:13:44,700 --> 00:13:46,193 ‫impostarlo su marker. 254 00:13:47,945 --> 00:13:50,170 ‫Ed eccolo qui, è un punto e virgola. 255 00:13:50,170 --> 00:13:52,500 ‫E così nel CSS abbiamo effettivamente una 256 00:13:52,500 --> 00:13:54,313 ‫classe per questo marcatore. 257 00:13:57,140 --> 00:14:00,870 ‫Marker, qui vedi l'immagine di sfondo che è specificata, 258 00:14:00,870 --> 00:14:03,459 ‫che è questo pin verde qui. 259 00:14:03,459 --> 00:14:07,210 ‫Quella spilla che vedrai tra un secondo sulla mappa è in 260 00:14:07,210 --> 00:14:10,110 ‫realtà un'immagine personalizzata che ho disegnato io. 261 00:14:10,110 --> 00:14:13,070 ‫Non viene direttamente da Mapbox. 262 00:14:13,070 --> 00:14:16,500 ‫In questo modo, puoi davvero adattarlo al tuo stile e al 263 00:14:16,500 --> 00:14:17,333 ‫tuo marchio. 264 00:14:17,333 --> 00:14:21,733 ‫Ho anche definito la dimensione del marker qui, sì, 265 00:14:23,500 --> 00:14:25,363 ‫è davvero personalizzabile. 266 00:14:27,362 --> 00:14:32,335 ‫Ora creiamo effettivamente un nuovo marker all'interno di Mapbox 267 00:14:32,335 --> 00:14:37,257 ‫dicendo new Mapbox GL. marcatore. 268 00:14:40,230 --> 00:14:45,230 ‫E poi lì, passiamo l'elemento che abbiamo appena creato, quindi L, 269 00:14:45,400 --> 00:14:49,503 ‫e poi specifichiamo anche una proprietà di ancoraggio. 270 00:14:51,100 --> 00:14:52,090 ‫Che ho 271 00:14:53,440 --> 00:14:54,910 ‫messo in fondo qui. 272 00:14:54,910 --> 00:14:58,610 ‫E ciò significa che è la parte inferiore dell'elemento, e quindi 273 00:14:58,610 --> 00:15:01,230 ‫in questo caso la parte inferiore 274 00:15:01,230 --> 00:15:04,683 ‫di quel pin, che sarà posizionato nella posizione GPS esatta. 275 00:15:05,790 --> 00:15:07,710 ‫Potremmo anche metterlo al 276 00:15:07,710 --> 00:15:10,113 ‫centro, ma penso che abbia più 277 00:15:11,260 --> 00:15:13,690 ‫senso che, apriamo di nuovo quell'immagine, 278 00:15:13,690 --> 00:15:16,520 ‫penso che abbia più senso che questa fine 279 00:15:16,520 --> 00:15:19,110 ‫qui dell'immagine sia quella che punta davvero 280 00:15:19,110 --> 00:15:20,663 ‫all'esatta posizione GPS. 281 00:15:22,512 --> 00:15:26,040 ‫Questo è ciò che facciamo con questa proprietà di ancoraggio. 282 00:15:26,040 --> 00:15:27,680 ‫Quindi questo è il 283 00:15:27,680 --> 00:15:31,896 ‫marcatore, e ora, su quello, possiamo chiamare un paio di metodi. 284 00:15:31,896 --> 00:15:35,600 ‫Al momento, Mapbox non sa nulla delle coordinate GPS di 285 00:15:35,600 --> 00:15:36,635 ‫questo marker. 286 00:15:36,635 --> 00:15:39,250 ‫Non l'abbiamo impostato da nessuna parte. 287 00:15:39,250 --> 00:15:40,580 ‫Facciamolo ora, 288 00:15:40,580 --> 00:15:44,960 ‫quindi imposta longitudine, latitudine e uguale alla 289 00:15:44,960 --> 00:15:47,423 ‫posizione. coordinate. 290 00:15:49,364 --> 00:15:54,301 ‫Ricorda che questa è una matrice di longitudine e 291 00:15:54,301 --> 00:15:55,990 ‫latitudine forzata. 292 00:15:55,990 --> 00:15:59,471 ‫Questo è esattamente ciò che Mapbox si aspetta. 293 00:15:59,471 --> 00:16:02,540 ‫Giusto per essere sicuri di aver capito davvero, 294 00:16:02,540 --> 00:16:04,633 ‫diamo un'occhiata ai tour. 295 00:16:05,719 --> 00:16:09,670 ‫Di nuovo, ogni posizione ha queste proprietà di coordinate, ed è 296 00:16:09,670 --> 00:16:12,693 ‫da lì che ora stiamo leggendo le coordinate. 297 00:16:13,915 --> 00:16:16,323 ‫Posizione. coordinate. 298 00:16:18,040 --> 00:16:23,040 ‫E poi, infine, aggiungi a e poi la nostra variabile di mappa. 299 00:16:25,070 --> 00:16:28,850 ‫Quindi questa mappa qui è questa variabile di mappa in cui 300 00:16:28,850 --> 00:16:33,093 ‫abbiamo creato il nostro nuovo Mapbox. mappa proprio all'inizio. 301 00:16:34,507 --> 00:16:38,320 ‫E ora, tutto ciò che dobbiamo fare per finire, è 302 00:16:38,320 --> 00:16:40,463 ‫effettivamente estendere i nostri limiti. 303 00:16:41,490 --> 00:16:46,490 ‫Quindi limiti. estendere e anche con posizioni, o addirittura "loc", 304 00:16:48,540 --> 00:16:52,033 ‫che è la posizione corrente. coordinate. 305 00:16:56,310 --> 00:16:59,720 ‫Questa prima parte qui in realtà aggiunge il 306 00:16:59,720 --> 00:17:00,950 ‫marker, o 307 00:17:00,950 --> 00:17:03,120 ‫lo crea, rendiamolo ancora più 308 00:17:03,120 --> 00:17:04,310 ‫specifico, 309 00:17:08,550 --> 00:17:09,910 ‫crea marker quindi 310 00:17:11,500 --> 00:17:15,540 ‫aggiungi il marker e poi qui, estendi i limiti 311 00:17:18,600 --> 00:17:21,653 ‫della mappa per includere la posizione corrente. 312 00:17:22,624 --> 00:17:25,410 ‫Ma questo non è ancora abbastanza, perché ora facciamo 313 00:17:25,410 --> 00:17:27,850 ‫anche in modo che la mappa si 314 00:17:27,850 --> 00:17:29,560 ‫adatti effettivamente ai limiti. 315 00:17:29,560 --> 00:17:34,560 ‫Quindi mappa. adatta, non trova, ma adatta i limiti, e 316 00:17:39,310 --> 00:17:41,743 ‫quindi ovviamente il nostro oggetto limiti. 317 00:17:42,640 --> 00:17:43,473 ‫Wow. 318 00:17:43,473 --> 00:17:48,473 ‫Quindi, un sacco di lavoro solo per mettere alcuni indicatori sulla mappa. 319 00:17:48,530 --> 00:17:50,829 ‫Ma, ancora una volta, trovo davvero piacevole 320 00:17:50,829 --> 00:17:52,533 ‫lavorare con questa libreria. 321 00:17:53,840 --> 00:17:55,800 ‫E ora diamo un'occhiata e non 322 00:17:55,800 --> 00:17:58,450 ‫sono proprio sicuro che tutto sia andato bene qui. 323 00:18:00,430 --> 00:18:02,300 ‫E in realtà non è stato così, 324 00:18:02,300 --> 00:18:05,264 ‫quindi le nostre mappe non si trovano davvero da nessuna 325 00:18:05,264 --> 00:18:07,630 ‫parte, ingrandiamo un po' per vedere se sono 326 00:18:07,630 --> 00:18:09,083 ‫effettivamente da qualche parte e 327 00:18:10,049 --> 00:18:11,253 ‫non lo sono. 328 00:18:13,070 --> 00:18:15,220 ‫Diamo un'occhiata alla nostra console, 329 00:18:15,220 --> 00:18:17,883 ‫e in effetti c'è una sorta di errore. 330 00:18:18,910 --> 00:18:23,250 ‫Quindi lat, i limiti di longitudine non sono un costruttore, 331 00:18:23,250 --> 00:18:26,150 ‫e in effetti è il contrario. 332 00:18:26,150 --> 00:18:28,750 ‫Quindi di nuovo, Mapbox, proprio come MongoDB, si 333 00:18:28,750 --> 00:18:31,350 ‫aspetta che le coordinate siano prima la longitudine 334 00:18:31,350 --> 00:18:32,900 ‫e poi la latitudine. 335 00:18:32,900 --> 00:18:34,314 ‫Questo è ciò 336 00:18:34,314 --> 00:18:36,420 ‫che abbiamo qui in questo nome, e 337 00:18:36,420 --> 00:18:38,350 ‫quindi qui dovrebbe essere lo stesso. 338 00:18:38,350 --> 00:18:42,813 ‫Quindi longitudine, latitudine. 339 00:18:44,616 --> 00:18:47,193 ‫Proviamo di nuovo qui. 340 00:18:48,990 --> 00:18:51,360 ‫Ahh, ora funziona. 341 00:18:51,360 --> 00:18:52,900 ‫Molto bello. 342 00:18:52,900 --> 00:18:54,660 ‫Hai visto che bel zoom. 343 00:18:54,660 --> 00:18:57,290 ‫Questo è ciò che fa il metodo dei limiti di adattamento. 344 00:18:57,290 --> 00:19:00,370 ‫Quindi sposta e ingrandisce la mappa fino ai limiti 345 00:19:00,370 --> 00:19:03,000 ‫per adattarsi effettivamente ai nostri indicatori. 346 00:19:03,000 --> 00:19:07,180 ‫Ora, vedi che abbiamo questo tipo di altri elementi qui 347 00:19:07,180 --> 00:19:08,943 ‫sovrapposti alla nostra mappa. 348 00:19:08,943 --> 00:19:11,740 ‫E questo è dovuto a questo design che 349 00:19:11,740 --> 00:19:14,470 ‫ho creato con questi bordi qui. 350 00:19:14,470 --> 00:19:16,490 ‫Ma questo non è un problema 351 00:19:16,490 --> 00:19:20,323 ‫perché possiamo effettivamente specificare manualmente un po' di riempimento a questi limiti. 352 00:19:21,290 --> 00:19:23,860 ‫Possiamo passare un oggetto qui, quindi 353 00:19:23,860 --> 00:19:27,363 ‫diciamo 200 pixel in alto, 200 pixel in 354 00:19:30,430 --> 00:19:32,830 ‫basso, e poi 100 355 00:19:32,830 --> 00:19:35,273 ‫pixel a sinistra ea destra. 356 00:19:42,561 --> 00:19:45,100 ‫E non dobbiamo specificare i pixel qui, immagino 357 00:19:45,100 --> 00:19:47,883 ‫che sia solo io a scrivere così tanti CSS. 358 00:19:50,780 --> 00:19:52,053 ‫Proviamo di nuovo. 359 00:19:53,635 --> 00:19:55,440 ‫Oh, bella animazione zoom, 360 00:19:55,440 --> 00:19:58,023 ‫ma non ha rispettato molto le nostre impostazioni. 361 00:19:59,110 --> 00:20:02,850 ‫E in realtà, è perché questo non è corretto. 362 00:20:02,850 --> 00:20:05,180 ‫Quindi, dovremmo invece creare un oggetto, e 363 00:20:05,180 --> 00:20:08,150 ‫poi lì dentro dobbiamo specificare la proprietà padding, che 364 00:20:08,150 --> 00:20:09,673 ‫poi ha tutto questo. 365 00:20:10,920 --> 00:20:11,770 ‫Quindi facciamolo. 366 00:20:14,130 --> 00:20:14,963 ‫Imbottitura. 367 00:20:17,180 --> 00:20:18,013 ‫E ora, 368 00:20:19,020 --> 00:20:20,913 ‫taglia questo e mettilo lì. 369 00:20:23,970 --> 00:20:25,113 ‫Salvalo qui. 370 00:20:27,790 --> 00:20:28,883 ‫Un'altra volta. 371 00:20:31,750 --> 00:20:34,310 ‫Amico, c'è ancora qualcosa che non va qui. 372 00:20:34,310 --> 00:20:35,840 ‫Che cos'è? 373 00:20:35,840 --> 00:20:39,560 ‫Ahh, e ovviamente questo codice non dovrebbe essere qui. 374 00:20:39,560 --> 00:20:43,913 ‫Non è nell'estensione, è davvero qui nei limiti. 375 00:20:45,060 --> 00:20:47,633 ‫Quindi questo è in realtà dove ha senso essere. 376 00:20:52,620 --> 00:20:57,333 ‫Risolviamo questo codice qui, e ora ha senso. 377 00:20:59,144 --> 00:21:00,890 ‫Ovviamente deve essere nei limiti 378 00:21:00,890 --> 00:21:03,460 ‫di adattamento, che alla fine è la funzione 379 00:21:03,460 --> 00:21:05,750 ‫che esegue lo spostamento e lo zoom. 380 00:21:05,750 --> 00:21:07,430 ‫È lì che dovrebbe essere 381 00:21:07,430 --> 00:21:10,400 ‫il riempimento e potremmo specificare un sacco di altre opzioni. 382 00:21:10,400 --> 00:21:12,320 ‫E ancora, se sei 383 00:21:12,320 --> 00:21:14,713 ‫interessato a questo, dai un'occhiata alla documentazione. 384 00:21:15,810 --> 00:21:17,680 ‫Quindi un terzo tentativo 385 00:21:17,680 --> 00:21:19,730 ‫qui, speriamo questa volta di 386 00:21:19,730 --> 00:21:23,520 ‫aver capito bene, ahh, e sì, sembra molto meglio. 387 00:21:23,520 --> 00:21:26,980 ‫Ma ci sono ancora alcune cose che possiamo migliorare qui, perché 388 00:21:26,980 --> 00:21:29,680 ‫in questo momento non possiamo nemmeno sapere quale 389 00:21:29,680 --> 00:21:31,670 ‫sia ciascuna di queste posizioni. 390 00:21:31,670 --> 00:21:35,290 ‫E quindi in realtà vogliamo una sorta di pop-up 391 00:21:35,290 --> 00:21:38,373 ‫qui, che mostri le informazioni sulla posizione. 392 00:21:41,110 --> 00:21:45,043 ‫Non solo il marcatore, ma vogliamo anche aggiungere un pop-up. 393 00:21:49,270 --> 00:21:52,630 ‫E quindi è un po' simile all'aggiunta del marker, 394 00:21:52,630 --> 00:21:57,133 ‫quindi diciamo nuovo Mapbox GL. apparire. 395 00:21:59,800 --> 00:22:02,300 ‫Quindi, proprio come prima, specifichiamo le coordinate 396 00:22:02,300 --> 00:22:03,623 ‫di quel pop-up. 397 00:22:05,940 --> 00:22:07,523 ‫Quindi quello proprio qui. 398 00:22:08,610 --> 00:22:11,900 ‫Quindi abbiamo anche bisogno di definire l'html per questo 399 00:22:11,900 --> 00:22:14,990 ‫pop-up, e lo farò ora usando il metodo 400 00:22:14,990 --> 00:22:17,730 ‫set html, perché questo mi consentirà di 401 00:22:17,730 --> 00:22:19,950 ‫aggiungere del contenuto direttamente 402 00:22:19,950 --> 00:22:24,353 ‫in quell'html, quindi imposta html e poi un stringa modello qui. 403 00:22:26,040 --> 00:22:28,030 ‫Voglio che questo sia un 404 00:22:28,030 --> 00:22:30,760 ‫paragrafo e le informazioni che voglio visualizzare qui 405 00:22:30,760 --> 00:22:33,630 ‫sono il giorno in cui saremo in questa 406 00:22:33,630 --> 00:22:36,250 ‫posizione, e poi il nome della posizione. 407 00:22:36,250 --> 00:22:39,730 ‫Quindi, in pratica, voglio visualizzare il giorno, ecco 408 00:22:39,730 --> 00:22:43,300 ‫perché abbiamo creato queste proprietà del giorno qui, e 409 00:22:43,300 --> 00:22:44,753 ‫poi la descrizione. 410 00:22:50,170 --> 00:22:54,520 ‫Giorno, e poi luogo, ricorda quale è l'indie della posizione 411 00:22:54,520 --> 00:22:56,623 ‫corrente per ogni ciclo, e 412 00:22:57,860 --> 00:22:58,853 ‫poi giorno, 413 00:23:01,720 --> 00:23:03,543 ‫luogo. descrizione. 414 00:23:06,870 --> 00:23:07,980 ‫Salvalo qui, 415 00:23:07,980 --> 00:23:10,210 ‫ora sembra molto più carino. 416 00:23:10,210 --> 00:23:14,010 ‫E poi, proprio come con l'altro, dobbiamo 417 00:23:14,010 --> 00:23:19,010 ‫anche aggiungere a, e poi la nostra variabile di mappa. 418 00:23:22,130 --> 00:23:24,380 ‫E questo non sembrerà perfetto, 419 00:23:24,380 --> 00:23:26,730 ‫perché dobbiamo specificare alcune opzioni, ma a 420 00:23:26,730 --> 00:23:29,083 ‫questo punto volevo comunque mostrarti il risultato. 421 00:23:32,070 --> 00:23:35,100 ‫E così, ora vedi che in realtà si 422 00:23:35,100 --> 00:23:36,453 ‫sovrappongono ai marcatori. 423 00:23:37,920 --> 00:23:41,083 ‫Possiamo effettivamente risolverlo usando una proprietà offset. 424 00:23:43,560 --> 00:23:46,883 ‫Passiamo queste opzioni proprio qui nel nuovo pop-up. 425 00:23:48,396 --> 00:23:49,770 ‫Diciamo 426 00:23:51,390 --> 00:23:54,940 ‫offset di 30 pixel. 427 00:23:54,940 --> 00:23:57,081 ‫E ho anche 428 00:23:57,081 --> 00:23:59,840 ‫notato che abbiamo un po' troppa 429 00:23:59,840 --> 00:24:04,840 ‫imbottitura nella parte inferiore, quindi riduciamola a 150 e ripetiamo l'operazione. 430 00:24:09,610 --> 00:24:13,190 ‫E quindi, questo sembra piuttosto carino, penso. 431 00:24:13,190 --> 00:24:15,750 ‫Quindi chi ora dà un'occhiata 432 00:24:15,750 --> 00:24:18,609 ‫alla nostra pagina, può vedere molto rapidamente 433 00:24:18,609 --> 00:24:21,533 ‫che tipo di itinerario sarà in questo tour. 434 00:24:21,533 --> 00:24:23,740 ‫E se ci sono 435 00:24:23,740 --> 00:24:26,423 ‫troppe informazioni, possiamo anche chiudere questi pop-up. 436 00:24:27,680 --> 00:24:30,700 ‫E potremmo davvero aggiungere tutti i tipi di cose a questa mappa. 437 00:24:30,700 --> 00:24:33,440 ‫Ad esempio, potremmo creare questa linea qui tra 438 00:24:33,440 --> 00:24:35,250 ‫questi punti e unirli 439 00:24:35,250 --> 00:24:38,570 ‫insieme, come una linea verde qui o qualcosa del genere. 440 00:24:38,570 --> 00:24:41,096 ‫Oppure potremmo anche visualizzare il percorso 441 00:24:41,096 --> 00:24:42,820 ‫reale da un 442 00:24:42,820 --> 00:24:45,350 ‫punto all'altro utilizzando fondamentalmente le indicazioni, 443 00:24:45,350 --> 00:24:47,610 ‫ma manteniamo le cose semplici qui. 444 00:24:47,610 --> 00:24:49,990 ‫L'unica cosa che mi resta da 445 00:24:49,990 --> 00:24:53,430 ‫fare qui è disabilitare effettivamente la funzionalità di zoom. 446 00:24:53,430 --> 00:24:55,320 ‫Perché in questo momento, 447 00:24:55,320 --> 00:24:57,230 ‫diciamo che stiamo ingrandendo questa 448 00:24:57,230 --> 00:24:59,400 ‫pagina, o in realtà se stiamo 449 00:24:59,400 --> 00:25:01,450 ‫scorrendo su questa pagina, e 450 00:25:01,450 --> 00:25:03,740 ‫quindi una volta che raggiungiamo questo 451 00:25:03,740 --> 00:25:08,740 ‫qui, e poi continuiamo a scorrere qui, allora scorriamo la mappa invece della pagina. 452 00:25:09,034 --> 00:25:12,060 ‫Non è una buona esperienza utente, quindi tutto 453 00:25:12,060 --> 00:25:13,673 ‫ciò che dobbiamo fare 454 00:25:13,673 --> 00:25:17,110 ‫ora è disabilitare sostanzialmente la funzionalità di scorrimento su 455 00:25:17,110 --> 00:25:18,410 ‫questa mappa. 456 00:25:18,410 --> 00:25:22,880 ‫Consentiremo comunque alle persone di spostarsi in questo modo, ma 457 00:25:22,880 --> 00:25:24,883 ‫lo zoom sarà disabilitato. 458 00:25:26,200 --> 00:25:29,463 ‫Andiamo qui sulla nostra mappa e aggiungiamola. 459 00:25:30,743 --> 00:25:33,760 ‫E non stiamo usando le impostazioni predefinite interattive, perché non 460 00:25:33,760 --> 00:25:35,970 ‫potremmo nemmeno fare una panoramica della mappa. 461 00:25:35,970 --> 00:25:39,317 ‫Ma ancora una volta, questo dovrebbe almeno essere consentito. 462 00:25:39,317 --> 00:25:43,680 ‫L'opzione che sto impostando qui è scroll zoom false. 463 00:25:46,580 --> 00:25:49,202 ‫E ancora, per tutte le possibili 464 00:25:49,202 --> 00:25:50,888 ‫opzioni che potresti 465 00:25:50,888 --> 00:25:55,190 ‫impostare qui, vai avanti e dai un'occhiata al riferimento. 466 00:25:55,190 --> 00:25:58,730 ‫E così ora, quando mettiamo il mouse qui e scorriamo, 467 00:25:58,730 --> 00:26:01,463 ‫non cambia il livello di zoom. 468 00:26:03,040 --> 00:26:04,530 ‫Perfetto. 469 00:26:04,530 --> 00:26:09,060 ‫Possiamo ancora eseguire la panoramica, quindi penso che sia davvero carino ora. 470 00:26:09,060 --> 00:26:12,083 ‫Proviamolo in un altro. 471 00:26:12,920 --> 00:26:14,653 ‫Diciamo qui l'escursionista della foresta. 472 00:26:17,290 --> 00:26:19,450 ‫E così, funziona ancora. 473 00:26:19,450 --> 00:26:22,130 ‫E questi qui sono una specie di 474 00:26:22,130 --> 00:26:25,553 ‫sovrapposizione, ma nessun problema, possiamo sempre chiuderli se vogliamo. 475 00:26:28,120 --> 00:26:30,713 ‫Diamo un'occhiata qui per esempio, esploratore del mare. 476 00:26:32,420 --> 00:26:33,440 ‫E se 477 00:26:33,440 --> 00:26:35,231 ‫siamo abbastanza veloci, possiamo persino vedere 478 00:26:35,231 --> 00:26:38,100 ‫l'animazione dello zoom che sposta la mappa in quella posizione. 479 00:26:38,100 --> 00:26:39,890 ‫Ok, perfetto. 480 00:26:39,890 --> 00:26:42,680 ‫Quindi spero che tu sia stato in grado 481 00:26:42,680 --> 00:26:46,670 ‫di seguire davvero questo esempio con tutto ciò che abbiamo fatto in Mapbox. 482 00:26:46,670 --> 00:26:49,060 ‫Ora, nel caso in cui qualcosa non 483 00:26:49,060 --> 00:26:50,330 ‫funzionasse, assicurati di 484 00:26:50,330 --> 00:26:51,863 ‫utilizzare una versione simile 485 00:26:52,870 --> 00:26:56,500 ‫alla mia, quindi intendo una versione simile della libreria Mapbox. 486 00:26:56,500 --> 00:26:59,403 ‫Che nel mio caso qui è la versione 0. 54. 487 00:27:00,870 --> 00:27:04,363 ‫Il tuo probabilmente non dovrebbe essere 1. qualcosa. 488 00:27:05,250 --> 00:27:06,600 ‫Quindi, se stai guardando 489 00:27:06,600 --> 00:27:10,430 ‫questo video molto tempo dopo questa registrazione e hai un V1 qui, 490 00:27:10,430 --> 00:27:14,891 ‫allora vai avanti e cambialo in 0. qualcosa, in modo che 491 00:27:14,891 --> 00:27:18,213 ‫fondamentalmente non ci siano cambiamenti di rottura lì. 492 00:27:19,242 --> 00:27:24,242 ‫Ad ogni modo, con questo, in realtà concludiamo la nostra pagina del tour, 493 00:27:24,560 --> 00:27:27,140 ‫e quindi non abbiamo più bisogno 494 00:27:27,140 --> 00:27:30,140 ‫di niente di tutto questo, c'è anche 495 00:27:30,140 --> 00:27:34,740 ‫la mappa, e quindi questa parte del sito web è effettivamente finita. 496 00:27:34,740 --> 00:27:35,573 ‫Stupendo. 497 00:27:35,573 --> 00:27:38,660 ‫Congratulazioni per averlo reso realtà, per aver iniziato 498 00:27:38,660 --> 00:27:42,200 ‫davvero a costruire questo bellissimo sito Web utilizzando tutte 499 00:27:42,200 --> 00:27:44,200 ‫queste incredibili tecnologie che hai 500 00:27:44,200 --> 00:27:45,663 ‫imparato finora.