Tinjauan Plugin MapSVG: Membuat Peta Interaktif di WordPress

Tinjauan Plugin MapSVG: Membuat Peta Interaktif di WordPress

MapSVG adalah plugin WordPress yang bagus yang membantu Anda membuat peta interaktif dan responsif di situs WordPress Anda. Berkat serangkaian fitur yang bagus, Anda dapat mengubah file SVG apa pun menjadi peta interaktif. Bukan itu saja, Anda dapat membuat denah lantai, infografis, peta Google, peta Chloropleth, peta gambar, dan banyak lagi lainnya..


Dalam ulasan ini, kami melihat fitur yang menjadikan MapSVG salah satu plugin pemetaan terbaik untuk WordPress di web. Kami juga menguji drive plugin, jadi tetaplah membaca dan membaca sampai akhir. Ini jelas merupakan tawaran yang bagus, jadi ambilkan secangkir kopi untuk diri sendiri dan mari berguling.

MapSVG Peta Interaktif untuk WordPress

Dipersembahkan oleh pengembang luar biasa Roman Stepanov, MapSVG membuat pembuatan peta interaktif menjadi mudah dan menyenangkan. Saya bersenang-senang bermain-main dengan berbagai opsi meskipun saya harus membaca dokumentasi terlebih dahulu. Karena itu, mari kita lihat fitur yang tersedia di MapSVG.

100+ Peta Siap

Untuk membantu Anda memulai, MapSVG hadir dengan lebih dari 100 peta yang dikalibrasi secara geografis. Ada peta dunia, dan sudah dibagi lagi menjadi wilayah yang dapat diklik (negara). Kemudian Anda memiliki peta negara dengan masing-masing negara bagian / provinsi. Anda juga mendapatkan beberapa peta khusus.

Dan karena sebagian besar peta dikalibrasi, Anda dapat menambahkan penanda ke peta menggunakan alamat atau koordinat. Selain itu, Anda dapat membuat peta SVG Anda sendiri dan mengunggahnya ke MapSVG.

Yang harus Anda lakukan adalah membuat gambar SVG menggunakan perangkat lunak pengedit vektor seperti Inkscape atau Adobe Illustrator, mengunggah benda sialan itu dan menyesuaikannya.

Tahukah Anda apa artinya ini? Ini berarti Anda dapat merancang diagram interaktif dan memvisualisasikan statistik (dan umumnya meningkatkan pengalaman pengguna) tanpa membungkuk ke belakang.

Objek Basis Data

MapSVG memungkinkan Anda membuat objek dan menambahkannya ke area spesifik peta Anda. Ini memungkinkan Anda untuk memperkaya peta Anda dengan informasi yang menawarkan pengalaman mendalam kepada pengunjung web Anda.

Untuk tujuan ilustrasi, mari kita asumsikan sejenak bahwa Anda adalah agen real estat dengan properti untuk dijual di seluruh negara. Anda melakukannya dengan sangat baik dan ingin menampilkan properti yang tersedia di peta. Anda ingin menampilkan informasi seperti ukuran, alamat, harga, foto, dan hal-hal seperti itu.

MapSVG memungkinkan Anda untuk menambahkan detail ini ke database, dan kemudian melampirkan info ke satu atau beberapa area peta Anda. Setiap kali pengguna mengklik area yang Anda tentukan, katakan suatu keadaan, detailnya ditampilkan dalam popover yang bagus, tampilan detail atau tooltip.

Direktori yang dapat difilter dan dicari

Seolah menambahkan objek basis data tidak cukup, MapSVG memungkinkan Anda membuat direktori dan menampilkannya di sebelah peta Anda. Dengan analogi real estat kami, Anda mungkin ingin menunjukkan semua properti (atau agen) yang tersedia di negara bagian tertentu. MapSVG membuat ini sangat mungkin.

Pengguna dapat memfilter item dalam direktori menggunakan filter drop-down atau kotak pencarian. Lebih lanjut, pengguna dapat memfilter objek dengan mengklik area tertentu di peta. Fitur direktori ini membuat diagram dan peta yang paling kompleks menjadi mudah untuk dipahami. Selain itu, pengguna dapat dengan mudah menemukan informasi yang merupakan nilai tambah untuk UX Anda.

Tingkatkan Google Maps

Apakah saya menyebutkan Anda dapat mengintegrasikan MapSVG dengan Google Maps? Ya, Anda bisa dan Anda hanya perlu kunci Google API. Biasanya, Anda tidak dapat mengubahsuaikan Google Maps secara luas, yang merupakan atau dapat membatasi dalam beberapa skenario. MapSVG memungkinkan Anda untuk mengatasi tantangan ini.

