Membuat Plugin Wordpress - OpenStreetMap Viewer

Pendahuluan

Terkadang ada beberapa pengguna Wordpress yang ingin sekali menampilkan peta di website Wordpress mereka. Ada pula yang ingin menampilkan peta lokasi dari sebuah destinasi wisata atau kuliner di setiap postingan-nya agar posting-an yang ditulis menjadi lebih informatif. Oleh karena itu ada yang menampilkan peta dengan cara menampilkan script peta yang ditanamkan di posting-an dengan menggunakan layanan embed peta. Ada juga yang menggunakan plugin untuk menampilkan lokasi dengan memasangnya di website Wordpress mereka. Kali ini kita akan mencoba bagaimana membuat sebuah plugin Wordpress yang dapat menampilkan peta dengan berbasiskan OpenStreetMap. Dan untuk itu kita akan menggunakan Leaflet.js untuk memudahkan kita menggunakan OpenStreetMap.

Persiapan Alat

Untuk mengikuti tutorial ini Anda membutuhkan beberapa alat sebagai berikut:

• Text Editor untuk mengetik kode program yang akan dicoba di tutorial ini
• Leaflet.js, library untuk OpenStreetMap
• XAMPP Stack, Paket perlengkapan untuk pengembang web yang terdiri dari Apache, MySQL/MariaDB, dan PHP5. Anda dapat memasangnya di sistem operasi yang Anda inginkan
• Wordpress, Anda membutuhkan Wordpress yang dapat di-hosting secara pribadi
• jQuery, agar memudahkan Anda untuk melakukan operasi DOM pada halaman web

Struktur folder dan file yang akan dibentuk dapat Anda lihat pada gambar berikut:

[caption id="attachment_7412" align="aligncenter" width="271"] Struktur folder dan file plugin wp_openstreetmap[/caption]

Memulai Coding

Menulis kode di file index.php

Seperti biasa di file index.php harus kita tambahkan pengenal plugin agar dapat dibaca di halaman admin Wordpress. Lalu setelah komentar yang berisi pengenal, kita tambahkan baris untuk menyertakan kode utama. Berikut adalah kode di file index.php:

<?php
/*
Plugin Name: Wordpress OpenStreetMap Viewer
Description: Map component for Wordpress built with Leaflet.js
Author: Ridwan Bejo
Version: 0.1
*/
include "wp_openstreetmap.php"
?>

Menulis kode asset openstreetmap viewer

Berikutnya adalah kita akan menulis kode untuk memanggil asset Javascript dan CSS yang diperlukan plugin ini. Anda memerlukan jQuery dan Leaflet.js. Di dalam Leaflet.js sendiri terdapat file Javascript dan CSS yang digunakan oleh Leaflet.js. Berhubung masih dikembangkan di localhost, Anda dapat menggantinya untuk disesuaikan dengan nama domain website Anda. Berikut adalah kode wp_osm_get_assets() di file wp_openstreetmap.php:

<?php
function wp_osm_get_assets()
{
?>
<script src="http://localhost/mywordpress/wp-content/plugins/wp_openstreetmap/assets/vendor/jquery.min.js"&gt;&lt;/script>
<script src="http://localhost/mywordpress/wp-content/plugins/wp_openstreetmap/assets/vendor/leaflet-0.7.5/leaflet.js"&gt;&lt;/script>
<link rel="stylesheet" href="http://localhost/mywordpress/wp-content/plugins/wp_openstreetmap/assets/vendor/leaflet-0.7.5/leaflet.css">
<?php
}
?>

Menulis kode untuk menampilkan peta dengan satu marker

Kali ini kita akan menampilkan satu marker di dalam peta. Ada beberapa parameter yang diperlukan oleh function tersebut.

• parameter lat digunakan untuk menampung nilai latitude
• paramater long digunakan untuk menampung nilai longitude
• parameter popup_description digunakan untuk menampung nilai berupa deskripsi yang akan muncul di-popup
• parameter popup_image digunakan untuk menampung nilai berupa URL yang merupakan lokasi gambar
• parameter map_id digunakan untuk menampung nilai yang akan menamai variabel dan elemen peta agar menjadi unik ketika ingin menampilkan lebih dari satu peta

Kemudian kita menyimpan nilai - nilai tersebut di dalam hidden input. Sebagai inisialisasi, peta akan ditampilkan pada koordinat yang diberikan, kemudian mengatur besar tingkat zoom pada nilai 18. Untuk tileLayer sendiri kita menggunakan api dari MapBox.com yang dapat Anda temukan di tutorial resmi Leaflet.js. Setelah itu kita rangkai popup_image dan popup_descriptin ke dalam sebuah variabel bernama popup_content. Lalu kita tambahkan marker sesuai koordinat yang diinginkan dengan menambahkan popup ke marker tersebut. Berikut adalah kode wp_openstreetmap_viewer_tags() di file wp_openstreetmap.php:

