Membuat Peta dengan tag HTML Map Area

Presentasi berjudul: "Membuat Peta dengan tag HTML Map Area"— Transcript presentasi:

1 Membuat Peta dengan tag HTML Map Area
Djoko Soerjanto, M.Kom

2 Pengantar 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>.

3 Tag MAP 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.

4 Syntax Pemakaian <img src=“namafile" width="" height="" usemap="#namapeta"> <map name=“namapeta"> <area shape="" coords="" href="" alt=““ target=“”> <area shape="" coords="" href="" alt=““ target=“”> … </map>

5 Atribut 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

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

7 Contoh 2 Jika diklik area maka muncul informasi.

8 Contoh Web

9 Kekurangan / Kelemahan
Tidak suppor fitur zoom seperti Google Map. Bukan gambar vector.

10 Tool pendukung yang dipakai
CorelDraw, Adobe Photoshop atau sejenisnya untuk desain tampilan ulang peta untuk mengetahui lokasi

11 Pengembangan dengan database
Jika diklik pada area tertentu memunculkan informasi detail dari pilihan area tersebut.

12 Database Database : maplokasi Tabel : kabupaten

13 Kode program

14 Kode program (lanjutan)

15 Tugas Kelompok 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 dosen