Cara Membuat Peta Interaktif di WordPress dengan MapSVG – Ketika Anda ingin menampilkan peta interaktif di website Anda untuk menampilkan lokasi-lokasi cabang bisnis yang tersebar di berbagai kota, wilayah, propinsi maupun negara dengan tampilan peta yang lebih menarik maka Anda bisa membuat peta interaktif dengan mudah dengan menggunakan MapSVG.

MapSVG adalah plugin WordPress yang dapat Anda gunakan untuk membuat peta interaktif dengan mudah. Tidak hanya itu, MapSVG juga memungkinkan Anda membuat berbagai macam gambar interaktif seperti peta, diagram, infographic, anatomi, denah rumah, dan masih banyak lagi dengan menggunggah file SVG buatan Anda sendiri yang nantinya akan di sesuaikan dengan MapSVG sehingga menjadi gambar interaktif yang dapat ditambahkan wilayah, warna, marker, tooltip, popovers dan banyak lagi. Selain bisa digunakan untuk WordPress, MapSVG juga dapat Anda gunakan untuk website jenis lain atau buatan Anda sendiri karena ini memiliki 2 jenis plugin yaitu khusus untuk plugin WordPress dan plugin jQuery untuk website selain WordPress.

Jadi, dengan plugin MapSVG ini Anda bisa menampilkan peta maupun berbagai macam gambar vector dalam bentuk file SVG yang di upload dan diubah menjadi lebih keren dan interaktif di website Anda sehingga pengguna situs Anda lebih mudah dalam memahami peta daripada Anda hanya menampilkan gambar diam.

Pada artikel kali ini saya akan mengulas lebih lengkap tentang fitur-fitur MapSVG, bagaimana menggunakan plugin MapSVG, membuat peta interaktif dan juga membuat gambar denah interaktif dari file SVG yang di upload dan dirubah menjadi gambar denah yang interaktif.

Baca : Buat Peta Interaktif Keren di WordPress dengan WP Map Plugins

Fitur-fitur Unggulan MapSVG

• MapSVG memiliki lebih dari 100 peta geo yang sudah dikalibrasi yang terdiri dari negara utama dari seluruh dunia.
• MapSVG memungkinkan Anda untuk menambahkan penanda wilayah dengan koordinat lintang / bujur atau Anda bisa memasukkan alamat dan MapSVG akan mendapatkan koordinat untuk Anda.
• MapSVG memberikan Anda lebih banyak fleksibilitas karena Anda dapat mengedit file SVG.
• MapSVG memungkinkan Anda untuk mengupload file SVG kustom buatan Anda sendiri sehingga Anda bisa membuat berbagai macam gambar interaktif seperti denah lantai, denah desa, peta anatomis tubuh, infografis dan masih banyak lagi.
• MapSVG memiliki halaman dashboard yang mudah digunakan, lengkap dan terdapat Live Preview yang menjadikan Anda lebih mudah dalam membuat peta.
• MapSVG mengijinkan Anda untuk mengedit file SVG yang sudah Anda di Adobe Illustrator atau InkScape, hapus daerah atau tambahkan baru, ubah semua yang Anda butuhkan, atau membuat peta sendiri dalam bentuk file vector SVG untuk ditampilkan di MapSVG.
• MapSVG mendukung javaScript, sehingga Anda dapat menambahkan penangan acara kustom seperti onClick, mouseOver, mouseOut, beofreLoad, afterLoad dll.
• MapSVG sudah mendukung tampilan responsive, sehingga peta ditampilkan dengan sempurna di berbagai macam perangkat dengan ukuran layar berbeda.
• MapSVG memungkinkan bagi Anda untuk menampilkan berbagai macam objek pada peta, dan MapSVG ini sudah terintegrasi dengan database.
• MapSVG memiliki form builder yang memungkinkan Anda untuk membuat berbagai macam formulir dengan berbagai field yang kemudian data masukan akan disimpan di database.

Harga MapSVG

MapSVG adalah plugin pembuat peta interaktif yang berbayar, plugin ini sudah dibeli oleh ribuan pengguna dan mendapatkan rating yang besar 4.5. Plugin MapSVG bisa Anda beli di Codecanyon dengan harga yang sangat terjangkau yaitu :

• Plugin WordPress : Harga $35 yang mencakup dukungan dan update selama 6 bulan. Dan Anda dapat menambahkan biaya $11,63 untuk dukungan dan update yang lebih panjang yaitu 12 bulan.
• jQuery Plugin : Harga $25 untuk dukungan dan update selama 6 bulan. Dan Anda dapat menambahkan biaya $8.63 untuk dukungan dan update selama 12 bulan.

Buy MapSVG

Cara Menggunakan Plugin MapSVG

Untuk menggunakan plugin MapSVG hal pertama yang perlu Anda lakukan adalah membeli plugin MapSVG dan mendownload plugin tersebut di komputer Anda.

Selanjutnya silahkan install plugin MapSVG melalui dashboard WordPress Anda di menu Plugins » Add New. Upload plugin dalam bentuk file zip yang sudah Anda download di komputer Anda.

Setelah plugin Anda install dan aktifkan, maka akan terdapat menu baru di sidebar admin WordPress anda dengan nama “MapSVG”. Silahkan klik menu tersebut dan Anda akan dihadapkan pada halaman untuk memulai membuat peta pertama Anda.

Gunakan menu dropdown dan Anda akan melihat daftar semua peta dari berbagai negara yang disertakan oleh plugin, ada peta untuk masing-masing negara dan peta dunia yang bisa Anda pilih. Dan pada contoh kali ini saya akan mencoba untuk membuat peta interaktif negara “Indonesia”.

