‫-: Sekarang mari kita lanjutkan membangun integrasi peta kita.
‫Jadi sekarang mari kita benar-benar menuju ke Mapbox.
‫Jadi, saya menggunakan Mapbox daripada Google Maps sekarang dan itu
‫karena beberapa waktu
‫lalu, Google Maps mulai benar-benar membutuhkan
‫kartu kredit dari Anda untuk
‫dapat menggunakan Google Maps.
‫Dan menurut saya itu bukan ide yang bagus untuk kursus
‫seperti ini dan, sebenarnya, saya juga
‫sangat menyukai Mapbox, jadi, saya pikir itu sempurna untuk kita gunakan dalam kursus ini.
‫Mereka juga memiliki dokumentasi yang sangat baik
‫yang akan kita coba sebentar lagi di sini.
‫Tapi untuk sekarang, mari kita mulai dan buat akun baru.
‫Jadi tekan saja di sini untuk mulai membangun.
‫Dan kemudian, tentu saja, buat akun gratis Anda.
‫Saya sudah punya satu dan jadi,
‫cukup jeda video pada saat ini untuk membuat akun itu.
‫Dan setelah membuat akun Anda,
‫Anda akan mendarat di halaman yang terlihat seperti ini.
‫Sekarang pada saat Anda menonton
‫video ini, halaman ini
‫di sini mungkin, tentu saja, telah berubah,
‫dan mungkin telah
‫berubah, tetapi yang perlu kita lakukan sekarang
‫adalah menemukan tautan yang mengatakan sesuatu seperti ini, jadi
‫instal pengembangan perangkat lunak peta kit, jadi ini di sini, atau juga
‫mengintegrasikan Mapbox, yang seharusnya hampir sama.
‫Jadi saya akan klik di sini untuk menginstal peta untuk JavaScript.
‫Dan yang akan kita
‫lakukan di sini adalah menggunakan CDN Mapbox
‫jadi jaringan pengiriman konten dan
‫untuk saat ini
‫setidaknya bukan bundler modul NPM.
‫Jadi langkah pertama, seperti yang dikatakan di sini,
‫adalah memasukkan file-file ini di sini dan ke file HTML yang dimiliki.
‫Dan di situlah kita sekarang membutuhkan
‫teknik kepala ekstensi yang kita miliki sebelumnya.
‫Dan di situlah kita
‫sekarang benar-benar membutuhkan teknik perpanjangan kepala.
‫Di sini, di
‫tur, ingat bagaimana kami menghilangkan ini dari kepala, sebenarnya.
‫Tapi sekarang kita masih membutuhkan beberapa hal yang
‫perlu kita tambahkan ke kepala.
‫Dan begitulah skrip ini, dan juga lembar gaya ini.
‫Mari kita cepat menerjemahkan ini di sini ke pug.
‫Dan tautannya juga, dan
‫hanya itu.
‫Mari kita singkirkan
‫bagian ini, dan mari kembali ke langkah berikutnya di sini.
‫Selanjutnya, kita perlu menyalin kode JavaScript ini di sini,
‫ke dalam file kita.
‫Dan untuk naskah kita, tentu saja.
‫Jadi di sini ke dalam mapbox. js.
‫Sekarang Anda mungkin tidak akan memiliki token
‫akses ini pada
‫saat ini, dan karena itu Anda harus sudah
‫melakukannya, atau saya akan menunjukkan cara melakukannya sebentar lagi.
‫Mari kita indentasi bagian ini di sini.
‫Dengan ini, kita sebenarnya sudah siap.
‫Ini seharusnya sudah membuat
‫peta dan menampilkannya di halaman kita.
‫Itu karena wadah di sini diatur ke peta.
‫Dan itu artinya akan
‫menempatkan peta pada elemen dengan ID peta.
‫Itu sebabnya di sini, dalam tur kami, kami memiliki elemen
‫ini di sini, oh, di
‫mana itu?
‫Jadi di sini, kami memiliki elemen dengan peta ID.
‫Alasannya adalah bahwa di sini di Mapbox, kita sebenarnya
‫membutuhkan elemen dengan ID
‫yang kemudian dapat kita tentukan di sini.
‫Dan defaultnya adalah map,
‫dan begitulah saya menyebutnya dalam html.
‫Kemudian kita juga memiliki gaya default di sini,
‫yang akan kita ubah dalam sedetik.
‫Untuk saat ini, mari kembali ke instruksi
‫kita di sini, dan dikatakan bahwa kita sudah selesai di sini.
‫Tapi sekarang mari kita kembali
‫ke akun kita dan membuat token yang
‫kita butuhkan agar dapat benar-benar mengakses Mapbox.
‫Tolong jangan hanya menyalin token
‫saya, itu tidak akan bekerja dengan baik untuk Anda.
‫Tapi sebaliknya, buat sendiri.
‫Anda hanya dapat membuat nama baru untuk itu.
‫Mari kita menyebutnya sesuatu seperti ini.
‫Dan kemudian buat token di sini.
‫Kemudian Anda memasukkan
‫kata sandi Anda, dan Anda dapat menggunakan token itu.
‫Jadi, sekali lagi, saya tidak yakin apakah token
‫ini sudah dibuat untuk Anda, atau apakah Anda benar-benar
‫perlu membuat token baru.
‫Bagaimanapun, itu juga bagus untuk memiliki satu token untuk setiap proyek,
‫sehingga Anda kemudian
‫dapat membatasi token itu hanya untuk proyek itu.
‫Saya membuat akun saya di sini sejak lama, jadi saya
‫tidak begitu yakin, sekali lagi, bagaimana cara kerjanya, tetapi
‫bagaimanapun juga, dengan memiliki token itu, Anda seharusnya sudah siap.
‫Sebenarnya, ini seharusnya sudah menampilkan peta default kita.
‫Jadi mari kita muat ulang, dan memang, ini adalah peta default kita.
‫Itu tidak terlihat sangat bagus,
‫kami dapat memperbesar,
‫tapi sungguh, gayanya tidak terlalu bagus,
‫dan tidak terlalu cocok dengan situs web
‫kami, dan
‫tentu saja, kami juga tidak
‫memiliki lokasi kami yang diplot ke peta.
‫Dan sekarang mari kita mengurus semua itu.
‫Mari kembali ke Mapbox, dan
‫sekarang kita masuk ke studio desain kita.
‫Mari kita klik di sini pada "mulai mendesain
‫peta," atau lagi, jika situs
‫web Anda terlihat sedikit
‫berbeda pada saat ini, maka cari saja studio desain.
‫Mungkin itu muncul di suatu tempat di sini.
‫Jadi mari kita coba itu.
‫Di sini, kita benar-benar dapat melakukan segala
‫macam hal tentang mendesain peta.
‫Sebenarnya, ini bukan yang saya harapkan, karena
‫agak terlalu rumit untuk mengubah semua hal
‫ini di
‫sini, tetapi ada beberapa gaya default, ah ya,
‫ini yang saya cari.
‫Mari kita buat gaya baru
‫di sini, dan kemudian dari sana kita bisa memilih default.
‫Dan yang saya inginkan adalah gaya ringan ini.
‫Jadi buatlah, dan sebenarnya saya sangat senang dengan
‫tampilannya yang out of the box.
‫Sekarang, untuk beberapa alasan saya tidak
‫melihat apa pun di sini, oke, itu karena di-zoom ke laut.
‫Tapi bagaimanapun, sekarang mari kita perbesar di suatu tempat di sini,
‫dan saya pikir itu sudah terlihat
‫cukup bagus, jadi mari kita tambahkan nama di
‫sini, dan
‫saya menyebutnya Rekaman Video Natour karena saya sudah memiliki
‫gaya Natour, tapi Anda tentu saja dapat
‫menyebutnya apa pun yang Anda inginkan.
‫Mari kita konfirmasi nama di sini, kembali, dan kemudian kita
‫di sini tentang berbagi dan menggunakan.
‫Dan yang kita inginkan bukanlah berbagi, melainkan memanfaatkan.
‫Di suatu tempat di bawah sini, kita akan melihat URL gaya
‫kita, jadi, ya, itu dia.
‫Jadi itu harus berupa URL yang pada dasarnya dimulai dengan Mapbox.
‫Mari kita salin, kembali, lalu ganti gaya yang kita
‫miliki di sini sebagai default, dengan gaya yang
‫baru saja kita buat.
‫Berikan penghematan, dan
‫ya,
‫itu terlihat jauh lebih baik.
‫Dan itulah gaya yang baru saja kita buat.
‫Jadi sekarang kita dapat memperbesar, memperkecil,
‫atau sebenarnya sebaliknya, kita dapat
‫menggeser peta ke mana pun kita
‫inginkan, dan kita juga dapat menentukan banyak properti, opsi
‫untuk peta ini.
‫Saat ini, setiap kali kita memuat
‫peta, selalu terlihat
‫sama, selalu berpusat di sini di Boston.
‫Tapi kita bisa mengubahnya dengan menentukan pusat
‫di sini.
‫Jadi kita perlu memasukkan array dua koordinat.
‫Mari kita dapatkan yang dari LA
‫yang kita gunakan sebelumnya di Postman,
‫Jadi
‫sebenarnya ini, tapi, sebenarnya, Mapbox persis seperti MongoDB,
‫dalam aspek pertama membutuhkan garis bujur, dan
‫kemudian garis lintang.
‫Kita perlu menggantinya di sini.
‫Dan mari kita lihat apa yang kita dapatkan.
‫Dan, yah, itu tidak benar-benar membawa kita ke mana pun.
‫Mari kita juga menentukan tingkat zoom di sini.
‫Katakanlah empat.
‫Mungkin itu memperbaikinya.
‫Dan sebenarnya, itulah ilusi ini.
‫Jadi ada tingkat zoom yang berbeda.
‫Misalnya kita bisa mencobanya di
‫sini juga, dan itu seharusnya lebih diperbesar,
‫atau mungkin diperkecil, saya tidak begitu yakin.
‫Ah, oke, jadi itu benar-benar memperbesarnya.
‫Jadi katakanlah 10 di sini
‫misalnya, dan seperti yang Anda lihat
‫saya sangat suka bermain-main
‫dengan hal-hal semacam ini, dan ya, pada 10 sekarang benar-benar diperbesar.
‫Kami juga dapat mengatakan bahwa kami ingin itu tidak
‫interaktif, dan itu sangat sederhana.
‫Mari kita atur interaktif ke false.
‫Dan pada dasarnya peta Anda
‫akan terlihat seperti gambar sederhana di situs web Anda.
‫Jadi seperti yang Anda lihat, saya tidak dapat menggulir apa pun
‫di sini, dan saya juga tidak dapat menggesernya.
‫Jadi tidak ada yang bisa saya lakukan sekarang.
‫Dan ini sebenarnya hanya beberapa opsi yang dapat
‫kita atur.
‫Mari kita kembali ke sini
‫ke Mapbox, dan ke dokumentasi dan JavaScript Mapbox.
‫Di sini Anda mendapatkan semua dokumentasi
‫untuk semua yang dapat Anda lakukan dengan versi JavaScript dari Mapbox.
‫Yang ingin saya tunjukkan adalah bahwa barang yang baru
‫saja saya tunjukkan sebenarnya ada di sini.
‫Jadi kami memiliki wadah yang kami tentukan,
‫kami memiliki gaya,
‫dan kami memiliki banyak hal.
‫Sangat interaktif, dan jika
‫Anda mau, tentu saja Anda bisa bermain-main dengan
‫semua ini.
‫Saya hanya ingin menunjukkan kepada Anda bahwa ini
‫adalah bagaimana Anda dapat mempelajari lebih banyak hal tentang Mapbox.
‫Sekarang, kami sebenarnya tidak menginginkan semua ini.
‫Karena kami tidak ingin memusatkan peta di mana
‫pun, tetapi kami ingin peta
‫secara otomatis mengetahui posisi peta berdasarkan titik lokasi tur kami.
‫Apa yang akan kita lakukan
‫sekarang pada dasarnya adalah meletakkan semua lokasi untuk tur tertentu di
‫peta, dan kemudian membiarkan peta pada dasarnya
‫mencari tahu secara otomatis bagian mana dari peta yang harus
‫ditampilkan agar sesuai dengan semua titik ini dengan benar.
‫Hal pertama yang perlu kita lakukan
‫adalah membuat variabel terikat.
‫Batas sama dengan Mapbox GL baru. batas garis bujur.
‫Dan kami mendapatkan akses ke objek Mapbox ini
‫karena kami menyertakan pustaka Mapbox di
‫awal halaman kami.
‫Di
‫sini, termasuk skrip ini
‫di sini, jadi pustaka Mapbox
‫ini, inilah yang mengekspos objek Mapbox GL, yang kemudian
‫dapat kita gunakan di seluruh situs kita.
‫Objek pembatas di sini pada dasarnya
‫adalah area yang akan ditampilkan di peta.
‫Kami sekarang akan memperluasnya dengan semua lokasi yang
‫ada di array lokasi kami.
‫Dan ini akan sedikit lebih masuk akal setelah
‫kita benar-benar mulai menggunakannya.
‫Sekarang mari kita mengulang semua lokasi kita dan
‫menambahkan penanda untuk masing-masing lokasi.
‫Untuk masing-masing, dan
‫mari kita lihat kunci untuk
‫lokasi, jadi di sini kita ingin menambahkan penanda.
‫Dan untuk itu, kita sebenarnya perlu
‫membuat elemen html baru, dalam
‫hal ini, ini benar-benar level yang sedikit rendah, tapi menurut
‫saya itu sangat bagus,
‫karena, seperti ini, kita memiliki banyak kendali
‫atas apa yang sebenarnya terjadi di peta kami.
‫Dan apa yang saya tunjukkan
‫di sini sebenarnya hanyalah sebagian kecil dari
‫semua hal hebat yang dapat Anda lakukan dengan Mapbox.
‫Ini di sini hanya JavaScript standar,
‫jadi kita bisa menggunakan
‫elemen create untuk membuat elemen.
‫Seperti namanya, dan
‫di sini kami ingin membuat diff baru.
‫Dan kami juga ingin memberikan nama kelas, dan
‫mengaturnya ke penanda.
‫Dan ini dia, ini adalah titik koma.
‫Jadi di CSS kita sebenarnya memiliki
‫kelas untuk penanda ini.
‫Marker, di sini Anda melihat gambar latar belakang yang ditentukan, yang
‫merupakan pin hijau ini di sini.
‫Pin yang akan Anda lihat sebentar lagi di peta, sebenarnya
‫adalah gambar khusus yang saya rancang.
‫Itu tidak datang langsung dari Mapbox.
‫Seperti ini, Anda benar-benar dapat menyesuaikannya dengan gaya dan merek
‫Anda sendiri.
‫Saya juga mendefinisikan ukuran penanda di sini, ya, itu
‫benar-benar dapat disesuaikan.
‫Sekarang kita benar-benar membuat penanda baru di dalam Mapbox dengan
‫mengatakan new Mapbox GL. penanda.
‫Dan kemudian di sana, kita melewati elemen yang baru saja kita buat,
‫jadi L, dan kemudian kita juga menentukan properti jangkar.
‫Yang saya
‫atur ke bawah di sini.
‫Artinya, itu adalah bagian bawah elemen, dan dalam hal
‫ini bagian bawah pin itu,
‫yang akan ditempatkan di lokasi GPS yang tepat.
‫Kita juga bisa meletakkannya di
‫tengah, tapi menurut saya lebih masuk akal
‫bahwa, mari kita buka gambar itu lagi,
‫saya pikir lebih masuk akal bahwa ujung gambar
‫ini adalah yang benar-benar menunjuk ke lokasi
‫GPS yang tepat.
‫Itulah yang kami lakukan dengan properti jangkar ini.
‫Jadi itulah
‫penandanya, dan sekarang, kita bisa memanggil beberapa metode.
‫Saat ini, Mapbox tidak tahu apa-apa tentang koordinat GPS
‫penanda ini.
‫Kami tidak mengaturnya di mana pun.
‫Mari kita lakukan
‫sekarang, jadi atur bujur, lintang, dan sama dengan
‫lokasi. koordinat.
‫Ingatlah bahwa ini di sini adalah susunan garis bujur dan garis
‫lintang yang dipaksakan.
‫Itulah yang diharapkan Mapbox.
‫Hanya untuk memastikan Anda benar-benar mengerti,
‫mari kita lihat turnya.
‫Sekali lagi, setiap lokasi memiliki properti koordinat ini, dan
‫dari situlah kita sekarang membaca koordinatnya.
‫Lokasi. koordinat.
‫Dan kemudian, akhirnya, tambahkan ke dan kemudian variabel peta kita.
‫Jadi peta ini di sini adalah variabel peta tempat kami
‫membuat Kotak Peta baru kami. peta tepat di awal.
‫Dan sekarang, yang perlu kita lakukan untuk menyelesaikannya, adalah
‫benar-benar memperluas batas kita.
‫Jadi batas. memperpanjang dan juga dengan lokasi, atau sebenarnya "loc",
‫yang merupakan lokasi saat ini. koordinat.
‫Bagian pertama di sini sebenarnya menambahkan penanda,
‫atau membuat,
‫mari kita membuatnya lebih
‫spesifik,
‫buat penanda lalu
‫tambahkan penanda dan kemudian di sini, perpanjang batas
‫peta untuk menyertakan lokasi saat ini.
‫Tapi itu masih belum cukup, karena sekarang
‫kami juga membuatnya agar peta benar-benar
‫sesuai dengan batas.
‫Jadi peta. cocok, tidak tidak menemukan, tetapi sesuai batas,
‫dan tentu saja objek batas kami.
‫Wah.
‫Jadi, banyak pekerjaan hanya untuk menempatkan beberapa penanda di peta.
‫Tapi, sekali lagi, saya merasa sangat menyenangkan
‫bekerja dengan perpustakaan ini.
‫Dan sekarang mari kita lihat dan
‫saya tidak begitu yakin apakah semuanya berjalan baik di sini.
‫Dan sebenarnya, tidak, jadi peta
‫kita tidak benar-benar ditemukan di mana pun, mari kita
‫perkecil sedikit untuk melihat apakah peta itu
‫benar-benar ada di suatu
‫tempat, dan tidak.
‫Mari kita lihat konsol
‫kita, dan memang ada semacam kesalahan.
‫Jadi lat, batas bujur bukanlah konstruktor,
‫dan memang sebaliknya.
‫Jadi sekali lagi, Mapbox, seperti MongoDB,
‫mengharapkan koordinat menjadi bujur terlebih dahulu,
‫lalu lintang.
‫Itulah yang kita
‫miliki di sini dalam nama ini,
‫dan jadi di sini seharusnya sama.
‫Jadi bujur, lintang.
‫Mari kita coba lagi di sini.
‫Ahh, sekarang berhasil.
‫Sangat bagus.
‫Anda melihat zoom yang bagus itu.
‫Itulah yang dilakukan metode batas pas.
‫Jadi itu bergerak dan memperbesar peta tepat ke batas
‫agar benar-benar sesuai dengan penanda kita.
‫Sekarang, Anda melihat bahwa kami memiliki elemen lain semacam ini di sini yang
‫tumpang tindih dengan peta kami.
‫Dan itu karena desain yang saya buat
‫dengan tepi ini di sini.
‫Tapi itu tidak masalah karena
‫kita sebenarnya bisa secara manual menentukan beberapa padding ke batas ini.
‫Kita dapat melewatkan sebuah objek di
‫sini, dan katakanlah 200 piksel atas, 200 piksel
‫bawah juga, dan kemudian
‫kiri dan kanan 100 piksel.
‫Dan kita tidak perlu menentukan piksel di sini,
‫saya rasa itu hanya saya yang menulis begitu banyak CSS.
‫Mari kita coba lagi.
‫Oh, animasi zoom yang
‫bagus, tapi itu tidak terlalu menghargai pengaturan kami.
‫Dan sebenarnya, itu karena ini tidak benar.
‫Jadi, sebagai gantinya kita harus membuat objek,
‫dan kemudian di sana kita perlu menentukan properti padding, yang
‫kemudian memiliki semua ini.
‫Jadi mari kita lakukan itu.
‫Lapisan.
‫Dan sekarang,
‫potong ini dan taruh di sana.
‫Berikan simpanan di sini.
‫Sekali lagi.
‫Astaga, masih ada yang salah di sini.
‫Apa itu?
‫Ahh, dan tentu saja kode ini tidak boleh ada di sini.
‫Itu tidak dalam batas, itu memang di sini dalam batas yang sesuai.
‫Jadi ini adalah benar-benar di mana masuk akal untuk menjadi.
‫Mari kita perbaiki kode ini di sini, dan sekarang itu masuk akal.
‫Tentu saja harus
‫dalam batas-batas yang pas, yaitu pada akhirnya,
‫fungsi yang menjalankan gerakan dan zooming.
‫Di situlah padding
‫seharusnya, dan kita bisa menentukan banyak opsi lain.
‫Dan sekali lagi, jika
‫Anda tertarik dengan itu, lihat saja dokumentasinya.
‫Jadi percobaan ketiga di
‫sini, semoga kali ini saya melakukannya
‫dengan benar, ahh, dan ya, itu terlihat jauh lebih baik.
‫Tapi, masih ada beberapa hal yang bisa kami perbaiki di
‫sini, karena saat ini kami bahkan tidak
‫tahu apa masing-masing lokasi tersebut.
‫Jadi kami sebenarnya ingin semacam pop-up di sini,
‫yang kemudian menampilkan informasi tentang lokasi.
‫Tidak hanya penanda, tetapi kami juga ingin menambahkan pop-up.
‫Dan itu sedikit mirip dengan benar-benar menambahkan penanda, jadi
‫kami katakan Mapbox GL baru. muncul.
‫Kemudian, seperti sebelumnya, kita tentukan koordinat
‫pop-up itu.
‫Jadi yang di sini.
‫Kemudian kita juga perlu mendefinisikan html untuk pop-up ini,
‫dan saya akan melakukannya sekarang menggunakan metode set
‫html, karena itu akan memungkinkan saya untuk
‫menambahkan beberapa konten langsung ke
‫dalam html itu, jadi setel html, dan kemudian string templat di sini.
‫Saya ingin ini menjadi
‫paragraf, dan informasi yang ingin saya tampilkan di
‫sini adalah hari di mana kita akan berada
‫di lokasi ini, dan kemudian nama lokasinya.
‫Jadi pada dasarnya, saya ingin menampilkan hari, jadi
‫itulah mengapa kami membuat properti hari ini di sini,
‫dan kemudian deskripsinya.
‫Hari, dan kemudian lokasi, ingat yang merupakan indie lokasi saat
‫ini untuk setiap loop, dan
‫kemudian hari,
‫lokasi. keterangan.
‫Simpan di
‫sini, yang terlihat jauh lebih bagus sekarang.
‫Dan kemudian, seperti yang lainnya, kita
‫juga perlu melakukan add to, dan kemudian variabel peta kita.
‫Dan ini tidak akan terlihat sempurna,
‫karena kita perlu menentukan beberapa opsi, tetapi saya
‫masih ingin menunjukkan kepada Anda hasilnya saat ini.
‫Jadi, Anda melihat bahwa mereka sebenarnya tumpang tindih
‫dengan penanda sekarang.
‫Kami sebenarnya dapat memperbaikinya menggunakan properti offset.
‫Kami meneruskan opsi itu di sini ke pop-up baru.
‫Kami
‫mengatakan offset 30 piksel.
‫Dan saya juga memperhatikan
‫bahwa kita memiliki terlalu banyak padding di
‫bagian bawah, jadi mari kita kurangi itu menjadi 150 dan lakukan ini lagi.
‫Jadi, ini terlihat cukup bagus menurut saya.
‫Jadi siapa pun yang sekarang melihat
‫halaman kami, dapat dengan cepat melihat rencana perjalanan
‫seperti apa yang akan ada di tur ini.
‫Dan jika ada terlalu banyak
‫informasi, kami juga dapat menutup pop-up ini.
‫Dan kami benar-benar dapat menambahkan semua jenis barang ke peta ini.
‫Misalnya, kita dapat membuat garis ini di
‫antara titik-titik ini, dan
‫menggabungkannya bersama-sama, seperti garis hijau di sini atau semacamnya.
‫Atau kita juga bisa menampilkan rute sebenarnya
‫dari satu titik ke
‫titik lainnya dengan menggunakan petunjuk arah pada
‫dasarnya, tapi mari kita sederhanakan di sini.
‫Satu-satunya hal yang tersisa untuk
‫saya lakukan di sini, adalah menonaktifkan fungsi zoom.
‫Karena sekarang, katakanlah
‫kita memperbesar halaman ini,
‫atau sebenarnya jika kita menggulir
‫halaman ini, dan begitu kita
‫mencapai ini di sini, dan
‫kemudian terus menggulir di sini, lalu kita menggulir peta alih-alih halaman.
‫Itu bukan pengalaman pengguna yang baik, jadi
‫yang perlu kita
‫lakukan sekarang adalah menonaktifkan fungsi pengguliran di
‫peta ini.
‫Kami masih akan mengizinkan orang untuk menggeser seperti ini,
‫tetapi zoom akan dinonaktifkan.
‫Mari kita pergi ke sini ke peta kita dan menambahkan itu.
‫Dan kami tidak menggunakan default interaktif, karena kami
‫bahkan tidak dapat menggeser peta.
‫Tapi sekali lagi, itu setidaknya harus diizinkan.
‫Opsi yang saya atur di sini adalah scroll zoom false.
‫Dan sekali lagi, untuk semua kemungkinan
‫opsi yang dapat
‫Anda atur di sini, silakan saja dan lihat referensinya.
‫Dan sekarang, ketika kita meletakkan mouse kita di sini dan
‫menggulir, itu tidak mengubah tingkat zoom.
‫Sempurna.
‫Kami masih bisa menggeser, jadi saya pikir itu terlihat sangat bagus sekarang.
‫Mari kita uji ini di yang lain.
‫Katakanlah di sini pejalan kaki hutan.
‫Jadi, itu masih berfungsi.
‫Dan ini di sini agak tumpang tindih,
‫tapi tidak masalah, kita selalu bisa menutupnya jika kita mau.
‫Mari kita lihat di sini misalnya, penjelajah laut.
‫Dan jika
‫kita cukup cepat, kita bahkan dapat
‫melihat animasi zoom yang memindahkan peta ke lokasi tersebut.
‫Oke, sempurna.
‫Jadi saya harap Anda dapat benar-benar
‫mengikuti contoh ini dengan semua yang kami lakukan di Mapbox.
‫Sekarang jika ada yang tidak berfungsi, pastikan
‫Anda menggunakan versi
‫yang mirip dengan versi
‫saya, jadi yang saya maksud adalah versi pustaka Mapbox yang serupa.
‫Yang dalam kasus saya di sini adalah versi 0. 54.
‫Anda mungkin tidak harus 1. sesuatu.
‫Jadi jika Anda
‫menonton video ini lama setelah rekaman ini dan memiliki V1 di
‫sini, silakan lanjutkan dan ubah ke 0. sesuatu, sehingga pada dasarnya
‫tidak ada perubahan yang melanggar di sana.
‫Bagaimanapun, dengan itu, kami benar-benar menyelesaikan halaman tur kami, jadi
‫kami tidak lagi membutuhkan
‫semua ini, petanya juga ada di
‫sana, jadi, bagian dari situs web ini sebenarnya sudah selesai.
‫Luar biasa.
‫Selamat untuk mewujudkannya, karena benar-benar mulai membangun
‫situs web yang indah ini menggunakan semua teknologi luar
‫biasa yang telah Anda pelajari
‫sejauh ini.