1 00:00:00,780 --> 00:00:04,163 ‫-: Sekarang mari kita lanjutkan membangun integrasi peta kita. 2 00:00:05,720 --> 00:00:08,637 ‫Jadi sekarang mari kita benar-benar menuju ke Mapbox. 3 00:00:11,036 --> 00:00:15,090 ‫Jadi, saya menggunakan Mapbox daripada Google Maps sekarang dan itu 4 00:00:15,090 --> 00:00:16,710 ‫karena beberapa waktu 5 00:00:16,710 --> 00:00:19,260 ‫lalu, Google Maps mulai benar-benar membutuhkan 6 00:00:19,260 --> 00:00:21,300 ‫kartu kredit dari Anda untuk 7 00:00:21,300 --> 00:00:23,220 ‫dapat menggunakan Google Maps. 8 00:00:23,220 --> 00:00:26,640 ‫Dan menurut saya itu bukan ide yang bagus untuk kursus 9 00:00:26,640 --> 00:00:29,160 ‫seperti ini dan, sebenarnya, saya juga 10 00:00:29,160 --> 00:00:33,723 ‫sangat menyukai Mapbox, jadi, saya pikir itu sempurna untuk kita gunakan dalam kursus ini. 11 00:00:35,500 --> 00:00:37,720 ‫Mereka juga memiliki dokumentasi yang sangat baik 12 00:00:37,720 --> 00:00:40,130 ‫yang akan kita coba sebentar lagi di sini. 13 00:00:40,130 --> 00:00:43,330 ‫Tapi untuk sekarang, mari kita mulai dan buat akun baru. 14 00:00:43,330 --> 00:00:45,623 ‫Jadi tekan saja di sini untuk mulai membangun. 15 00:00:48,208 --> 00:00:51,960 ‫Dan kemudian, tentu saja, buat akun gratis Anda. 16 00:00:51,960 --> 00:00:54,370 ‫Saya sudah punya satu dan jadi, 17 00:00:54,370 --> 00:00:58,200 ‫cukup jeda video pada saat ini untuk membuat akun itu. 18 00:00:58,200 --> 00:01:00,210 ‫Dan setelah membuat akun Anda, 19 00:01:00,210 --> 00:01:02,960 ‫Anda akan mendarat di halaman yang terlihat seperti ini. 20 00:01:02,960 --> 00:01:05,009 ‫Sekarang pada saat Anda menonton 21 00:01:05,009 --> 00:01:06,820 ‫video ini, halaman ini 22 00:01:06,820 --> 00:01:09,430 ‫di sini mungkin, tentu saja, telah berubah, 23 00:01:09,430 --> 00:01:11,020 ‫dan mungkin telah 24 00:01:11,020 --> 00:01:13,900 ‫berubah, tetapi yang perlu kita lakukan sekarang 25 00:01:13,900 --> 00:01:17,281 ‫adalah menemukan tautan yang mengatakan sesuatu seperti ini, jadi 26 00:01:17,281 --> 00:01:21,850 ‫instal pengembangan perangkat lunak peta kit, jadi ini di sini, atau juga 27 00:01:21,850 --> 00:01:24,455 ‫mengintegrasikan Mapbox, yang seharusnya hampir sama. 28 00:01:24,455 --> 00:01:29,025 ‫Jadi saya akan klik di sini untuk menginstal peta untuk JavaScript. 29 00:01:29,025 --> 00:01:30,720 ‫Dan yang akan kita 30 00:01:30,720 --> 00:01:33,100 ‫lakukan di sini adalah menggunakan CDN Mapbox 31 00:01:33,100 --> 00:01:35,050 ‫jadi jaringan pengiriman konten dan 32 00:01:35,050 --> 00:01:36,500 ‫untuk saat ini 33 00:01:36,500 --> 00:01:38,503 ‫setidaknya bukan bundler modul NPM. 34 00:01:40,230 --> 00:01:43,500 ‫Jadi langkah pertama, seperti yang dikatakan di sini, 35 00:01:43,500 --> 00:01:47,941 ‫adalah memasukkan file-file ini di sini dan ke file HTML yang dimiliki. 36 00:01:47,941 --> 00:01:51,121 ‫Dan di situlah kita sekarang membutuhkan 37 00:01:51,121 --> 00:01:54,663 ‫teknik kepala ekstensi yang kita miliki sebelumnya. 38 00:01:56,970 --> 00:01:58,860 ‫Dan di situlah kita 39 00:01:58,860 --> 00:02:01,293 ‫sekarang benar-benar membutuhkan teknik perpanjangan kepala. 40 00:02:02,443 --> 00:02:04,060 ‫Di sini, di 41 00:02:04,060 --> 00:02:07,690 ‫tur, ingat bagaimana kami menghilangkan ini dari kepala, sebenarnya. 42 00:02:07,690 --> 00:02:10,550 ‫Tapi sekarang kita masih membutuhkan beberapa hal yang 43 00:02:10,550 --> 00:02:12,940 ‫perlu kita tambahkan ke kepala. 44 00:02:12,940 --> 00:02:16,533 ‫Dan begitulah skrip ini, dan juga lembar gaya ini. 45 00:02:17,570 --> 00:02:19,833 ‫Mari kita cepat menerjemahkan ini di sini ke pug. 46 00:02:26,250 --> 00:02:28,533 ‫Dan tautannya juga, dan 47 00:02:31,470 --> 00:02:33,300 ‫hanya itu. 48 00:02:33,300 --> 00:02:34,663 ‫Mari kita singkirkan 49 00:02:35,930 --> 00:02:39,370 ‫bagian ini, dan mari kembali ke langkah berikutnya di sini. 50 00:02:39,370 --> 00:02:43,720 ‫Selanjutnya, kita perlu menyalin kode JavaScript ini di sini, 51 00:02:43,720 --> 00:02:45,885 ‫ke dalam file kita. 52 00:02:45,885 --> 00:02:48,050 ‫Dan untuk naskah kita, tentu saja. 53 00:02:48,050 --> 00:02:51,140 ‫Jadi di sini ke dalam mapbox. js. 54 00:02:51,140 --> 00:02:53,860 ‫Sekarang Anda mungkin tidak akan memiliki token 55 00:02:53,860 --> 00:02:55,360 ‫akses ini pada 56 00:02:55,360 --> 00:02:58,180 ‫saat ini, dan karena itu Anda harus sudah 57 00:02:58,180 --> 00:03:01,343 ‫melakukannya, atau saya akan menunjukkan cara melakukannya sebentar lagi. 58 00:03:02,586 --> 00:03:05,230 ‫Mari kita indentasi bagian ini di sini. 59 00:03:05,230 --> 00:03:09,510 ‫Dengan ini, kita sebenarnya sudah siap. 60 00:03:09,510 --> 00:03:11,640 ‫Ini seharusnya sudah membuat 61 00:03:11,640 --> 00:03:14,090 ‫peta dan menampilkannya di halaman kita. 62 00:03:14,090 --> 00:03:17,760 ‫Itu karena wadah di sini diatur ke peta. 63 00:03:17,760 --> 00:03:20,260 ‫Dan itu artinya akan 64 00:03:20,260 --> 00:03:23,270 ‫menempatkan peta pada elemen dengan ID peta. 65 00:03:23,270 --> 00:03:26,410 ‫Itu sebabnya di sini, dalam tur kami, kami memiliki elemen 66 00:03:27,280 --> 00:03:29,010 ‫ini di sini, oh, di 67 00:03:29,010 --> 00:03:30,003 ‫mana itu? 68 00:03:31,100 --> 00:03:34,760 ‫Jadi di sini, kami memiliki elemen dengan peta ID. 69 00:03:34,760 --> 00:03:37,730 ‫Alasannya adalah bahwa di sini di Mapbox, kita sebenarnya 70 00:03:37,730 --> 00:03:39,390 ‫membutuhkan elemen dengan ID 71 00:03:39,390 --> 00:03:41,940 ‫yang kemudian dapat kita tentukan di sini. 72 00:03:41,940 --> 00:03:43,920 ‫Dan defaultnya adalah map, 73 00:03:43,920 --> 00:03:46,750 ‫dan begitulah saya menyebutnya dalam html. 74 00:03:46,750 --> 00:03:48,900 ‫Kemudian kita juga memiliki gaya default di sini, 75 00:03:48,900 --> 00:03:50,700 ‫yang akan kita ubah dalam sedetik. 76 00:03:52,070 --> 00:03:54,393 ‫Untuk saat ini, mari kembali ke instruksi 77 00:03:56,530 --> 00:03:59,720 ‫kita di sini, dan dikatakan bahwa kita sudah selesai di sini. 78 00:03:59,720 --> 00:04:02,707 ‫Tapi sekarang mari kita kembali 79 00:04:02,707 --> 00:04:06,185 ‫ke akun kita dan membuat token yang 80 00:04:06,185 --> 00:04:09,650 ‫kita butuhkan agar dapat benar-benar mengakses Mapbox. 81 00:04:09,650 --> 00:04:11,460 ‫Tolong jangan hanya menyalin token 82 00:04:11,460 --> 00:04:13,990 ‫saya, itu tidak akan bekerja dengan baik untuk Anda. 83 00:04:13,990 --> 00:04:16,270 ‫Tapi sebaliknya, buat sendiri. 84 00:04:16,270 --> 00:04:19,363 ‫Anda hanya dapat membuat nama baru untuk itu. 85 00:04:21,760 --> 00:04:23,713 ‫Mari kita menyebutnya sesuatu seperti ini. 86 00:04:26,010 --> 00:04:28,200 ‫Dan kemudian buat token di sini. 87 00:04:28,200 --> 00:04:29,550 ‫Kemudian Anda memasukkan 88 00:04:32,040 --> 00:04:35,640 ‫kata sandi Anda, dan Anda dapat menggunakan token itu. 89 00:04:35,640 --> 00:04:38,150 ‫Jadi, sekali lagi, saya tidak yakin apakah token 90 00:04:38,150 --> 00:04:40,860 ‫ini sudah dibuat untuk Anda, atau apakah Anda benar-benar 91 00:04:40,860 --> 00:04:42,360 ‫perlu membuat token baru. 92 00:04:42,360 --> 00:04:46,500 ‫Bagaimanapun, itu juga bagus untuk memiliki satu token untuk setiap proyek, 93 00:04:46,500 --> 00:04:47,820 ‫sehingga Anda kemudian 94 00:04:47,820 --> 00:04:50,668 ‫dapat membatasi token itu hanya untuk proyek itu. 95 00:04:50,668 --> 00:04:54,160 ‫Saya membuat akun saya di sini sejak lama, jadi saya 96 00:04:54,160 --> 00:04:57,530 ‫tidak begitu yakin, sekali lagi, bagaimana cara kerjanya, tetapi 97 00:04:57,530 --> 00:05:01,073 ‫bagaimanapun juga, dengan memiliki token itu, Anda seharusnya sudah siap. 98 00:05:03,730 --> 00:05:07,883 ‫Sebenarnya, ini seharusnya sudah menampilkan peta default kita. 99 00:05:09,250 --> 00:05:13,990 ‫Jadi mari kita muat ulang, dan memang, ini adalah peta default kita. 100 00:05:13,990 --> 00:05:15,960 ‫Itu tidak terlihat sangat bagus, 101 00:05:15,960 --> 00:05:17,313 ‫kami dapat memperbesar, 102 00:05:19,390 --> 00:05:21,620 ‫tapi sungguh, gayanya tidak terlalu bagus, 103 00:05:21,620 --> 00:05:24,110 ‫dan tidak terlalu cocok dengan situs web 104 00:05:24,110 --> 00:05:25,090 ‫kami, dan 105 00:05:25,090 --> 00:05:27,198 ‫tentu saja, kami juga tidak 106 00:05:27,198 --> 00:05:29,627 ‫memiliki lokasi kami yang diplot ke peta. 107 00:05:29,627 --> 00:05:33,700 ‫Dan sekarang mari kita mengurus semua itu. 108 00:05:33,700 --> 00:05:35,914 ‫Mari kembali ke Mapbox, dan 109 00:05:35,914 --> 00:05:38,783 ‫sekarang kita masuk ke studio desain kita. 110 00:05:40,280 --> 00:05:42,900 ‫Mari kita klik di sini pada "mulai mendesain 111 00:05:42,900 --> 00:05:44,720 ‫peta," atau lagi, jika situs 112 00:05:44,720 --> 00:05:46,200 ‫web Anda terlihat sedikit 113 00:05:46,200 --> 00:05:49,313 ‫berbeda pada saat ini, maka cari saja studio desain. 114 00:05:50,680 --> 00:05:53,093 ‫Mungkin itu muncul di suatu tempat di sini. 115 00:05:56,220 --> 00:05:57,433 ‫Jadi mari kita coba itu. 116 00:06:01,560 --> 00:06:04,330 ‫Di sini, kita benar-benar dapat melakukan segala 117 00:06:04,330 --> 00:06:07,010 ‫macam hal tentang mendesain peta. 118 00:06:07,010 --> 00:06:10,340 ‫Sebenarnya, ini bukan yang saya harapkan, karena 119 00:06:10,340 --> 00:06:13,670 ‫agak terlalu rumit untuk mengubah semua hal 120 00:06:13,670 --> 00:06:15,090 ‫ini di 121 00:06:15,090 --> 00:06:18,670 ‫sini, tetapi ada beberapa gaya default, ah ya, 122 00:06:18,670 --> 00:06:20,670 ‫ini yang saya cari. 123 00:06:21,520 --> 00:06:23,640 ‫Mari kita buat gaya baru 124 00:06:23,640 --> 00:06:27,790 ‫di sini, dan kemudian dari sana kita bisa memilih default. 125 00:06:27,790 --> 00:06:30,483 ‫Dan yang saya inginkan adalah gaya ringan ini. 126 00:06:31,400 --> 00:06:34,560 ‫Jadi buatlah, dan sebenarnya saya sangat senang dengan 127 00:06:34,560 --> 00:06:37,330 ‫tampilannya yang out of the box. 128 00:06:37,330 --> 00:06:39,972 ‫Sekarang, untuk beberapa alasan saya tidak 129 00:06:39,972 --> 00:06:43,937 ‫melihat apa pun di sini, oke, itu karena di-zoom ke laut. 130 00:06:43,937 --> 00:06:48,937 ‫Tapi bagaimanapun, sekarang mari kita perbesar di suatu tempat di sini, 131 00:06:50,570 --> 00:06:53,830 ‫dan saya pikir itu sudah terlihat 132 00:06:53,830 --> 00:06:57,407 ‫cukup bagus, jadi mari kita tambahkan nama di 133 00:06:57,407 --> 00:06:58,550 ‫sini, dan 134 00:07:00,790 --> 00:07:04,968 ‫saya menyebutnya Rekaman Video Natour karena saya sudah memiliki 135 00:07:04,968 --> 00:07:08,430 ‫gaya Natour, tapi Anda tentu saja dapat 136 00:07:08,430 --> 00:07:11,724 ‫menyebutnya apa pun yang Anda inginkan. 137 00:07:11,724 --> 00:07:16,340 ‫Mari kita konfirmasi nama di sini, kembali, dan kemudian kita 138 00:07:16,340 --> 00:07:19,230 ‫di sini tentang berbagi dan menggunakan. 139 00:07:19,230 --> 00:07:23,393 ‫Dan yang kita inginkan bukanlah berbagi, melainkan memanfaatkan. 140 00:07:23,393 --> 00:07:28,393 ‫Di suatu tempat di bawah sini, kita akan melihat URL gaya 141 00:07:28,640 --> 00:07:30,960 ‫kita, jadi, ya, itu dia. 142 00:07:30,960 --> 00:07:34,877 ‫Jadi itu harus berupa URL yang pada dasarnya dimulai dengan Mapbox. 143 00:07:37,480 --> 00:07:40,630 ‫Mari kita salin, kembali, lalu ganti gaya yang kita 144 00:07:40,630 --> 00:07:43,640 ‫miliki di sini sebagai default, dengan gaya yang 145 00:07:43,640 --> 00:07:45,363 ‫baru saja kita buat. 146 00:07:47,699 --> 00:07:49,363 ‫Berikan penghematan, dan 147 00:07:50,750 --> 00:07:51,630 ‫ya, 148 00:07:54,060 --> 00:07:56,650 ‫itu terlihat jauh lebih baik. 149 00:07:56,650 --> 00:07:59,650 ‫Dan itulah gaya yang baru saja kita buat. 150 00:07:59,650 --> 00:08:02,473 ‫Jadi sekarang kita dapat memperbesar, memperkecil, 151 00:08:02,473 --> 00:08:04,830 ‫atau sebenarnya sebaliknya, kita dapat 152 00:08:04,830 --> 00:08:07,433 ‫menggeser peta ke mana pun kita 153 00:08:08,964 --> 00:08:13,136 ‫inginkan, dan kita juga dapat menentukan banyak properti, opsi 154 00:08:13,136 --> 00:08:15,123 ‫untuk peta ini. 155 00:08:15,960 --> 00:08:17,810 ‫Saat ini, setiap kali kita memuat 156 00:08:17,810 --> 00:08:19,230 ‫peta, selalu terlihat 157 00:08:19,230 --> 00:08:21,510 ‫sama, selalu berpusat di sini di Boston. 158 00:08:21,510 --> 00:08:24,230 ‫Tapi kita bisa mengubahnya dengan menentukan pusat 159 00:08:25,720 --> 00:08:26,803 ‫di sini. 160 00:08:28,600 --> 00:08:31,580 ‫Jadi kita perlu memasukkan array dua koordinat. 161 00:08:31,580 --> 00:08:34,610 ‫Mari kita dapatkan yang dari LA 162 00:08:34,610 --> 00:08:37,473 ‫yang kita gunakan sebelumnya di Postman, 163 00:08:42,356 --> 00:08:43,189 ‫Jadi 164 00:08:48,210 --> 00:08:51,870 ‫sebenarnya ini, tapi, sebenarnya, Mapbox persis seperti MongoDB, 165 00:08:51,870 --> 00:08:55,200 ‫dalam aspek pertama membutuhkan garis bujur, dan 166 00:08:55,200 --> 00:08:56,603 ‫kemudian garis lintang. 167 00:08:58,270 --> 00:09:00,020 ‫Kita perlu menggantinya di sini. 168 00:09:02,925 --> 00:09:05,363 ‫Dan mari kita lihat apa yang kita dapatkan. 169 00:09:07,330 --> 00:09:10,083 ‫Dan, yah, itu tidak benar-benar membawa kita ke mana pun. 170 00:09:12,330 --> 00:09:15,953 ‫Mari kita juga menentukan tingkat zoom di sini. 171 00:09:17,310 --> 00:09:18,400 ‫Katakanlah empat. 172 00:09:18,400 --> 00:09:19,843 ‫Mungkin itu memperbaikinya. 173 00:09:26,030 --> 00:09:29,153 ‫Dan sebenarnya, itulah ilusi ini. 174 00:09:30,221 --> 00:09:33,150 ‫Jadi ada tingkat zoom yang berbeda. 175 00:09:33,150 --> 00:09:35,820 ‫Misalnya kita bisa mencobanya di 176 00:09:35,820 --> 00:09:38,760 ‫sini juga, dan itu seharusnya lebih diperbesar, 177 00:09:38,760 --> 00:09:41,460 ‫atau mungkin diperkecil, saya tidak begitu yakin. 178 00:09:41,460 --> 00:09:45,040 ‫Ah, oke, jadi itu benar-benar memperbesarnya. 179 00:09:45,040 --> 00:09:46,943 ‫Jadi katakanlah 10 di sini 180 00:09:49,180 --> 00:09:51,430 ‫misalnya, dan seperti yang Anda lihat 181 00:09:51,430 --> 00:09:53,320 ‫saya sangat suka bermain-main 182 00:09:53,320 --> 00:09:57,360 ‫dengan hal-hal semacam ini, dan ya, pada 10 sekarang benar-benar diperbesar. 183 00:09:57,360 --> 00:10:00,913 ‫Kami juga dapat mengatakan bahwa kami ingin itu tidak 184 00:10:02,130 --> 00:10:04,400 ‫interaktif, dan itu sangat sederhana. 185 00:10:04,400 --> 00:10:07,683 ‫Mari kita atur interaktif ke false. 186 00:10:08,610 --> 00:10:10,610 ‫Dan pada dasarnya peta Anda 187 00:10:10,610 --> 00:10:13,823 ‫akan terlihat seperti gambar sederhana di situs web Anda. 188 00:10:15,960 --> 00:10:18,570 ‫Jadi seperti yang Anda lihat, saya tidak dapat menggulir apa pun 189 00:10:18,570 --> 00:10:20,650 ‫di sini, dan saya juga tidak dapat menggesernya. 190 00:10:20,650 --> 00:10:22,955 ‫Jadi tidak ada yang bisa saya lakukan sekarang. 191 00:10:22,955 --> 00:10:25,940 ‫Dan ini sebenarnya hanya beberapa opsi yang dapat 192 00:10:25,940 --> 00:10:26,803 ‫kita atur. 193 00:10:29,010 --> 00:10:32,090 ‫Mari kita kembali ke sini 194 00:10:32,090 --> 00:10:36,093 ‫ke Mapbox, dan ke dokumentasi dan JavaScript Mapbox. 195 00:10:39,160 --> 00:10:42,020 ‫Di sini Anda mendapatkan semua dokumentasi 196 00:10:42,020 --> 00:10:46,300 ‫untuk semua yang dapat Anda lakukan dengan versi JavaScript dari Mapbox. 197 00:10:46,300 --> 00:10:48,790 ‫Yang ingin saya tunjukkan adalah bahwa barang yang baru 198 00:10:48,790 --> 00:10:51,240 ‫saja saya tunjukkan sebenarnya ada di sini. 199 00:10:51,240 --> 00:10:53,550 ‫Jadi kami memiliki wadah yang kami tentukan, 200 00:10:53,550 --> 00:10:55,023 ‫kami memiliki gaya, 201 00:10:55,990 --> 00:10:57,970 ‫dan kami memiliki banyak hal. 202 00:10:57,970 --> 00:10:59,720 ‫Sangat interaktif, dan jika 203 00:10:59,720 --> 00:11:02,750 ‫Anda mau, tentu saja Anda bisa bermain-main dengan 204 00:11:02,750 --> 00:11:03,873 ‫semua ini. 205 00:11:05,192 --> 00:11:08,120 ‫Saya hanya ingin menunjukkan kepada Anda bahwa ini 206 00:11:08,120 --> 00:11:11,400 ‫adalah bagaimana Anda dapat mempelajari lebih banyak hal tentang Mapbox. 207 00:11:11,400 --> 00:11:14,496 ‫Sekarang, kami sebenarnya tidak menginginkan semua ini. 208 00:11:14,496 --> 00:11:17,800 ‫Karena kami tidak ingin memusatkan peta di mana 209 00:11:17,800 --> 00:11:20,490 ‫pun, tetapi kami ingin peta 210 00:11:20,490 --> 00:11:24,551 ‫secara otomatis mengetahui posisi peta berdasarkan titik lokasi tur kami. 211 00:11:24,551 --> 00:11:26,739 ‫Apa yang akan kita lakukan 212 00:11:26,739 --> 00:11:30,410 ‫sekarang pada dasarnya adalah meletakkan semua lokasi untuk tur tertentu di 213 00:11:30,410 --> 00:11:32,660 ‫peta, dan kemudian membiarkan peta pada dasarnya 214 00:11:32,660 --> 00:11:36,180 ‫mencari tahu secara otomatis bagian mana dari peta yang harus 215 00:11:36,180 --> 00:11:39,280 ‫ditampilkan agar sesuai dengan semua titik ini dengan benar. 216 00:11:39,280 --> 00:11:41,540 ‫Hal pertama yang perlu kita lakukan 217 00:11:41,540 --> 00:11:43,713 ‫adalah membuat variabel terikat. 218 00:11:47,060 --> 00:11:52,060 ‫Batas sama dengan Mapbox GL baru. batas garis bujur. 219 00:12:00,360 --> 00:12:03,320 ‫Dan kami mendapatkan akses ke objek Mapbox ini 220 00:12:03,320 --> 00:12:05,520 ‫karena kami menyertakan pustaka Mapbox di 221 00:12:05,520 --> 00:12:06,983 ‫awal halaman kami. 222 00:12:09,210 --> 00:12:10,113 ‫Di 223 00:12:11,270 --> 00:12:12,883 ‫sini, termasuk skrip ini 224 00:12:14,050 --> 00:12:15,760 ‫di sini, jadi pustaka Mapbox 225 00:12:15,760 --> 00:12:18,760 ‫ini, inilah yang mengekspos objek Mapbox GL, yang kemudian 226 00:12:18,760 --> 00:12:21,193 ‫dapat kita gunakan di seluruh situs kita. 227 00:12:24,180 --> 00:12:26,870 ‫Objek pembatas di sini pada dasarnya 228 00:12:26,870 --> 00:12:29,589 ‫adalah area yang akan ditampilkan di peta. 229 00:12:29,589 --> 00:12:32,860 ‫Kami sekarang akan memperluasnya dengan semua lokasi yang 230 00:12:32,860 --> 00:12:35,043 ‫ada di array lokasi kami. 231 00:12:35,043 --> 00:12:37,597 ‫Dan ini akan sedikit lebih masuk akal setelah 232 00:12:37,597 --> 00:12:39,333 ‫kita benar-benar mulai menggunakannya. 233 00:12:41,490 --> 00:12:44,050 ‫Sekarang mari kita mengulang semua lokasi kita dan 234 00:12:44,050 --> 00:12:46,203 ‫menambahkan penanda untuk masing-masing lokasi. 235 00:12:48,150 --> 00:12:49,750 ‫Untuk masing-masing, dan 236 00:12:49,750 --> 00:12:52,313 ‫mari kita lihat kunci untuk 237 00:12:54,840 --> 00:12:58,150 ‫lokasi, jadi di sini kita ingin menambahkan penanda. 238 00:12:58,150 --> 00:13:00,160 ‫Dan untuk itu, kita sebenarnya perlu 239 00:13:00,160 --> 00:13:02,053 ‫membuat elemen html baru, dalam 240 00:13:04,228 --> 00:13:07,900 ‫hal ini, ini benar-benar level yang sedikit rendah, tapi menurut 241 00:13:07,900 --> 00:13:09,780 ‫saya itu sangat bagus, 242 00:13:09,780 --> 00:13:12,230 ‫karena, seperti ini, kita memiliki banyak kendali 243 00:13:12,230 --> 00:13:15,110 ‫atas apa yang sebenarnya terjadi di peta kami. 244 00:13:15,110 --> 00:13:17,070 ‫Dan apa yang saya tunjukkan 245 00:13:17,070 --> 00:13:19,366 ‫di sini sebenarnya hanyalah sebagian kecil dari 246 00:13:19,366 --> 00:13:22,083 ‫semua hal hebat yang dapat Anda lakukan dengan Mapbox. 247 00:13:23,525 --> 00:13:26,593 ‫Ini di sini hanya JavaScript standar, 248 00:13:26,593 --> 00:13:28,928 ‫jadi kita bisa menggunakan 249 00:13:28,928 --> 00:13:31,490 ‫elemen create untuk membuat elemen. 250 00:13:31,490 --> 00:13:33,040 ‫Seperti namanya, dan 251 00:13:33,040 --> 00:13:35,490 ‫di sini kami ingin membuat diff baru. 252 00:13:35,490 --> 00:13:38,653 ‫Dan kami juga ingin memberikan nama kelas, dan 253 00:13:44,700 --> 00:13:46,193 ‫mengaturnya ke penanda. 254 00:13:47,945 --> 00:13:50,170 ‫Dan ini dia, ini adalah titik koma. 255 00:13:50,170 --> 00:13:52,500 ‫Jadi di CSS kita sebenarnya memiliki 256 00:13:52,500 --> 00:13:54,313 ‫kelas untuk penanda ini. 257 00:13:57,140 --> 00:14:00,870 ‫Marker, di sini Anda melihat gambar latar belakang yang ditentukan, yang 258 00:14:00,870 --> 00:14:03,459 ‫merupakan pin hijau ini di sini. 259 00:14:03,459 --> 00:14:07,210 ‫Pin yang akan Anda lihat sebentar lagi di peta, sebenarnya 260 00:14:07,210 --> 00:14:10,110 ‫adalah gambar khusus yang saya rancang. 261 00:14:10,110 --> 00:14:13,070 ‫Itu tidak datang langsung dari Mapbox. 262 00:14:13,070 --> 00:14:16,500 ‫Seperti ini, Anda benar-benar dapat menyesuaikannya dengan gaya dan merek 263 00:14:16,500 --> 00:14:17,333 ‫Anda sendiri. 264 00:14:17,333 --> 00:14:21,733 ‫Saya juga mendefinisikan ukuran penanda di sini, ya, itu 265 00:14:23,500 --> 00:14:25,363 ‫benar-benar dapat disesuaikan. 266 00:14:27,362 --> 00:14:32,335 ‫Sekarang kita benar-benar membuat penanda baru di dalam Mapbox dengan 267 00:14:32,335 --> 00:14:37,257 ‫mengatakan new Mapbox GL. penanda. 268 00:14:40,230 --> 00:14:45,230 ‫Dan kemudian di sana, kita melewati elemen yang baru saja kita buat, 269 00:14:45,400 --> 00:14:49,503 ‫jadi L, dan kemudian kita juga menentukan properti jangkar. 270 00:14:51,100 --> 00:14:52,090 ‫Yang saya 271 00:14:53,440 --> 00:14:54,910 ‫atur ke bawah di sini. 272 00:14:54,910 --> 00:14:58,610 ‫Artinya, itu adalah bagian bawah elemen, dan dalam hal 273 00:14:58,610 --> 00:15:01,230 ‫ini bagian bawah pin itu, 274 00:15:01,230 --> 00:15:04,683 ‫yang akan ditempatkan di lokasi GPS yang tepat. 275 00:15:05,790 --> 00:15:07,710 ‫Kita juga bisa meletakkannya di 276 00:15:07,710 --> 00:15:10,113 ‫tengah, tapi menurut saya lebih masuk akal 277 00:15:11,260 --> 00:15:13,690 ‫bahwa, mari kita buka gambar itu lagi, 278 00:15:13,690 --> 00:15:16,520 ‫saya pikir lebih masuk akal bahwa ujung gambar 279 00:15:16,520 --> 00:15:19,110 ‫ini adalah yang benar-benar menunjuk ke lokasi 280 00:15:19,110 --> 00:15:20,663 ‫GPS yang tepat. 281 00:15:22,512 --> 00:15:26,040 ‫Itulah yang kami lakukan dengan properti jangkar ini. 282 00:15:26,040 --> 00:15:27,680 ‫Jadi itulah 283 00:15:27,680 --> 00:15:31,896 ‫penandanya, dan sekarang, kita bisa memanggil beberapa metode. 284 00:15:31,896 --> 00:15:35,600 ‫Saat ini, Mapbox tidak tahu apa-apa tentang koordinat GPS 285 00:15:35,600 --> 00:15:36,635 ‫penanda ini. 286 00:15:36,635 --> 00:15:39,250 ‫Kami tidak mengaturnya di mana pun. 287 00:15:39,250 --> 00:15:40,580 ‫Mari kita lakukan 288 00:15:40,580 --> 00:15:44,960 ‫sekarang, jadi atur bujur, lintang, dan sama dengan 289 00:15:44,960 --> 00:15:47,423 ‫lokasi. koordinat. 290 00:15:49,364 --> 00:15:54,301 ‫Ingatlah bahwa ini di sini adalah susunan garis bujur dan garis 291 00:15:54,301 --> 00:15:55,990 ‫lintang yang dipaksakan. 292 00:15:55,990 --> 00:15:59,471 ‫Itulah yang diharapkan Mapbox. 293 00:15:59,471 --> 00:16:02,540 ‫Hanya untuk memastikan Anda benar-benar mengerti, 294 00:16:02,540 --> 00:16:04,633 ‫mari kita lihat turnya. 295 00:16:05,719 --> 00:16:09,670 ‫Sekali lagi, setiap lokasi memiliki properti koordinat ini, dan 296 00:16:09,670 --> 00:16:12,693 ‫dari situlah kita sekarang membaca koordinatnya. 297 00:16:13,915 --> 00:16:16,323 ‫Lokasi. koordinat. 298 00:16:18,040 --> 00:16:23,040 ‫Dan kemudian, akhirnya, tambahkan ke dan kemudian variabel peta kita. 299 00:16:25,070 --> 00:16:28,850 ‫Jadi peta ini di sini adalah variabel peta tempat kami 300 00:16:28,850 --> 00:16:33,093 ‫membuat Kotak Peta baru kami. peta tepat di awal. 301 00:16:34,507 --> 00:16:38,320 ‫Dan sekarang, yang perlu kita lakukan untuk menyelesaikannya, adalah 302 00:16:38,320 --> 00:16:40,463 ‫benar-benar memperluas batas kita. 303 00:16:41,490 --> 00:16:46,490 ‫Jadi batas. memperpanjang dan juga dengan lokasi, atau sebenarnya "loc", 304 00:16:48,540 --> 00:16:52,033 ‫yang merupakan lokasi saat ini. koordinat. 305 00:16:56,310 --> 00:16:59,720 ‫Bagian pertama di sini sebenarnya menambahkan penanda, 306 00:16:59,720 --> 00:17:00,950 ‫atau membuat, 307 00:17:00,950 --> 00:17:03,120 ‫mari kita membuatnya lebih 308 00:17:03,120 --> 00:17:04,310 ‫spesifik, 309 00:17:08,550 --> 00:17:09,910 ‫buat penanda lalu 310 00:17:11,500 --> 00:17:15,540 ‫tambahkan penanda dan kemudian di sini, perpanjang batas 311 00:17:18,600 --> 00:17:21,653 ‫peta untuk menyertakan lokasi saat ini. 312 00:17:22,624 --> 00:17:25,410 ‫Tapi itu masih belum cukup, karena sekarang 313 00:17:25,410 --> 00:17:27,850 ‫kami juga membuatnya agar peta benar-benar 314 00:17:27,850 --> 00:17:29,560 ‫sesuai dengan batas. 315 00:17:29,560 --> 00:17:34,560 ‫Jadi peta. cocok, tidak tidak menemukan, tetapi sesuai batas, 316 00:17:39,310 --> 00:17:41,743 ‫dan tentu saja objek batas kami. 317 00:17:42,640 --> 00:17:43,473 ‫Wah. 318 00:17:43,473 --> 00:17:48,473 ‫Jadi, banyak pekerjaan hanya untuk menempatkan beberapa penanda di peta. 319 00:17:48,530 --> 00:17:50,829 ‫Tapi, sekali lagi, saya merasa sangat menyenangkan 320 00:17:50,829 --> 00:17:52,533 ‫bekerja dengan perpustakaan ini. 321 00:17:53,840 --> 00:17:55,800 ‫Dan sekarang mari kita lihat dan 322 00:17:55,800 --> 00:17:58,450 ‫saya tidak begitu yakin apakah semuanya berjalan baik di sini. 323 00:18:00,430 --> 00:18:02,300 ‫Dan sebenarnya, tidak, jadi peta 324 00:18:02,300 --> 00:18:05,264 ‫kita tidak benar-benar ditemukan di mana pun, mari kita 325 00:18:05,264 --> 00:18:07,630 ‫perkecil sedikit untuk melihat apakah peta itu 326 00:18:07,630 --> 00:18:09,083 ‫benar-benar ada di suatu 327 00:18:10,049 --> 00:18:11,253 ‫tempat, dan tidak. 328 00:18:13,070 --> 00:18:15,220 ‫Mari kita lihat konsol 329 00:18:15,220 --> 00:18:17,883 ‫kita, dan memang ada semacam kesalahan. 330 00:18:18,910 --> 00:18:23,250 ‫Jadi lat, batas bujur bukanlah konstruktor, 331 00:18:23,250 --> 00:18:26,150 ‫dan memang sebaliknya. 332 00:18:26,150 --> 00:18:28,750 ‫Jadi sekali lagi, Mapbox, seperti MongoDB, 333 00:18:28,750 --> 00:18:31,350 ‫mengharapkan koordinat menjadi bujur terlebih dahulu, 334 00:18:31,350 --> 00:18:32,900 ‫lalu lintang. 335 00:18:32,900 --> 00:18:34,314 ‫Itulah yang kita 336 00:18:34,314 --> 00:18:36,420 ‫miliki di sini dalam nama ini, 337 00:18:36,420 --> 00:18:38,350 ‫dan jadi di sini seharusnya sama. 338 00:18:38,350 --> 00:18:42,813 ‫Jadi bujur, lintang. 339 00:18:44,616 --> 00:18:47,193 ‫Mari kita coba lagi di sini. 340 00:18:48,990 --> 00:18:51,360 ‫Ahh, sekarang berhasil. 341 00:18:51,360 --> 00:18:52,900 ‫Sangat bagus. 342 00:18:52,900 --> 00:18:54,660 ‫Anda melihat zoom yang bagus itu. 343 00:18:54,660 --> 00:18:57,290 ‫Itulah yang dilakukan metode batas pas. 344 00:18:57,290 --> 00:19:00,370 ‫Jadi itu bergerak dan memperbesar peta tepat ke batas 345 00:19:00,370 --> 00:19:03,000 ‫agar benar-benar sesuai dengan penanda kita. 346 00:19:03,000 --> 00:19:07,180 ‫Sekarang, Anda melihat bahwa kami memiliki elemen lain semacam ini di sini yang 347 00:19:07,180 --> 00:19:08,943 ‫tumpang tindih dengan peta kami. 348 00:19:08,943 --> 00:19:11,740 ‫Dan itu karena desain yang saya buat 349 00:19:11,740 --> 00:19:14,470 ‫dengan tepi ini di sini. 350 00:19:14,470 --> 00:19:16,490 ‫Tapi itu tidak masalah karena 351 00:19:16,490 --> 00:19:20,323 ‫kita sebenarnya bisa secara manual menentukan beberapa padding ke batas ini. 352 00:19:21,290 --> 00:19:23,860 ‫Kita dapat melewatkan sebuah objek di 353 00:19:23,860 --> 00:19:27,363 ‫sini, dan katakanlah 200 piksel atas, 200 piksel 354 00:19:30,430 --> 00:19:32,830 ‫bawah juga, dan kemudian 355 00:19:32,830 --> 00:19:35,273 ‫kiri dan kanan 100 piksel. 356 00:19:42,561 --> 00:19:45,100 ‫Dan kita tidak perlu menentukan piksel di sini, 357 00:19:45,100 --> 00:19:47,883 ‫saya rasa itu hanya saya yang menulis begitu banyak CSS. 358 00:19:50,780 --> 00:19:52,053 ‫Mari kita coba lagi. 359 00:19:53,635 --> 00:19:55,440 ‫Oh, animasi zoom yang 360 00:19:55,440 --> 00:19:58,023 ‫bagus, tapi itu tidak terlalu menghargai pengaturan kami. 361 00:19:59,110 --> 00:20:02,850 ‫Dan sebenarnya, itu karena ini tidak benar. 362 00:20:02,850 --> 00:20:05,180 ‫Jadi, sebagai gantinya kita harus membuat objek, 363 00:20:05,180 --> 00:20:08,150 ‫dan kemudian di sana kita perlu menentukan properti padding, yang 364 00:20:08,150 --> 00:20:09,673 ‫kemudian memiliki semua ini. 365 00:20:10,920 --> 00:20:11,770 ‫Jadi mari kita lakukan itu. 366 00:20:14,130 --> 00:20:14,963 ‫Lapisan. 367 00:20:17,180 --> 00:20:18,013 ‫Dan sekarang, 368 00:20:19,020 --> 00:20:20,913 ‫potong ini dan taruh di sana. 369 00:20:23,970 --> 00:20:25,113 ‫Berikan simpanan di sini. 370 00:20:27,790 --> 00:20:28,883 ‫Sekali lagi. 371 00:20:31,750 --> 00:20:34,310 ‫Astaga, masih ada yang salah di sini. 372 00:20:34,310 --> 00:20:35,840 ‫Apa itu? 373 00:20:35,840 --> 00:20:39,560 ‫Ahh, dan tentu saja kode ini tidak boleh ada di sini. 374 00:20:39,560 --> 00:20:43,913 ‫Itu tidak dalam batas, itu memang di sini dalam batas yang sesuai. 375 00:20:45,060 --> 00:20:47,633 ‫Jadi ini adalah benar-benar di mana masuk akal untuk menjadi. 376 00:20:52,620 --> 00:20:57,333 ‫Mari kita perbaiki kode ini di sini, dan sekarang itu masuk akal. 377 00:20:59,144 --> 00:21:00,890 ‫Tentu saja harus 378 00:21:00,890 --> 00:21:03,460 ‫dalam batas-batas yang pas, yaitu pada akhirnya, 379 00:21:03,460 --> 00:21:05,750 ‫fungsi yang menjalankan gerakan dan zooming. 380 00:21:05,750 --> 00:21:07,430 ‫Di situlah padding 381 00:21:07,430 --> 00:21:10,400 ‫seharusnya, dan kita bisa menentukan banyak opsi lain. 382 00:21:10,400 --> 00:21:12,320 ‫Dan sekali lagi, jika 383 00:21:12,320 --> 00:21:14,713 ‫Anda tertarik dengan itu, lihat saja dokumentasinya. 384 00:21:15,810 --> 00:21:17,680 ‫Jadi percobaan ketiga di 385 00:21:17,680 --> 00:21:19,730 ‫sini, semoga kali ini saya melakukannya 386 00:21:19,730 --> 00:21:23,520 ‫dengan benar, ahh, dan ya, itu terlihat jauh lebih baik. 387 00:21:23,520 --> 00:21:26,980 ‫Tapi, masih ada beberapa hal yang bisa kami perbaiki di 388 00:21:26,980 --> 00:21:29,680 ‫sini, karena saat ini kami bahkan tidak 389 00:21:29,680 --> 00:21:31,670 ‫tahu apa masing-masing lokasi tersebut. 390 00:21:31,670 --> 00:21:35,290 ‫Jadi kami sebenarnya ingin semacam pop-up di sini, 391 00:21:35,290 --> 00:21:38,373 ‫yang kemudian menampilkan informasi tentang lokasi. 392 00:21:41,110 --> 00:21:45,043 ‫Tidak hanya penanda, tetapi kami juga ingin menambahkan pop-up. 393 00:21:49,270 --> 00:21:52,630 ‫Dan itu sedikit mirip dengan benar-benar menambahkan penanda, jadi 394 00:21:52,630 --> 00:21:57,133 ‫kami katakan Mapbox GL baru. muncul. 395 00:21:59,800 --> 00:22:02,300 ‫Kemudian, seperti sebelumnya, kita tentukan koordinat 396 00:22:02,300 --> 00:22:03,623 ‫pop-up itu. 397 00:22:05,940 --> 00:22:07,523 ‫Jadi yang di sini. 398 00:22:08,610 --> 00:22:11,900 ‫Kemudian kita juga perlu mendefinisikan html untuk pop-up ini, 399 00:22:11,900 --> 00:22:14,990 ‫dan saya akan melakukannya sekarang menggunakan metode set 400 00:22:14,990 --> 00:22:17,730 ‫html, karena itu akan memungkinkan saya untuk 401 00:22:17,730 --> 00:22:19,950 ‫menambahkan beberapa konten langsung ke 402 00:22:19,950 --> 00:22:24,353 ‫dalam html itu, jadi setel html, dan kemudian string templat di sini. 403 00:22:26,040 --> 00:22:28,030 ‫Saya ingin ini menjadi 404 00:22:28,030 --> 00:22:30,760 ‫paragraf, dan informasi yang ingin saya tampilkan di 405 00:22:30,760 --> 00:22:33,630 ‫sini adalah hari di mana kita akan berada 406 00:22:33,630 --> 00:22:36,250 ‫di lokasi ini, dan kemudian nama lokasinya. 407 00:22:36,250 --> 00:22:39,730 ‫Jadi pada dasarnya, saya ingin menampilkan hari, jadi 408 00:22:39,730 --> 00:22:43,300 ‫itulah mengapa kami membuat properti hari ini di sini, 409 00:22:43,300 --> 00:22:44,753 ‫dan kemudian deskripsinya. 410 00:22:50,170 --> 00:22:54,520 ‫Hari, dan kemudian lokasi, ingat yang merupakan indie lokasi saat 411 00:22:54,520 --> 00:22:56,623 ‫ini untuk setiap loop, dan 412 00:22:57,860 --> 00:22:58,853 ‫kemudian hari, 413 00:23:01,720 --> 00:23:03,543 ‫lokasi. keterangan. 414 00:23:06,870 --> 00:23:07,980 ‫Simpan di 415 00:23:07,980 --> 00:23:10,210 ‫sini, yang terlihat jauh lebih bagus sekarang. 416 00:23:10,210 --> 00:23:14,010 ‫Dan kemudian, seperti yang lainnya, kita 417 00:23:14,010 --> 00:23:19,010 ‫juga perlu melakukan add to, dan kemudian variabel peta kita. 418 00:23:22,130 --> 00:23:24,380 ‫Dan ini tidak akan terlihat sempurna, 419 00:23:24,380 --> 00:23:26,730 ‫karena kita perlu menentukan beberapa opsi, tetapi saya 420 00:23:26,730 --> 00:23:29,083 ‫masih ingin menunjukkan kepada Anda hasilnya saat ini. 421 00:23:32,070 --> 00:23:35,100 ‫Jadi, Anda melihat bahwa mereka sebenarnya tumpang tindih 422 00:23:35,100 --> 00:23:36,453 ‫dengan penanda sekarang. 423 00:23:37,920 --> 00:23:41,083 ‫Kami sebenarnya dapat memperbaikinya menggunakan properti offset. 424 00:23:43,560 --> 00:23:46,883 ‫Kami meneruskan opsi itu di sini ke pop-up baru. 425 00:23:48,396 --> 00:23:49,770 ‫Kami 426 00:23:51,390 --> 00:23:54,940 ‫mengatakan offset 30 piksel. 427 00:23:54,940 --> 00:23:57,081 ‫Dan saya juga memperhatikan 428 00:23:57,081 --> 00:23:59,840 ‫bahwa kita memiliki terlalu banyak padding di 429 00:23:59,840 --> 00:24:04,840 ‫bagian bawah, jadi mari kita kurangi itu menjadi 150 dan lakukan ini lagi. 430 00:24:09,610 --> 00:24:13,190 ‫Jadi, ini terlihat cukup bagus menurut saya. 431 00:24:13,190 --> 00:24:15,750 ‫Jadi siapa pun yang sekarang melihat 432 00:24:15,750 --> 00:24:18,609 ‫halaman kami, dapat dengan cepat melihat rencana perjalanan 433 00:24:18,609 --> 00:24:21,533 ‫seperti apa yang akan ada di tur ini. 434 00:24:21,533 --> 00:24:23,740 ‫Dan jika ada terlalu banyak 435 00:24:23,740 --> 00:24:26,423 ‫informasi, kami juga dapat menutup pop-up ini. 436 00:24:27,680 --> 00:24:30,700 ‫Dan kami benar-benar dapat menambahkan semua jenis barang ke peta ini. 437 00:24:30,700 --> 00:24:33,440 ‫Misalnya, kita dapat membuat garis ini di 438 00:24:33,440 --> 00:24:35,250 ‫antara titik-titik ini, dan 439 00:24:35,250 --> 00:24:38,570 ‫menggabungkannya bersama-sama, seperti garis hijau di sini atau semacamnya. 440 00:24:38,570 --> 00:24:41,096 ‫Atau kita juga bisa menampilkan rute sebenarnya 441 00:24:41,096 --> 00:24:42,820 ‫dari satu titik ke 442 00:24:42,820 --> 00:24:45,350 ‫titik lainnya dengan menggunakan petunjuk arah pada 443 00:24:45,350 --> 00:24:47,610 ‫dasarnya, tapi mari kita sederhanakan di sini. 444 00:24:47,610 --> 00:24:49,990 ‫Satu-satunya hal yang tersisa untuk 445 00:24:49,990 --> 00:24:53,430 ‫saya lakukan di sini, adalah menonaktifkan fungsi zoom. 446 00:24:53,430 --> 00:24:55,320 ‫Karena sekarang, katakanlah 447 00:24:55,320 --> 00:24:57,230 ‫kita memperbesar halaman ini, 448 00:24:57,230 --> 00:24:59,400 ‫atau sebenarnya jika kita menggulir 449 00:24:59,400 --> 00:25:01,450 ‫halaman ini, dan begitu kita 450 00:25:01,450 --> 00:25:03,740 ‫mencapai ini di sini, dan 451 00:25:03,740 --> 00:25:08,740 ‫kemudian terus menggulir di sini, lalu kita menggulir peta alih-alih halaman. 452 00:25:09,034 --> 00:25:12,060 ‫Itu bukan pengalaman pengguna yang baik, jadi 453 00:25:12,060 --> 00:25:13,673 ‫yang perlu kita 454 00:25:13,673 --> 00:25:17,110 ‫lakukan sekarang adalah menonaktifkan fungsi pengguliran di 455 00:25:17,110 --> 00:25:18,410 ‫peta ini. 456 00:25:18,410 --> 00:25:22,880 ‫Kami masih akan mengizinkan orang untuk menggeser seperti ini, 457 00:25:22,880 --> 00:25:24,883 ‫tetapi zoom akan dinonaktifkan. 458 00:25:26,200 --> 00:25:29,463 ‫Mari kita pergi ke sini ke peta kita dan menambahkan itu. 459 00:25:30,743 --> 00:25:33,760 ‫Dan kami tidak menggunakan default interaktif, karena kami 460 00:25:33,760 --> 00:25:35,970 ‫bahkan tidak dapat menggeser peta. 461 00:25:35,970 --> 00:25:39,317 ‫Tapi sekali lagi, itu setidaknya harus diizinkan. 462 00:25:39,317 --> 00:25:43,680 ‫Opsi yang saya atur di sini adalah scroll zoom false. 463 00:25:46,580 --> 00:25:49,202 ‫Dan sekali lagi, untuk semua kemungkinan 464 00:25:49,202 --> 00:25:50,888 ‫opsi yang dapat 465 00:25:50,888 --> 00:25:55,190 ‫Anda atur di sini, silakan saja dan lihat referensinya. 466 00:25:55,190 --> 00:25:58,730 ‫Dan sekarang, ketika kita meletakkan mouse kita di sini dan 467 00:25:58,730 --> 00:26:01,463 ‫menggulir, itu tidak mengubah tingkat zoom. 468 00:26:03,040 --> 00:26:04,530 ‫Sempurna. 469 00:26:04,530 --> 00:26:09,060 ‫Kami masih bisa menggeser, jadi saya pikir itu terlihat sangat bagus sekarang. 470 00:26:09,060 --> 00:26:12,083 ‫Mari kita uji ini di yang lain. 471 00:26:12,920 --> 00:26:14,653 ‫Katakanlah di sini pejalan kaki hutan. 472 00:26:17,290 --> 00:26:19,450 ‫Jadi, itu masih berfungsi. 473 00:26:19,450 --> 00:26:22,130 ‫Dan ini di sini agak tumpang tindih, 474 00:26:22,130 --> 00:26:25,553 ‫tapi tidak masalah, kita selalu bisa menutupnya jika kita mau. 475 00:26:28,120 --> 00:26:30,713 ‫Mari kita lihat di sini misalnya, penjelajah laut. 476 00:26:32,420 --> 00:26:33,440 ‫Dan jika 477 00:26:33,440 --> 00:26:35,231 ‫kita cukup cepat, kita bahkan dapat 478 00:26:35,231 --> 00:26:38,100 ‫melihat animasi zoom yang memindahkan peta ke lokasi tersebut. 479 00:26:38,100 --> 00:26:39,890 ‫Oke, sempurna. 480 00:26:39,890 --> 00:26:42,680 ‫Jadi saya harap Anda dapat benar-benar 481 00:26:42,680 --> 00:26:46,670 ‫mengikuti contoh ini dengan semua yang kami lakukan di Mapbox. 482 00:26:46,670 --> 00:26:49,060 ‫Sekarang jika ada yang tidak berfungsi, pastikan 483 00:26:49,060 --> 00:26:50,330 ‫Anda menggunakan versi 484 00:26:50,330 --> 00:26:51,863 ‫yang mirip dengan versi 485 00:26:52,870 --> 00:26:56,500 ‫saya, jadi yang saya maksud adalah versi pustaka Mapbox yang serupa. 486 00:26:56,500 --> 00:26:59,403 ‫Yang dalam kasus saya di sini adalah versi 0. 54. 487 00:27:00,870 --> 00:27:04,363 ‫Anda mungkin tidak harus 1. sesuatu. 488 00:27:05,250 --> 00:27:06,600 ‫Jadi jika Anda 489 00:27:06,600 --> 00:27:10,430 ‫menonton video ini lama setelah rekaman ini dan memiliki V1 di 490 00:27:10,430 --> 00:27:14,891 ‫sini, silakan lanjutkan dan ubah ke 0. sesuatu, sehingga pada dasarnya 491 00:27:14,891 --> 00:27:18,213 ‫tidak ada perubahan yang melanggar di sana. 492 00:27:19,242 --> 00:27:24,242 ‫Bagaimanapun, dengan itu, kami benar-benar menyelesaikan halaman tur kami, jadi 493 00:27:24,560 --> 00:27:27,140 ‫kami tidak lagi membutuhkan 494 00:27:27,140 --> 00:27:30,140 ‫semua ini, petanya juga ada di 495 00:27:30,140 --> 00:27:34,740 ‫sana, jadi, bagian dari situs web ini sebenarnya sudah selesai. 496 00:27:34,740 --> 00:27:35,573 ‫Luar biasa. 497 00:27:35,573 --> 00:27:38,660 ‫Selamat untuk mewujudkannya, karena benar-benar mulai membangun 498 00:27:38,660 --> 00:27:42,200 ‫situs web yang indah ini menggunakan semua teknologi luar 499 00:27:42,200 --> 00:27:44,200 ‫biasa yang telah Anda pelajari 500 00:27:44,200 --> 00:27:45,663 ‫sejauh ini.