Metamedia Technology Co.,Ltd. Longdo Map Workshop I MM Map API Metamedia Technology August 7, 2007

Metamedia Technology Co.,Ltd. Outline Introduction MM Map engine JavaScript class Create a map object Map resizing Create a marker, user-defined div Searching Satellite images from Google Map Real world example

Metamedia Technology Co.,Ltd. Introduction MM Map JavaScript API เป็น API ที่ สามารถนำแผนที่ไปแสดงและใช้งานบน เว็บไซต์ โดยเป็นส่วนหนึ่งของ MM GIS Solution การนำ API ไปใช้นั้น เพียงมีความรู้ ทางด้าน JavaScript และการพัฒนาเว็บ ก็ สามารถทำได้ ไม่จำเป็นต้องมีความรู้เรื่อง แผนที่ หรือ GIS technology

Metamedia Technology Co.,Ltd. Introduction

Metamedia Technology Co.,Ltd. Introduction รายละเอียด คุณสมบัติของ MM GIS Solution ข้อมูลรายละเอียดเกี่ยวกับ API

Metamedia Technology Co.,Ltd. Introduction การพัฒนาเว็บโดยเรียกใช้ MM Map API พัฒนาเว็บด้วยภาษาใดก็ได้ (PHP, Java,.NET, Python) “include” JavaScript code ที่เตรียมไว้ให้ เรียกใช้ function ต่างๆ ที่เตรียมไว้ให้

Metamedia Technology Co.,Ltd. Include the MMMap engine JavaScript class ใส่ JavaScript ไว้ที่ header ของเพจที่ต้องการจะ แสดงแผนที่ ( สำหรับแผนที่ประเทศไทย )

Metamedia Technology Co.,Ltd. Create a map object var mmmap; mmmap = new MMMap(mmmap_div, , , 3, "hydro"); รายการ parameters ของฟังก์ชั่น MMMap() จะเป็น (div, long, lat, startZoomLevel, mapmode) ซึ่ง mapmode มีได้หลายรูปแบบ เช่น hydro normal

Metamedia Technology Co.,Ltd. MMMap

Metamedia Technology Co.,Ltd. แบบฝึกหัด Set up AppServ หรือ Web Server Environment ที่ถนัด สร้างไฟล์ mymap.html ที่มีรูปแผนที่ กรุงเทพฯ ในหน้า mymap.html ให้สร้าง div ชื่อ mmmap_div เพื่อเป็น div สำหรับที่จะ แสดงแผนที่ เขียน JavaScript สำหรับการเรียกแผน ที่มาแสดงโดยใช้ function ที่กล่าวมาแล้ว ก่อนหน้านี้ ( )

Metamedia Technology Co.,Ltd. การขยายขนาดของรูปแผนที่ตาม ขนาดของหน้าจอ สร้างฟังก์ชั่นที่จะปรับขยายขนาดของแผนที่ ตามขนาดของหน้าจอ เช่น สร้างฟังก์ชั่น myRePaint() มีเนื้อหาดังนี้ chkWinSize(); var newwidth = parseInt(ww) ; var newheight = parseInt(wh) ; mmmap.setSize(newwidth,newheight); mmmap.rePaint(); ใส่ให้เป็น handler ของ window.onresize event window.onresize = myRepaint;

Metamedia Technology Co.,Ltd. MMMap

Metamedia Technology Co.,Ltd. แบบฝึกหัด สร้างไฟล์ mymap-resize.html โดยเริ่ม จากเนื้อหา mymap.html เดิม เพิ่ม code JavaScript ให้แผนที่ขยายตาม ขนาดของ window ได้โดยใช้ฟังก์ชั่นที่ กล่าวมาแล้ว