Bagaimana? Anda dapat melapisi peta vektor di atas semua jenis Google Map (medan, satelit, jalan, atau hibrida). Dan karena gambar vektor bersifat interaktif, Anda kemudian dapat mengubah Google Map Anda hingga Anda drop. Hasil akhir yang jelas di sini adalah Anda dapat memberikan lebih banyak kegunaan.

Ingat Google maps dilengkapi dengan satu set kontrol. Sandingkan kontrol-kontrol ini dengan fitur-fitur MapSVG dan Anda secara literal akan membuat pengguna Anda tergila-gila. Mereka akan seperti, “Bagaimana sih mereka melakukan itu?” Fitur ini memungkinkan Anda untuk meningkatkan peta Google Anda dengan menyoroti tengara dan membuat apa pun yang dapat diklik.

Editor CSS, JavaScript, dan Template

Apa gunanya peta yang tidak bisa Anda sesuaikan atau perluas? Roman tampaknya memiliki dasar ini dengan editor CSS dan JavaScript yang bagus. Selama Anda mengetahui jalannya kode, Anda dapat mendorong ilustrasi interaktif Anda hingga batasnya.

Sebagai permulaan, Anda dapat menata peta dan diagram Anda dengan CSS sesuai keinginan, dan tanpa berkeringat. Anda dapat mendesain banyak elemen dari tooltips, popovers, dan wadah info lainnya. Selain itu, Anda dapat memanfaatkan kekuatan JavaScript untuk memperluas fungsionalitas peta default.

Selain itu, Anda mendapatkan editor templat yang membantu Anda membuat templat khusus untuk popover, marker, dan tooltips. Editor templat mudah digunakan, kami tidak mengharapkan Anda mengalami masalah.

Panel Kontrol Intuitif Dengan Live Preview

Bekerja dengan MapSVG cukup mudah berkat dashboard admin intuitif yang membuat membuat peta menjadi mudah. Membuat peta dan ilustrasi interaktif lainnya dengan MapSVG digabungkan dengan mudah dari awal hingga selesai.

Selain itu, plugin ini dilengkapi dengan fitur pratinjau langsung yang memungkinkan Anda melihat perubahan Anda secara langsung. Sekarang Anda tidak perlu bertanya-tanya bagaimana peta Anda akan terlihat setelah selesai. Selanjutnya, Anda tidak perlu pergi ke sana kemari (atau menyegarkan halaman) untuk melihat bagaimana peta Anda terlihat. Manis sekali?

Peta Gambar

Kami menyebutkan peta gambar beberapa menit yang lalu, tetapi saya harus membahas fitur ini sendiri karena saya pikir itu mengesankan. Kita sudah tahu bahwa MapSVG mengkonversi file SVG ke peta interaktif secara otomatis. Cukup gambarkan file SVG, unggah dan sesuaikan.

Tapi tahukah Anda bahwa Anda juga dapat membuat peta dari gambar PNG dan JPEG? Kedengarannya menarik sekarang, kan? MapSVG hadir dengan alat menggambar yang brilian yang memungkinkan Anda membuat peta interaktif (dapat diklik) dari gambar raster. Bagaimana ini berguna? Anda dapat menggambar rencana rumah interaktif, cetak biru, rute, rencana kota, grafik tempat duduk dan banyak lagi.

Berkat fitur-fitur ini dan luar biasa dukung, tidak ada yang bisa menahan Anda dari membuat peta dan ilustrasi interaktif dari galaksi ini. Langit adalah batasnya di sini kawan-kawan karena MapSVG adalah plugin peta tanpa basa-basi (dan mungkin yang terbaik) untuk WordPress.

Cara Mengatur MapSVG dan Membuat Peta

Menyiapkan MapSVG semudah memasang plugin WordPress khas lainnya. Anda siap untuk mulai membuat peta interaktif segera setelah Anda menginstal dan mengaktifkan plugin. Anda tidak perlu mengonfigurasi apa pun karena MapSVG bekerja langsung di luar kotak.

Dapatkan MapSVG

Mari kita dapatkan pengalaman langsung. Ambil salinan MapSVG, dan ikuti instruksi berikut. Login ke dashboard admin WordPress Anda dan arahkan ke Plugin> Tambah Baru.

mapsvg ulasan plugin wordpress

Selanjutnya, tekan tombol Unggah tombol (1)Pilih File (2), dan tekan tombol Instal Sekarang (3) tombol seperti yang ditunjukkan di bawah ini.

ulasan mapsvg

Tunggu proses instalasi untuk menyelesaikan dan kemudian klik Aktifkan Plugin tombol.

ulasan mapsvg

Dan itu dia; plugin siap digunakan setelah diaktifkan. Klik pada MapSVG item pada admin WordPress untuk meluncurkan panel kontrol.

