Tutorial Membuat Sistem Informasi Pemetaan Dengan PHP yang saya buat ini sebenernya ntah judulnya apa. saya juga bingung kasih judul. hehehee tapi pada intinya peta ini bertujuan misalkan nantinya didalam peta tersebut terdapat gunung berapi atau apapun sesuai pengaturan kita maka nantinya akan di tampilkan pada peta. sebelumnya saya meminta maaf karena saya juga sedang belajar maka jika ada kesalahan mohon di maklumi. atau jika agan agan punya script yang lebih canggih bisa di share di blog ini. hehe
pada kasus kali ini saya hanya akan memberikan sebuah tanda jika pada titik tersebut terdapat gunung berapi. lihat gambar di bawah ini.
pada gambar yang ada lingkaran merah berarti terdapat gunung berapi. mungkin nantinya teman teman bisa memodifikasi untuk menampilkan gunung berapi , sungai, danau ataupun lainnya secara dinamis dan bersamaan.
oke langsung saja kita masuk ke pembahasan.
langkah pertama yang harus kita buat adalah gambar peta lalu kita beri titik koordinat menggunakan tools online anda bisa masuk ke situs ini. dan caranya sangat simpel sekali.
setelah kita upload gambar dan menentukan titik koordinat kita mendpatkan script seperti di bawah ini.
pada bagian yang di block adalah script yang di butuhkan. saya hanya mengambil sebagian dari script tersebut. dan sedikit memodifikasi. lihat script saya di bawah ini.
<map id="veg_map" name="veg">
<area shape="circle" data-key="sumatera" title="" coords="17,65,5" href="#" target="" />
<area shape="circle" data-key="jawa" title="" coords="63,132,4" href="#" target="" />
<area shape="circle" data-key="kalimantan" title="" coords="70,79,7" href="#" target="" />
<area shape="circle" data-key="sulawesi" title="" coords="134,86,3" href="#" target="" />
<area shape="circle" data-key="bali" title="" coords="130,134,2" href="#" target="" />
<area shape="circle" data-key="papua" title="" coords="171,93,4" href="#" target="" />
</map>
oke lanjut kita masuk ke langkah berikutnya.
buat folder di xampp/htdocs/namafolderanda
masukkan gambar peta ke dalam folderanda kemudian buat index.php dan copy script di bawah ini ke dalam index.php lalu simpan.
<script type="text/javascript" src="1.9.1.jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<div align="center"><img id="maping" src="peta.png" usemap="#veg" > </div>
<map id="veg_map" name="veg">
<area shape="circle" data-key="sumatera" title="" coords="17,65,5" href="#" target="" />
<area shape="circle" data-key="jawa" title="" coords="63,132,4" href="#" target="" />
<area shape="circle" data-key="kalimantan" title="" coords="70,79,7" href="#" target="" />
<area shape="circle" data-key="sulawesi" title="" coords="134,86,3" href="#" target="" />
<area shape="circle" data-key="bali" title="" coords="130,134,2" href="#" target="" />
<area shape="circle" data-key="papua" title="" coords="171,93,4" href="#" target="" />
</map>
<script type="text/javascript">
$('#maping')
.mapster({
mapKey: 'data-key',
fillOpacity: 0.4,
fillColor: "f1141e",
stroke: true,
strokeColor: "f1141e",
strokeOpacity: 0.8,
strokeWidth: 4,
})
.mapster('set',true,'jawa,sumatera,papua');
</script>
pada langkah selanjutnya download kedua file di bawah ini dan masukkan ke dalam folderanda.
file 1
file 2
setelah itu kita buka di mozzila firefox dan hasilnya seperti di bawah ini.
jika rekan rekan malas untuk mengikuti dari awal bisa langsung mendownload saja source kode lengkap di bawah ini.
Download
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
