Membuat peta interaktif di WordPress dengan MAPSVG

Plugin WordPress MAPSVG membolehkan anda membuat peta interaktif yang kaya dengan ciri-ciri. Peta interaktif adalah keperluan umum untuk projek apabila anda perlu memvisualisasikan kesan lokasi tertentu. Jika anda sudah menggunakan WordPress, plugin yang kuat ini mungkin menjadi penyelesaian anda untuk membuat peta yang boleh dimasukkan ke dalam pengeluaran.

Ingat pengalaman terakhir anda untuk melaksanakan atau merancang peta interaktif. Anda mungkin menganggarkan bahawa ia akan mengambil banyak masa untuk memetakan data dari sumber asal ke JSON dan kemudian menyambungkannya ke kerangka visual (seperti D3). Seterusnya adalah untuk mengkonfigurasi bagaimana pengguna berinteraksi dengan peta itu sendiri. Ini adalah banyak usaha pembangunan.

Seterusnya adalah soalan mengenai cara menguruskan data peta. Adakah data disimpan dalam fail luaran? Adakah saya perlu memanggil API secara berkala untuk mendapatkan data? Menguruskan data ini secara langsung di panel Admin WordPress laman web anda lebih mudah, sama seperti menguruskan semua kandungan laman web yang lain. Tidak perlu membuka editor kod dan mengekalkan peta secara berasingan!

Ini, bersama -sama dengan banyak ciri peta biasa yang dibina ke dalam plugin MAPSVG, di mana anda boleh membuat pelbagai peta unik untuk memenuhi keperluan visual anda. Kami akan menggali plugin ini dan menggunakannya untuk membina peta berasaskan SVG interaktif di WordPress.

Pilihan untuk membuat peta baru

Setelah dipasang, MAPSVG menyediakan lima pilihan untuk membuat peta baru berdasarkan ciri vektor, imej, atau Google MAPS. Untuk tujuan artikel ini, saya akan memberi tumpuan kepada fungsi SVG.

Dalam pilihan peta SVG yang baru , terdapat hampir 200 peta vektor negara dan rantau yang tidak terjejas. MAPSVG Lite, versi percuma pemalam ini, membolehkan pentadbir tapak membuat peta interaktif dengan tooltips, paparan butiran yang disesuaikan, dan penanda yang diletakkan melalui koordinat latitud dan longitud. Menaik taraf ke versi berbayar ($ 46) akan memberikan sokongan berikut: Katalog Peta, Carian Bersepadu, Penapis Lokasi, Pandangan Terperinci Kawasan Peta, Integrasi dengan Artikel WordPress dan Lapangan Advanced Custom, Tooltips Custom dan Peta Contour, dan Ciri -ciri Lanjutan yang lain.

Buat peta baru

Ok, kami memilih untuk membuat peta berasaskan SVG baru. Pilih pilihan dari menu lungsur untuk membuat peta vektor. Pilih peta geocalibrated dan bukannya peta yang tidak diselaraskan apabila mungkin. Peta Geocalibration Dikemaskini dengan Tajuk Wilayah. Di samping itu, mereka membolehkan anda menambah penanda peta oleh koordinat geografi (iaitu bujur dan latitud) atau dengan memasukkan alamat yang secara automatik ditukar kepada koordinat.

Jika anda menggunakan fail SVG tersuai anda sendiri, pilih pilihan SVG muat naik . Selepas memuat naik, fail tersuai anda akan dipaparkan di bawah <kbd>user-uploads/your-file-name.svg</kbd> dalam menu drop-down peta SVG baru . Sebelum memuat naik fail ke peta plugin, saya cadangkan anda melakukan beberapa langkah tambahan untuk mengoptimumkan fail:

1. Bidang yang mengandungi pelbagai laluan vektor, seperti Hawaii, perlu dikelompokkan sebagai laluan komposit dalam ilustrator. Dalam Illustrator, anda boleh melakukan ini dengan memilih laluan yang berkaitan dan kemudian pergi ke Objek > Laluan Komposit > Buat (atau CMD 8 ).
2. Pastikan lapisan anda mempunyai nama yang jelas dan unik. Nama lapisan akan digunakan sebagai kawasan untuk templat dan tujuan organisasi {{id}}.
3. Seterusnya, buka fail SVG anda dalam editor teks dan berikan setiap laluan atribut tajuk. Ini akan digunakan sebagai kawasan dalam templat {{title}}.

Medan ID dan tajuk adalah sifat lalai yang diekstrak dari fail dan digunakan untuk mengaitkannya dengan laluan individu. Bermula dengan versi terkini plugin (pada masa ini 5.3.7), anda boleh mengedit fail SVG secara langsung di panel Admin WordPress untuk menetapkan nilai ID dan tajuk untuk setiap laluan, serta menyesuaikan definisi laluan dan menarik laluan baru. Saya secara peribadi lebih suka kawalan untuk mengedit dalam Illustrator dan Editor Kod, tetapi ini masih merupakan pilihan yang baik.

Mari kita terus menggunakan peta geocalibration yang disediakan oleh plugin dan buat demo menggunakan entri dari https://www.php.cn/link/e74b103532a9337cc42f051774Ac49d4 tahun ini untuk memvisualisasikan data (bahagian) dari dunia ini.

Menetapkan gaya peta

Sekarang bahawa kami sudah bersedia dan pilih fail SVG, antara muka plugin akan membuka panel Tetapan. Di sini kami menetapkan nama peta, tentukan saiz dan saiz, dan membolehkan petak alat dan tetapan utama yang lain.

Sebagai tambahan kepada tab Tetapan, anda juga akan melihat tab untuk mengawal dan menetapkan ciri peta tertentu. Tukar ke warna tab seterusnya, di mana kami menetapkan tema peta.