<?php
// ada source code lain sebelumnya :D
add_shortcode('wp_openstreetmap_viewer', 'wp_openstreetmap_viewer_tags');
function wp_openstreetmap_viewer_tags($attr)
{
ob_start();
?>
<div id="<?php echo $attr['map_id'] ?>" style="width: 600px; height: 400px"></div>
<input type="hidden" value="<?php echo $attr['lat'] ?>" id="map-lat-<?php echo $attr['map_id'] ?>" />
<input type="hidden" value="<?php echo $attr['long'] ?>" id="map-long-<?php echo $attr['map_id'] ?>" />
<input type="hidden" value="<?php echo $attr['popup_description'] ?>" id="map-popup-description-<?php echo $attr['map_id'] ?>" />
<input type="hidden" value="<?php echo $attr['popup_image'] ?>" id="map-popup-image-<?php echo $attr['map_id'] ?>" />
<?php wp_osm_get_assets(); ?>
<script>
var map = L.map('<?php echo $attr['map_id'] ?>').setView([$('#map-lat-<?php echo $attr['map_id'] ?>').val(), $('#map-long-<?php echo $attr['map_id'] ?>').val()], 18);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
            '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
            'Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
        id: 'mapbox.streets'
    }).addTo(map);

    var popup_content = "&lt;img src='"+$('#map-popup-image-&lt;?php echo $attr['map_id'] ?&gt;').val()+"' /&gt; "+$('#map-popup-description-&lt;?php echo $attr['map_id'] ?&gt;').val();
    L.marker([$('#map-lat-&lt;?php echo $attr['map_id'] ?&gt;').val(), $('#map-long-&lt;?php echo $attr['map_id'] ?&gt;').val()]).addTo(map)
        .bindPopup(popup_content).openPopup();
&lt;/script&gt;
&lt;?php

$output = ob_get_contents(); // end output buffering
ob_end_clean(); // grab the buffer contents and empty the buffer
return $output;

}
?>

Menulis kode untuk penampil banyak marker

Agak berbeda jauh dengan function yang pertama. wp_openstreetmap_csv_viewer() ini dapat menampilkan marker yang datanya disimpan di file CSV. Parameter yang dibutuhkanya hanya URL dari file CSV yang akan dibaca. File CSV yang berisi koordinat marker dan deskripsi untuk popupnya dapat Anda uplod melalui halaman iadmin Wordpress. Proses yang terdapat di function tersebut adalah pembacaan file CSV, kemudian dibentuklah sebuah array yang terdiri dari tiga field yaitu lat, long, dan description. Kemudian array tersebut kita encode menjadi JSON dan mencetaknya di dalam sebuah elemen div. Lalu dengan menggunakan looping di Javascript, kita akan menampilkan marker satu per satu. Berikut adalah kode wp_openstreetmap_csv_viewer_tags() di file wp_openstreetmap.php:

<?php
// ada source code sebelumnya :D
add_shortcode('wp_openstreetmap_csv_viewer', 'wp_openstreetmap_csv_viewer_tags');
function wp_openstreetmap_csv_viewer_tags($attr)
{
ob_start();
$the_file = fopen($attr['url'], 'r');
$wp_osm_coordinate = array();
while (!feof($the_file)){
    $line = fgetcsv($the_file);
    $wp_osm_coordinate[] = array (
            'lat' =&gt; $line[0],
            'long' =&gt; $line[1],
            'description' =&gt; $line[2],
        );
}

fclose($the_file);

?&gt;
&lt;div id="wp-osm-data-&lt;?php echo $attr['map_id'] ?&gt;" style="display:none;"&gt;&lt;?php echo json_encode($wp_osm_coordinate); ?&gt;&lt;/div&gt;
&lt;div id="&lt;?php echo $attr['map_id'] ?&gt;" style="width: 600px; height: 400px"&gt;&lt;/div&gt;
&lt;input type="hidden" value="&lt;?php echo $attr['lat'] ?&gt;" id="map-data-&lt;?php echo $attr['map_id'] ?&gt;" /&gt;
&lt;?php wp_osm_get_assets(); ?&gt;
&lt;script&gt;
    var map_coordinate = JSON.parse($('#wp-osm-data-&lt;?php echo $attr['map_id'] ?&gt;').html());

    var map = L.map('&lt;?php echo $attr['map_id'] ?&gt;').setView([map_coordinate[0].lat, map_coordinate[0].long], 18);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
            '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
            'Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
        id: 'mapbox.streets'
    }).addTo(map);

    map_coord_len = map_coordinate.length;
    var i;
    for (i=0; i &lt; map_coord_len; i++)
    {
        var coord = map_coordinate[i];
        var popup_content = coord.description;
        var marker = L.marker(L.latLng(coord.lat, coord.long)).bindPopup(popup_content).addTo(map);
        delete marker;
        marker = null;
    }
&lt;/script&gt;
&lt;?php

$output = ob_get_contents(); // end output buffering
ob_end_clean(); // grab the buffer contents and empty the buffer
return $output;

}
?>

Cara Penggunaan

[caption id="attachment_7413" align="aligncenter" width="700"] plugin telah terbaca di halaman admin[/caption]

 

[caption id="attachment_7414" align="aligncenter" width="610"] Plugin sudah diaktifkan[/caption]

 

[caption id="attachment_7415" align="aligncenter" width="700"] Contoh penggunaan shortcode yang menampilkan satu marker[/caption]

 

[caption id="attachment_7417" align="aligncenter" width="700"] Peta yang menampilkan marker berhasil dimunculkan di postingan[/caption]

 

[caption id="attachment_7419" align="aligncenter" width="622"] Contoh isi file untuk shortcode wp_openstreetmap_csv_viewer[/caption]

 

[caption id="attachment_7416" align="aligncenter" width="700"] Contoh penggunaan shortcode wp_opeenstreetmap_csv_viewer[/caption]

 

[caption id="attachment_7418" align="aligncenter" width="700"] Peta yang menampilkan marker dari CSV berhasil ditampilkan :D[/caption]

Penutup

Akhirnya Anda sudah mencoba membangun plugin Worpdress yang dapat menampilkan lokasi. Plugin ini dapat Anda gunakan untuk menambah informasi yang berkaitan dengan lokasi seperti review lokasi wisata atau kuliner. Anda dapat mengembangkannya dengan menambahkan pengelola lokasi di halaman admin Wordpress, sehingga Anda dapat menampilkan lokasi tanpa harus melewatkan lokasi langsung.

Referensi

• Wordpress Developer
• W3Schools
• Leaflet.js Tutorial

(rfs)