mapsvg

Sejauh ini bagus, saya pikir Anda akan setuju prosesnya sederhana. Pada panel kontrol, Anda dapat memilih salah satu dari peta yang dibuat sebelumnya, membuat peta Google (perlu integrasi terlebih dahulu, yang semudah menyalin-menempelkan kunci API), membuat peta gambar, mengunggah file SVG atau mengunduh File SVG dengan Google map.

Jika Anda perlu bantuan membuat peta, Anda bisa mendapatkan bantuan cepat dengan mengklik Tutorial atau Dukung tautan di bagian atas panel kontrol. Mari kita pilih salah satu peta yang sudah ada sebelumnya. Saya akan pergi dengan China karena semuanya dibuat di sana sekarang ��

N / B: Pengembang merekomendasikan penggunaan dikalibrasi secara geografis peta bukan tidak dikalibrasi peta karena …

… Peta yang dikalibrasi secara geografis lebih baru, memiliki judul Wilayah dan Anda dapat menambahkan Marker dengan koordinat geografis (lintang / bujur) atau hanya dengan memasukkan alamat yang sedang dikonversi menjadi koordinat secara otomatis. – Tutorial MapSVG

Pilih China (atau peta lain yang Anda suka) dari menu Peta SVG baru menu drop down. Jika Anda membenci bilah gulir, jangan ragu untuk menggunakan kotak pencarian.

membuat peta baru di mapsvg

Di layar berikutnya, isi Judul dan ubah Teks Prapemuat jika Anda cenderung. Pada layar yang sama, Anda dapat mengatur ukuran peta Anda, mematikan desain responsif (diaktifkan secara default, jadi jangan menyentuh tombol putar), nyalakan tooltips dan popover di antara hal-hal lain.

Anda juga akan melihat peta sudah dibagi menjadi beberapa wilayah (provinsi China dalam kasus kami) dan mereka sudah dapat diklik! Juga, biasakan diri Anda dengan kontrol lain termasuk Tidak bisa menu drop down.

Mari kita ubah beberapa warna, dan rasakan pluginnya. Navigasi ke Menu> Warna seperti yang ditunjukkan di bawah ini.

mengedit warna peta di plugin mapsvg wordpress

Itu Warna Layar membantu Anda memilih warna-warna impian Anda. Maksud saya adalah tidak ada batasan untuk warna yang ingin Anda gunakan. Kerjakan saja color picker sampai Anda memiliki sesuatu yang Anda sukai. Saya akan menggunakan nuansa biru karena WordPress bae ��

Pilih warna Anda dan jangan lupa untuk menekan Simpan Ctrl + S tombol seperti yang kita ilustrasikan di bawah ini.

Lihat? Saya bilang MapSVG mudah digunakan. Dengan beberapa klik, saya mengubah warna peta saya dan rasanya enak – seperti itu satu kali, bertahun-tahun yang lalu, ketika saya peringkat pertama di Google. Mengedit bagian peta yang lain sama mudahnya, dan untuk membuktikan maksud saya, saya akan menambahkan tooltips karena itu akan menyenangkan.

Menambahkan Tooltips di MapSVG

Jadi, bagaimana Anda menambahkan tooltips yang muncul ketika Anda mengarahkan mouse ke suatu wilayah di peta Anda? Sangat mudah, dan saya akan menunjukkan caranya sebentar lagi.

Ngomong-ngomong, jika ada yang tidak jelas karena satu dan lain alasan, jangan ragu untuk memeriksa pejabat tersebut Tutorial dan dokumentasi MapSVG. Lebih baik lagi, tekan bagian komentar di akhir posting ini dan saya akan memanggil Thor hanya untukmu. Palu itu memecahkan segalanya ��

Selain itu, menambahkan tooltips melibatkan penambahan templat (ingat editor templat yang kami sebutkan sebelumnya?). Untuk itu, navigasikan ke Menu> Template lalu pilih Tooltip Wilayah. 

menambahkan tooltips di plugin mapsvg wordpress

Selanjutnya, tambahkan kode berikut di editor template dan tekan Simpan Ctrl + S tombol seperti yang ditunjukkan di atas.

Propinsi: {{judul}}

Kode di atas adalah HTML sederhana Tag setang. Jika Anda hanya ingin menunjukkan judul wilayah Anda, Anda menggunakan tag {{title}}. Anda dapat menentukan bidang khusus Anda sendiri juga karena Anda akan segera belajar. Tapi pertama-tama, mari kita nyalakan fitur tooltips.

Navigasi ke Menu> Pengaturan dan nyalakan Tip alat fitur seperti yang kita ilustrasikan di bawah ini.

ulasan mapsvg

