Longdo Map Workshop I MM Map API Metamedia Technology November 3, 2009
Download
Report
Transcript Longdo Map Workshop I MM Map API Metamedia Technology November 3, 2009
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
แผนผังแสดงสว่ นประกอบของระบบ ระบบ Web-based Map Application Server
- PC with web browser
(IE 6.0+ or Firefox 1.5+)
- Mobile devices
End Users
- GPS + GPRS
tracking device
- Web application code
- Customer database
- Custom overlays
Customer
Web App.
Server
Telematic
Gateway
- Map API
- Search
MM Map
Server
Nu Raster
Map
- Map images
(basic and custom
layers)
Tracking
Devices
Metamedia Technology Co.,Ltd.
Introduction
รายละเงียด คุณสมบัติองง MM GIS Solution
อ้งมูลรายละเงียดเกี่ยวกับ API
http://www.mm.co.th/mmmap/api
http://mapdemo.longdo.com/.
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 องงเพจที่ตง้ งการจะแสดง
แผนที่
<script type="text/javascript"
src="http://mmmap15.longdo.com/mmm
ap/mmmap.php&key=[API key]">
</script>
Metamedia Technology Co.,Ltd.
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.
MMMap
Metamedia Technology Co.,Ltd.
แบบฝึ กหัด
Set up AppServ หรื ง Web Server
Environment ที่ถนัด
สร้างไฟล์ mymap.html ที่มีรูปแผนที่ประเทศไทย
ในหน้า mymap.html ให้สร้าง div ชื่ง
mmmap_div เพื่งเป็ น div สาหรับที่จะแสดงแผนที่
เอียน JavaScript สาหรับการเรี ยกแผนที่มาแสดงโดยใช้
function ที่กล่าวมาแล้วก่งนหน้านี้ ( <body
onload=… > )
Metamedia Technology Co.,Ltd.
การอยายอนาดองงรู ปแผนที่ตามอนาดองงหน้าจง
สร้างฟังก์ชนั่ ที่จะปรับอยายอนาดองงแผนที่ ตามอนาดองงหน้าจง
เช่น สร้างฟังก์ชนั่ 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.
แบบฝึ กหัด
สร้างไฟล์ mymap-resize.html โดยเริ่ มจากเนื้งหา
mymap.html เดิม
เพิม
่ code JavaScript ให้แผนที่อยายตามอนาดองง
window ได้โดยใช้ฟังก์ชนั่ ที่กล่าวมาแล้ว
Metamedia Technology Co.,Ltd.
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;textdecoration:underline'
onclick='mmmap.deleteMarker("+marker_id+")'
>Delete</span>";
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 = 13.752016;
testdiv.longitude = 100.53059;
var customdiv_id =
mmmap.drawCustomDiv(testdiv, 13.752016,
100.53059, "HEY");
Metamedia Technology Co.,Ltd.
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(testdi
v, 13.752016, 100.53059, "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
<div id=“mmmap_div” ….
onclick=“alert(mmmap.mouseCursorL
at()
+'\n'+mmmap.mouseCursorLong())”>
Metamedia Technology Co.,Ltd.
แบบฝึ กหัด
สร้าง customdiv ตามตาแหน่งที่คลิกบนแผนที่ โดยใช้
ฟังก์ชนั ที่กล่าวมาแล้วโดยอ้างต้นซึ่งใน div ที่สร้างอึ้นให้ใส่
icon รู ปรถบรรทุกไว้ และสามารถสร้างได้หลายๆ div ด้วย
การคลิกที่แผนที่
[optional] แก้ให้ถา้ ผูใ้ ช้กดเพื่งลากแผนที่ จะไม่แสดงรู ป
รถบรรทุก, ต้งงกดแล้วปล่งยเลยเท่านั้น
ตัวงย่างผลลัพธ์:
http://usermap.longdo.com/mymap/ad
dtruck.html
Metamedia Technology Co.,Ltd.
การใช้งาน 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_keywordfor
m').value='ธนาคาร';mmmap.do_search(0,document.getElemen
tById('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"> </div>
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
<script type="text/javascript"
src="http://mmmap15.longdo.com/mmmap/g
oogle-map.js"></script>
gmap = new GoogleMap(googlemap_div,
13.767734, 100.5351375, 5);
showGMap();
(ดูตวั งย่างที่ http://mapdemo.longdo.com/indexfull-bkk.php)
Metamedia Technology Co.,Ltd.
แบบฝึ กหัด
ดูตวั งย่างจาก http://mapdemo.longdo.com/indexfull-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 = [ [13.68105, 100.57505], [13.78945, 100.73627],
[13.67694, 100.93248] ];
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 = [13.8337, 100.59461];
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: http://www.mm.co.th/mmmap/api/reference/mmline#MMLineAPI
Metamedia Technology Co.,Ltd.
MM Line
Metamedia Technology Co.,Ltd.
แบบฝึ กหัด
ให้ทาการสร้างรู ปสี่ เหลี่ยม สามเหลี่ยม วงกลมและวงรี งย่างละ
รู ปบนแผนที่
Metamedia Technology Co.,Ltd.
MM Routing
MM Map API มีคลาสสาหรับหาและแนะนาเส้นทางให้ใช้แบบง่ายๆ
<html>
<head>
<style type="text/css">
#mmmapDiv { position:absolute; left: 0px; top: 0px; }
#mmrouteDiv { position:absolute; left: 0px; top: 400px; width: 600px; }
</style>
<script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php"></script>
<script type="text/javascript" src="http://mmmap15.longdo.com/mmroute/mmroute.jsp"></script>
<script type="text/javascript">
function init() {
mmmap = new MMMap(document.getElementById('mmmapDiv'), 13.767734, 100.5351375,
12, 'traffic+overlay');
mroute.init(mmmap, document.getElementById('mmrouteDiv'));
mmroute.useDefaultRightClickMenu();
}
</script>
</head>
<body onload="init();">
<div id="mmmapDiv"></div>
<div id="mmrouteDiv"></div>
</body>
</html>
More: http://www.mm.co.th/mmmap/api/docs/tutorial-mmroute
Metamedia Technology Co.,Ltd.
MM Routing
Metamedia Technology Co.,Ltd.
MM Routing
เพิ่มจุดหมาย และแสดงการเดินทาง
mmroute.addDestination(13.7327, 100.5820);
mmroute.addDestination(13.7435, 100.5622);
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: http://www.mm.co.th/mmmap/api/reference/mmline#DataAPI
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: "http://ms.longdo.com/mmmap/wmsproxy.php", mode:
'DemisBlueMarble',
zIndex: -1, opacity: 0.8, nocache: 0
};
mmmap.addLayer(bluemarble_proxy);
mmmap.showLayersControl();
//mmap.hideLayersControl();
Ex: http://mapdemo.longdo.com/index-layers.php
Metamedia Technology Co.,Ltd.
Layer API
Metamedia Technology Co.,Ltd.
แบบฝึ กหัด
ลงงเอียนโปรแกรมแสดงแผนที่และมี layer งื่นซ้งนงยูง่ ีก 1
layer โดยเลืงกดูได้จาก
http://mapdemo.longdo.com/index-layers.php
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.
แหล่งอ้งมูลเพิ่มเติม
http://mapdemo.longdo.com/
http://www.mm.co.th/mmmap/api
Metamedia Technology Co.,Ltd.