Metamedia Technology Co.,Ltd. Longdo Map Workshop I MM Map API Metamedia Technology November 3, 2009

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. แบบฝึกหัด สร้างไฟล์ 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. ตัวอย่างอื่นๆ Bangkok map in English Thailand map simple Thailand map with search and satellite mode (Google)

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. MM Line MM Map API มีคลาสสำหรับการวาดเส้นและรูปทรงต่างๆให้ใช้ แบบง่ายๆ var points = [ [ , ], [ , ], [ , ] ]; polygon = new MMLine(mmmap); polygon.setMode("polygon") // line or polygon polygon.setLineColor("#000000"); polygon.setLineOpacity(1); // 0-1 polygon.setFillColor("#47BF4C"); polygon.setFillOpacity(0.5); // 0-1 polygon.setTitle("This is title"); polygon.setDescription("Popup content"); polygon.setPoints(points);

Metamedia Technology Co.,Ltd. MM Line var points3 = [ , ]; polygon3 = new MMLine(mmmap); polygon3.setMode("ellipse"); polygon3.setLineOpacity(0.5); polygon3.setFillOpacity(0.5); polygon3.setWidth("5"); // 5 km polygon3.setHeight("6"); // 6 km polygon3.setTitle("This is Ellipse"); polygon3.setDescription("Popup content"); polygon3.setPoints(points3); More:

Metamedia Technology Co.,Ltd. MM Line

Metamedia Technology Co.,Ltd. แบบฝึกหัด ให้ทำการสร้างรูปสี่เหลี่ยม สามเหลี่ยม วงกลมและวงรี อย่างละรูปบนแผนที่

Metamedia Technology Co.,Ltd. MM Routing MM Map API มีคลาสสำหรับหาและแนะนำเส้นทางให้ใช้แบบง่ายๆ #mmmapDiv { position:absolute; left: 0px; top: 0px; } #mmrouteDiv { position:absolute; left: 0px; top: 400px; width: 600px; } function init() { mmmap = new MMMap(document.getElementById('mmmapDiv'), , , 12, 'traffic+overlay'); mroute.init(mmmap, document.getElementById('mmrouteDiv')); mmroute.useDefaultRightClickMenu(); } More:

Metamedia Technology Co.,Ltd. MM Routing

Metamedia Technology Co.,Ltd. MM Routing เพิ่มจุดหมาย และแสดงการเดินทาง mmroute.addDestination( , ); mmroute.addDestination( , ); mmroute.searchRoute();

Metamedia Technology Co.,Ltd. แบบฝึกหัด สร้างแผนที่ ที่สามารถทำการค้นหา เส้นทางได้ง่ายๆด้วยการใช้เมนูคลิกขวา ลองเขียนโปรแกรมค้นหาเส้นทางจากบ้าน ของคุณไปยังชลบุรีและแสดงบนแผนที่

Metamedia Technology Co.,Ltd. Data API MM Map API มีฟังก์ชันช่วยในการแสดงวัตถุต่างๆที่ได้มีการ กำหนดไว้แล้วอย่างง่ายๆ เช่น ขอบเขตจังหวัด อำเภอ ถนน ตามตัวอย่างการใช้งานด้านล่างนี้ mmmap.showObject(myid,ds,showdefaulttitle,forcetitle,forcemode,linec olor,fillcolor,linetransp,filltransp);

Metamedia Technology Co.,Ltd. Data API mmmap.showObject('5710', 'IG'); แสดงขอบเขตอำเภอ อ. แม่สรวย โดย 5710 เป็น Geocode ตาม ของกระทรวงมหาดไทย ของ อ. แม่สรวย mmmap.showObject('77__', 'IG', true, null, null,'0000FF', '0000FF', 0.7, 0.5); แสดงทุกอำเภอของจังหวัดประจวบคีรีขันธ์ ด้วยสีขอบ, สีภายใน, ความโปร่งแสงสีขอบ, ความโปร่งแสงสีภายใน ตามที่กำหนด More:

Metamedia Technology Co.,Ltd. แบบฝึกหัด ลองเขียนโปรแกรมแสดงจังหวัดที่เป็นบ้าน เกิดของคุณ และแสดงอำเภอต่างๆของ จังหวัดเชียงใหม่บนแผนที่

Metamedia Technology Co.,Ltd. Data API

Metamedia Technology Co.,Ltd. Layer API MM Map API มีฟังก์ชันสำหรับเพิ่ม layers อื่นๆซ้อนลงบนแผนที่ได้ var bluemarble_proxy = { layertype: "LONGDO", name: "BlueMarble", url: " mode: 'DemisBlueMarble', zIndex: -1, opacity: 0.8, nocache: 0 }; mmmap.addLayer(bluemarble_proxy); mmmap.showLayersControl(); //mmap.hideLayersControl(); Ex:

Metamedia Technology Co.,Ltd. Layer API

Metamedia Technology Co.,Ltd. แบบฝึกหัด ลองเขียนโปรแกรมแสดงแผนที่และมี layer อื่นซ้อนอยู่อีก 1 layer โดยเลือกดูได้จาก

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. แหล่งข้อมูลเพิ่มเติม