1 / 28

Longdo Map Workshop I MM Map API

Longdo Map Workshop I MM Map API. Metamedia Technology August 7, 2007. 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. Introduction.

dermot
Download Presentation

Longdo Map Workshop I MM Map API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Longdo Map Workshop IMM Map API Metamedia Technology August 7, 2007 Metamedia Technology Co.,Ltd.

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

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

  4. Introduction Metamedia Technology Co.,Ltd.

  5. Introduction • รายละเอียด คุณสมบัติของ MM GIS Solution • ข้อมูลรายละเอียดเกี่ยวกับ API • http://www.mm.co.th/mmmap/api • http://mapdemo.longdo.com/. Metamedia Technology Co.,Ltd.

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

  7. Include the MMMap engine JavaScript class • ใส่ JavaScript ไว้ที่ header ของเพจที่ต้องการจะแสดงแผนที่ <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php"></script> (สำหรับแผนที่ประเทศไทย) <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?map=msn1"></script> Metamedia Technology Co.,Ltd.

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

  9. MMMap Metamedia Technology Co.,Ltd.

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

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

  12. MMMap Metamedia Technology Co.,Ltd.

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

  14. Create a marker var marker_id = mmmap.createMarker(13.7654,100.538, "Victory Monoment", "<font face=tahoma>An important transportation hub of Bangkok.อนุสาวรีย์ชัยครับ</font>“ ); document.getElementById("marker_" + marker_id).detail += "<br><br><span style='cursor:pointer;text-decoration:underline' onclick='mmmap.deleteMarker("+marker_id+")'>Delete</span>"; Metamedia Technology Co.,Ltd.

  15. Create a marker Metamedia Technology Co.,Ltd.

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

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

  18. Delete a user-defined div • mmmap.removeCustomDivs(customDivId); • mmmap.clearCustomDivs(); Metamedia Technology Co.,Ltd.

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

  20. Get latitude, longitude on map • <div id=“mmmap_div” …. onclick=“alert(mmmap.mouseCursorLat() +'\n'+mmmap.mouseCursorLong())”> Metamedia Technology Co.,Ltd.

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

  22. การใช้งาน search function <form id="searchform" onsubmit="mmmap.do_search(0,document.getElementById('searchtab_keywordform').value, 'search_result_set'); return false;" action="?"> <div>Search</div> <input type="text" id="searchtab_keywordform" onblur="mmmap.setKeyFocusAtMaparea();" onfocus="document.onkeydown='return true';"> <input type="submit" value="ค้น"> Search จาก link <a href="#" onclick="document.getElementById('searchtab_keywordform').value='ธนาคาร';mmmap.do_search(0,document.getElementById('searchtab_keywordform').value, 'search_result_set'); return false;">ธนาคาร</a> <div id="search_result_set" style="font: 10pt Tahoma;overflow: auto;margin-top: 0px;border: 0px solid red">&nbsp;</div> Metamedia Technology Co.,Ltd.

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

  24. การดึงภาพถ่ายดาวเทียมผ่าน Google Map • MM Map API มีฟังก์ชั่นที่ช่วยอำนวยความสะดวกในการใช้งาน Google Map • <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/google-map.js"></script> • gmap = new GoogleMap(googlemap_div, 13.767734, 100.5351375, 5); • showGMap(); • (ดูตัวอย่างที่ http://mapdemo.longdo.com/index-full-bkk.php) Metamedia Technology Co.,Ltd.

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

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

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

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

More Related