Setelah memilih peta yang Anda pilih, Anda akan dibawa pada halaman baru dengan peta yang Anda pilih ditampilkan di sisi kiri dan di sebelah kanan adalah bagian pengaturan peta dengan berbagai macam menu pengaturan peta.

Pada menu “Settings” Anda dapat mengatur berbagai macam hal seperti memberi nama peta, mengatur lebar dan tinggi, mengunci aspek rasio, menetapkan posisi awal, mengaktifkan atau menonaktifkan peta responsif, memungkinkan menggulir, zoom, pengaturan popovers dan kursor mouse, dan berbagai macam tetang navigasi yang bisa Anda pilih untuk diaktifkan atau di non-aktfikan.

Pada menu “Colors” Anda dapat menyesuaikan warna peta. Banyak Warna peta yang harus Anda sesuaikan seperti selain itu Anda juga dapat mengubah warna background, warna dasar peta, border, warna hover dan kecerahan.

Pada menu “Regions” Anda dapat mensetup opsi individual untuk setiap wilayah yang ditetapkan pada peta, masing-masing wilayah memiliki bagiannya sendiri di mana Anda dapat menentukan warna khusus pada bagian-bagian wilayah tersebut dan juga dapat menambahkan teks tooltip, teks popover dan menambahkan link. Dan Anda bisa menambahkan berbagai macam field tambahan pada bagian ini.

Pada menu “Database” Anda dapat menambahkan berbagai macam field yang nantinya data ini akan tersimpan di database WordPress. Disini juga dapat menambahkan pin penanda khusus ke peta, Anda dapat memasukkan kode pos dan plugin akan menampilkan alamat yang dapat Anda klik atau Anda dapat memasukkan koordinat lattitude / bujur secara langsung. Selain itu Anda juga memiliki pilihan pin image untuk digunakan dengan nama “Marker” dan Anda dapat kembali memasukkan teks tooltip atau teks popover dan HTML yang akan ditampilkan dalam kotak saat penanda diklik. Pada contoh ini saya membuat filed teks untuk nama, alamat, phone dan marker. Jika sudah silahkan klik tombol “+” agar field tersimpan.

Setelah field-field database saya buat seperti diatas, saya mencoba memasukkan satu informasi pada database tersebut yang nantinya akan ditampilkan pada tooltip di peta interaktif.

Selanjutnya saya langsung masuk pada bagian template untuk membuat kode untuk menampilkan isi dari daftar database. Pada bagian template ini Anda harus sedikit mengerti tentang html. Dan saya memasukkan nama-nama field dalam tag template yang di masukkan pada tanda {{  }} pada pilihan “DB Object (Marker) Tooltip”.

Jika sudah selesai Anda bisa menyimpan semua pengaturan peta interaktif ini dengan klik tombol “Save” Pada bagian kanan atas. Dan melihat hasil peta Anda secara live di sebelah kiri pada menu tab “Perview”.

Jika peta yang Anda buat sudah selesai, silahkan pasang peta pada postingan atau halaman yang Anda inginkan dengan cara copy shortcode dari peta tersebut pada bagian atas dan taruh pada halaman atau postingan atau Anda bisa langsung mengambil shortcode langsung melalu menu MapSVG yang ditambahkan pada menu WYSIWYG. Kemudian paste shortcode ke halaman atau posting dan silahkan klik tombol publish. Sekarang Anda dapat melihat peta interaktif Anda sudah terpasang dengan baik.

Jika Anda mahir Javascript, Anda bisa menambahkan Javascript kustom Anda sendiri untuk peta dengan aksi seperti onClick, mouseover, mouseout, beforeload dan afterload. Dan juga Anda menambahkan CSS kustom pada menu CSS agar tampilan peta lebih menarik.

Anda bisa melihat panduan lengkap dari MapSVG ini langsung pada halaman tutorial di website resmi MapSVG disini » MapSVG Tutorial.

Baca : Cara Memasang Google Maps di WordPress

Membuat Peta Interaktif dari File SVG Kustom

Selain dapat membuat peta interaktif yang keren seperti diatas, MapSVG juga dapat menjadikan gambar vector SVG menjadi gambar interaktif untuk berbagai macam kebutuhan seperti membuat grafik untuk denah rumah, denah kota, infografic dan jenis grafik lainnya.

Silahkan buat gambar vector terlebih dahulu dengan menggunakan tool seperti Adobe Illustrator, InkScape, Corel Draw, dll. Setelah itu export ke dalam bentuk file .svg dan upload file tersebut ke dalam WordPress Anda melalui menu MapSVG » Upload SVG file.

Disini saya mencoba menconvert file gambar vektor .eps sebuah denah kota sederhana dan menjadikan file tersebut menjadi file .svg dan kemudian saya upload ke MapSVG untuk di proses menjadi peta interaktif.

Setelah File SVG terupload, Anda bisa mencari peta tersebut pada menu dropdown dan setelah itu gambar ilustrasi tersebut akan terbuka di editor mapSVG. Sekarang saya akan mencoba untuk menambahkan region dan tooltip agar menjadi seperti peta interaktif.

Kesimpulan

MapSVG merupakan plugin pembuat peta interaktif yang sangat bagus dengan animasi yang keren dan fitur lengkap yang dapat Anda beli dengan harga sangat terjangkau yaitu $35 saja. Tapi untuk versi terbaru ini terasa lebih sulit dibanding dengan plugin MapSVG versi 2. Tapi jika Anda mempelajari plugin dengan sangat baik, maka Anda akan bisa menghasilkan peta interaktif yang menakjubkan.

Baca : Cara Menambahkan Lokasi Alamat dan Tempat ke Google Maps

Dan itulah ulasan lengkap mengenai MapSVG peta interaktif dan cara membuat peta interaktif. Semoga artikel ini bermanfaat buat Anda dan selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis