Pertemuan 7 Membuat Peta dengan tag HTML Map Area Bagian I

Djoko Soerjanto, M.Kom

Membuat Peta dengan tag HTML Map Area

HTML menyediakan fasilitas sederhana untuk membuat mapping sebuah gambar.

Dengan menggunakan mapping gambar tersebut, dapat dikreasikan menjadi sebuah halaman yang memuat peta sederhana.

Layanan HTML dalam menangani peta gambar adalah dengan menggunakan tag <map></map> yang dilengkapi dengan <area></area>.

Pengantar

Tag MAP terdiri dari beberapa pilihan untuk penandaan bujursangkar (rect), penandaan lingkaran (circle) penandaan poligon.

Tag map ini membutuhkan gambar sebagai media yang akan ditandai. Sedangkan penunjuk tempat dapat menggunakan koordinat yang terdapat pada HTML source.

Tag MAP

<img src=“namafile" width="" height="" usemap="#namapeta">

<map name=“namapeta"> <area shape="" coords="" href="" alt=““ target=“”> <area shape="" coords="" href="" alt=““ target=“”> … </map>

Syntax Pemakaian

Atribut usemap pada tag IMG digunakan untuk merelasikan antara image dengan map.

Atribut shape digunakan untuk mengatur bentuk area. Diisikan dengan rect, circle atau poly.

Atribut coords sebagai koordinat lokasi area pada map. Jika shape=rect, maka : x1,y1,x2,y2 (left,top,right,bottom)

Jika shape=circle, maka : centerx,centery,radius Jika shape=poly, maka : x1,y1,x2,y2,..,xn,yn

Atribut

Contoh 1 Menampilkan 3 area berbeda bentuk. Jika diklik area tersebut muncul pesan

Contoh 2Jika diklik area maka muncul informasi.

http://berniaga.com/ http://www.gamedevmap.com/

Contoh Web

Tidak suppor fitur zoom seperti Google Map. Bukan gambar vector.

Kekurangan / Kelemahan

CorelDraw, Adobe Photoshop atau sejenisnya untuk desain tampilan ulang peta

http://imagemap-generator.dariodomi.de/ untuk mengetahui lokasi

Tool pendukung yang dipakai

Jika diklik pada area tertentu memunculkan informasi detail dari pilihan area tersebut.

Pengembangan dengan database

Database : maplokasi Tabel : kabupaten

Database

Kode program

Kode program (lanjutan)

Maksimal : 4 orang ( design, input data, koding )

Bikan map lokasi untuk project kecil apa saja Waktu 1 minggu Kirim tugas dalam bentuk ZIP/RAR ke email dosen

Tugas Kelompok