Metamedia Technology Co.,Ltd. Create a marker var marker_id = mmmap.createMarker( , , "Victory Monoment", " An important transportation hub of Bangkok. อนุสาวรีย์ชัยครับ “ ); document.getElementById("marker_" + marker_id).detail += " Delete ";

Metamedia Technology Co.,Ltd. Create a marker

Metamedia Technology Co.,Ltd. Display a user-defined div var testdiv = document.createElement("div"); testdiv.style.border = "1px solid red"; testdiv.innerHTML = "click me"; testdiv.latitude = ; testdiv.longitude = ; var customdiv_id = mmmap.drawCustomDiv(testdiv, , , "HEY");

Metamedia Technology Co.,Ltd. Display a user-defined div mmmap.drawCustomDivLevel(testdiv, , , "HEY", min_zoom, max_zoom); mmmap.drawCustomDivWithPopup(testdiv, , , "what is this", "this is a pop-up"); mmmap.drawCustomDivLevelWithPopup(testdi v, , , "what is this", min_zoom, max_zoom, "this is a pop-up");

Metamedia Technology Co.,Ltd. Delete a user-defined div mmmap.removeCustomDivs(customD ivId); mmmap.clearCustomDivs();

Metamedia Technology Co.,Ltd. Get latitude, longitude on map mmmap.mouseCursorLat() mmmap.mouseCursorLong()

Metamedia Technology Co.,Ltd. Get latitude, longitude on map

Metamedia Technology Co.,Ltd. แบบฝึกหัด สร้าง customdiv ตามตำแหน่งที่คลิกบน แผนที่ โดยใช้ฟังก์ชันที่กล่าวมาแล้วโดย ข้างต้นซึ่งใน div ที่สร้างขึ้นให้ใส่ icon รูป รถบรรทุกไว้ และสามารถสร้างได้หลายๆ div ด้วยการคลิกที่แผนที่ [optional] แก้ให้ถ้าผู้ใช้กดเพื่อลากแผนที่ จะไม่แสดงรูปรถบรรทุก, ต้องกดแล้วปล่อย เลยเท่านั้น ตัวอย่างผลลัพธ์ : dtruck.html

Metamedia Technology Co.,Ltd. การใช้งาน search function Search Search จาก link ธนาคาร

Metamedia Technology Co.,Ltd. การใช้งาน search function ปรับขนาด search_result_set ตาม window size document.getElementById("search_re sult_set").style.height = newheight - (parseInt(document.getElementById(" searchbox_option").offsetHeight) + parseInt(document.getElementById("s earchform").offsetHeight)) - 20;

Metamedia Technology Co.,Ltd. การดึงภาพถ่ายดาวเทียมผ่าน Google Map MM Map API มีฟังก์ชั่นที่ช่วยอำนวยความ สะดวกในการใช้งาน Google Map gmap = new GoogleMap(googlemap_div, , , 5); showGMap(); ( ดูตัวอย่างที่ bkk.php)

Metamedia Technology Co.,Ltd. แบบฝึกหัด ดูตัวอย่างจาก bkk.php bkk.php สร้าง index-with-search.html ที่มีเนื้อหาคล้าย ข้างต้น ( แนะนำว่าให้พิมพ์ตาม, อย่า copy & paste) ทดสอบการใช้งาน search ว่าทำได้ถูกต้อง หรือไม่ ทดสอบการใช้งาน google map API ว่าทำได้ ถูกต้องหรือไม่ ต้องขอ Google Map API key

Metamedia Technology Co.,Ltd. โจทย์ตัวอย่างการใช้งานจริง แบบง่ายๆ สร้างแผนที่ ที่สามารถแสดงตำแหน่งของ รถบรรทุกคันหนึ่งที่กำลังวิ่งอยู่ได้ โดยมี การ Update ข้อมูลจาก server ทุกๆ 20 วินาที โดยใช้เทคนิค AJAX, JSON หรือ cross-site scripting แล้วแต่ถนัด

Metamedia Technology Co.,Ltd. แนวทาง สร้างฐานข้อมูลชื่อว่า truck ใน mysql สร้าง table ชื่อ point ที่จะแสดงตำแหน่งของ รถบรรทุกแต่ละคันที่เวลาปัจจุบัน โดย ประกอบด้วย fields - id - lat - longt สร้าง file track.php โดยสามารถที่จะ query เอา ข้อมูลจากตาราง point นี้ออกมาได้ ในส่วนของ JavaScript code ให้ตั้งเวลาทุกๆ 20 วินาที ให้ไป get ข้อมูลจาก track.php นี้มา update ตำแหน่งของรูปรถบรรทุก

Metamedia Technology Co.,Ltd. ตัวอย่างอื่นๆ Bangkok map in English Thailand map simple Thailand map with search and satellite mode (Google)