Seperti yang Anda lihat pada tangkapan layar di atas, tooltips kami aktif. Namun, saya sebutkan saya akan menunjukkan kepada Anda cara menambahkan bidang khusus sehingga Anda dapat memperkaya tooltips Anda dengan cara yang tak terbayangkan. Katakanlah Anda ingin menambahkan foto dan informasi lainnya ke tooltips Anda. Bagaimana Anda melakukannya? Untuk itu, kami menyerukan kepada objek basis data kami sebutkan sebelumnya.

Menambahkan Bidang Kustom melalui Objek Database

MapSVG memungkinkan Anda untuk menambahkan bidang khusus ke peta Anda. Kami sudah memiliki bidang {{title}}, tetapi mari kita lihat bagaimana kita dapat menambahkan lebih banyak bidang khusus. Anda memiliki pilihan bidang khusus termasuk teks, textarea, kotak centang, gambar, dan seterusnya. Mari kita tambahkan beberapa gambar ke provinsi Nei Mongol.

Pergi ke Menu> Wilayah dan klik Edit bidang tombol seperti yang kita sorot pada gambar di bawah ini.

menambahkan bidang khusus di MapSVG

Di layar berikutnya, tekan tombol Gambar tombol dan kemudian Simpan bidang tombol seperti yang ditunjukkan di bawah ini.

Simpan perubahan Anda dengan mengklik Simpan Ctrl + S tombol. Selalu ingat untuk menyimpan perubahan Anda.

Selanjutnya tekan tombol Daftar tombol seperti yang ditunjukkan pada gambar di bawah ini.

Pindahkan peta Anda ke Edit Wilayah dan klik pada suatu wilayah (kami memilih Nei Mongol). Anda akan melihat bidang kustom baru Anda (Gambar-gambar) ke kanan. Memukul Telusuri tombol. Lihat gambar di bawah.

Di layar berikutnya, tambahkan gambar Anda dan tekan tombol Pilih Gambar tombol.

Anda akan diarahkan kembali ke Edit Wilayah layar di mana Anda harus mengklik OKE (1) tombol. Selanjutnya, klik tombol Simpan Ctrl + S (2) tombol lalu kembali ke Pratinjau (3) mode seperti yang ditunjukkan di bawah ini.

Jika Anda mencoba mengarahkan mouse ke Nei Mongol pada titik ini, gambar tidak akan muncul di tooltip. Mengapa? Ya, kami belum membuat templat untuk gambar. Mari kita lakukan itu saat ini juga.

Navigasi ke Menu> Template> Tooltip Wilayah dan ubah kodenya menjadi ini:

Propinsi: {{judul}}
Gambar pertama:


Semua gambar:
{{# masing-masing gambar}} {{/setiap}}

Berikut adalah gambar untuk ilustrasi lebih lanjut. Ingatlah untuk menekan tombol Menyimpan tombol.

Sekarang, coba mousing atas wilayah yang Anda pilih (Nei Mongol dalam kasus kami). Katakan apa yang kamu lihat. Inilah yang ada di layar saya.

Cukup rapi, bukan? Anda baru saja belajar cara menambahkan bidang khusus ke peta MapSVG Anda. Menambahkan popover dan spidol juga semudah pie. Selain itu, selama Anda mengetahui dasar-dasar ini, Anda baik untuk membuat peta / diagram interaktif apa pun di bawah matahari.

Bekerja dengan MapSVG adalah hal-hal dari siswa kelas empat, terutama karena Roman Stepanov menawarkan dukungan hebat dan bimbingan luar biasa melalui tutorial. Untuk menampilkan peta Anda di situs WordPress Anda, simpan perubahan Anda dan arahkan ke Halaman> Tambah Baru.

Selanjutnya, tekan tombol MapSVG tombol seperti yang ditunjukkan di atas dan pilih peta Anda. Ini menambahkan kode pendek [mapsvg id = ”17 ″ title =” China ”] ke halaman WordPress Anda. Dengan cara apa pun, silakan menambahkan peta di mana saja di situs Anda menggunakan kode pendek. Jangan khawatir, peta yang Anda buat dengan MapSVG adalah 100% responsif yang berarti mereka akan terlihat bagus di banyak perangkat.

Selanjutnya, tekan publish dan lihat hasilnya di frontend.

Kesimpulan

Kami akan berada di sini sepanjang hari jika kami memeriksa setiap fitur yang ada, tetapi saya mendorong Anda untuk mendapatkan salinannya sendiri Plugin MapSVG WordPress map dan berikan test drive. Antara Anda dan saya, ini adalah satu-satunya plugin peta WordPress yang Anda butuhkan.

Anda punya pertanyaan atau saran? Harap jangan ragu untuk menghubungi bagian komentar di bawah ini. Bersulang!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map