Seperti yang ditunjukkan di atas, kita dapat mengawal nilai mengisi dan strok peta dan pelbagai keadaan aktif setiap laluan. Manfaat menggunakan peta berasaskan vektor! Jadi jika saya membuat fail peta tersuai, saya lebih suka meninggalkan nilai mengisi dan strok seperti yang tidak ditentukan dalam ilustrator. Walau bagaimanapun, lebar strok tidak boleh diselaraskan dengan berkesan dalam UI (kerana ia memerlukan penyuntingan SVG dan mengubah nilai setiap laluan), jadi lebih baik untuk menetapkannya dalam Illustrator dan memuat naik semula fail.

Berikut adalah pilihan warna untuk bekas (seperti direktori, penapis, sidebars, dan lain -lain), serta nilai warna minimum dan maksimum untuk peta kontur (lebih lanjut mengenai ini kemudian!). Gaya kontena juga boleh ditetapkan secara global dalam lembaran gaya tema anda atau dalam tab CSS tetapan.

Tetapkan data peta

Secara lalai, tab Kawasan akan menduduki kawasan tersebut berdasarkan laluan SVG yang dipilih, menunjukkan nilai ID dan tajuknya. Anda boleh mengedit dan membuat medan kawasan anda sendiri seperti yang diperlukan. Begitu juga dengan tab pangkalan data -di mana anda boleh memasukkan data peta dan mengaitkannya dengan kawasan peta.

Untuk penyertaan zon dan pangkalan data, anda boleh memilih untuk membuat medan dan kandungan secara manual dalam UI, atau memuat naik data dari fail CSV.

Perhatikan dataset akhir dalam tangkapan skrin di atas, terutamanya bidang kawasan tersuai untuk butiran mesyuarat, butiran mesyuarat, dan bidang yang memuat naik imej yang menunjukkan bendera setiap negara dalam pangkalan data. Kita boleh melangkah lebih jauh dengan memisahkan kandungan dari peta itu sendiri dan menariknya sebagai data artikel untuk mana -mana jenis pos WordPress. Di sinilah medan adat maju dapat membantu membuat bidang data ini dalam editor artikel dan bersekutu data yang dikemukakan dengan nilai dalam peta. Sudah tentu, ini tidak perlu, tetapi demi pemisahan kebimbangan, adalah baik untuk mempunyai pilihan ini.

Tunjukkan data peta

Apabila memaparkan maklumat mengenai kawasan atau objek pangkalan data pada peta, kita mesti menetapkan templat dalam plugin. Terdapat lima jenis templat: pop timbul, tooltip, paparan butiran, direktori, dan tag.

Templat menerima teks biasa, HTML, dan tag handbar untuk memaparkan nilai -nilai pembolehubah rantau dan pangkalan data. Jika anda menarik data artikel melalui medan pangkalan data artikel, anda akan mempunyai akses ke medan WordPress standard, post.id, post.post_title, post.post_content, post.url, dan mana -mana bidang tersuai yang dibuat menggunakan sintaks ini: pos.acf.my_field_name. Setiap kali anda perlu membuat medan teks yang kaya (seperti post.post_content), anda mesti menggunakan hendal '{{{triple-stah}}} sintaks untuk mengeluarkan html yang diberikan.

Penggunaan sintaks handlebar juga bermakna kita boleh membina logik bersyarat ke dalam templat untuk membuat pandangan templat dinamik berdasarkan nilai rantau dan pangkalan data. Dalam MAPSVG 5.0 dan kemudian, pilihan templat telah dipenuhi dengan komen HTML dan tag permulaan untuk zon lalai dan bidang pangkalan data. Sangat berguna!

Tambahkan peta ke halaman

MAPSVG mengandungi kod shortcode untuk membenamkan peta ke mana -mana halaman atau artikel. Letakkan blok shortcode Gutenberg pada halaman dan panggil MAPSVG dengan ID peta untuk dibenamkan: [MAPSVG].

Bagi pengguna yang bekerja di editor WordPress klasik atau gunakan versi plug-in lebih awal daripada 5.0, ikon peta ditambah ke bar alat tinymce, yang menyuntik kod shortcode ke dalam kandungan artikel anda, menggunakan ID peta. ID peta boleh didapati di papan pemuka editor MAPSVG atau di serbuk roti atas peta aktiviti. Salinan mudah ke butang clipboard terkandung di sebelah dua contoh kod shortcode untuk merebutnya untuk digunakan dalam editor artikel.

Demo

Selepas melengkapkan kemasukan data dan menukar beberapa tetapan MAPSVG tambahan, kami mendapat peta interaktif dan responsif yang berfungsi sepenuhnya! Perhatikan bahawa kami mempunyai sedikit pendedahan kepada banyak kod semasa proses ini.

Lihat demo penuh

Di luar peta

Kelebihan fungsi SVG plugin ialah, secara asasnya, SVG boleh menjadi apa sahaja yang kita mahu. Bolehkah anda membuat "peta" interaktif dari laluan vektor hampir apa -apa: pelan lantai seni bina, maklumat grafik, atau garis masa interaktif kerjaya anda? Ia lebih daripada sekadar peta!

Bukan di WordPress? Tiada masalah. MAPSVG juga boleh didapati sebagai plugin jQuery, dan ia juga bernilai cuba menggunakan peta interaktif di luar WordPress.

sumber

• Laman web MAPSVG (termasuk demonstrasi masa nyata antara muka pengurusan)
• Tutorial MAPSVG
• Dokumentasi MAPSVG
• MAPSVG LITE (Direktori Plugin WordPress)
• Arkib Tutorial Video MAPSVG (YouTube)

Atas ialah kandungan terperinci Membuat peta interaktif di WordPress dengan MAPSVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!