MM Line API
Draw Line
var points = [
[13.80, 100.44],
[13.80, 100.70],
[13.70, 100.70],
[13.70, 100.44]
];
var polygon = new MMLine(mmmap);
polygon.setMode('line');
polygon.setLineColor('#000000');
polygon.setLineOpacity(0.8); // 0-1
polygon.setFillColor('#FF713F');
polygon.setFillOpacity(0.5); // 0-1
polygon.setTitle('This is title');
polygon.setDescription('Popup content');
polygon.setPoints(points);Draw Polygon
var points2 = [
[13.80, 100.44],
[13.80, 100.70],
[13.70, 100.70],
[13.70, 100.44]
];
var polygon2 = new MMLine(mmmap);
polygon2.setMode('polygon');
polygon2.setLineColor('#0000FF');
polygon2.setLineWidth(12);
polygon2.setLineOpacity(0.3); // 0-1
polygon2.setFillColor('#FF0000');
polygon2.setFillOpacity(0.3); // 0-1
polygon2.setTitle('This is title');
polygon2.setDescription('Popup content');
polygon2.setPoints(points);Draw Ellipse
var points3 = [13.8337, 100.59461];
polygon3 = new MMLine(mmmap);
polygon3.setMode('ellipse');
polygon3.setWidth('5'); // 5 km
polygon3.setHeight('3'); // 3 km
polygon3.setTitle('This is Ellipse');
polygon3.setDescription('Popup content');
polygon3.setPoints(points3);Draw Parabola
Draw simple parabola (no parameters)
var points4 = [
[13.80, 100.44],
[13.70, 100.70]
];
var polygon4 = new MMLine(mmmap);
polygon4.setMode('parabola');
polygon4.setLineColor('#00FFFF');
polygon4.setLineOpacity(0.3); // 0-1
polygon4.setFillColor('#FFFF00');
polygon4.setFillOpacity(0.3); // 0-1
polygon4.setTitle('This is title');
polygon4.setDescription('Popup content');
polygon4.setPoints(points);Show/Hide/Remove
polygon.hide(); polygon.show(); polygon.remove(); // remove permanently
Order of Drawn
By default, the newly drawn objects will appear on top of the existing ones. Order of drawn objects can be changed by using setOrder():
polygon.setOrder(1000); polygon.rePaint();
Label
To draw label use setCenter(lat, long) and setLabel(text):
polygon.setCenter(13.123, 100.456);
polygon.setLabel('My polygon');Force Redraw
In some cases in some browsers (notably IE), not all the line and polygon objects are shown unless the user moves the map a little or zoom to other levels. In such cases, adding this line to force the re-drawing of objects might help:
setTimeout('mmmap.reDrawLines()', 2000);See example at http://mapdemo.longdo.com/demo/index-drawpolygons.php
Distance/Area
Get distance of lines and areas of polygons
Line
getDistance(formatting = true) // get distance in kilometers
Polygon
getArea(formatting = true); // get area in sq.km. getAreaRai(formatting = true); // get area in Thai-style Rai, Ngarn, sq. Wa
See example at http://mapdemo.longdo.com/index-getlineobjects.php
Check Contain
Check whether a point is within a polygon or ellipse, use the contain() method.
ellipse.contain({ latitude: 15.34, longitude: 100.12 });See example at http://mapdemo.longdo.com/demo/index-polygoncontain.php
Remove All
Remove multiple lines, polygons, or ellipses.
mmmap.removeAllVectors(type);
type - all (default), line, polygon, ellipse
See example at http://mapdemo.longdo.com/demo/index-clearobjects.php
Tracker
Start tracker (line is MMLine object)
tracker = line.getTracker();
tracker.onFinalize = finalize;
tracker.start();
function finalize() {
alert('track end');
}
Stop tracker
tracker.stop();
See example at http://mapdemo.longdo.com/demo/index-pacman.php
Pointer
Show pointer (line is MMLine object)
pointer = line.getPointer();
pointer.onDrop = drop;
pointer.show();
function drop(segment, lat, lon) {
alert('drag from segment: ' + segment + '\ndrop at: ' + lat + ', ' + lon);
}Hide pointer
pointer.hide();
See example at http://mapdemo.longdo.com/demo/index-pacman.php
MMLine Handler
Set custom event handler for MMLine object.
var handler = {
"onclick" : function() {
// .. do something ..
},
"onmouseover" : function() {
// .. do something ..
},
"onupdateshape" : function() {
// .. do something ..
}
}
var polygon = new MMLine(mmmap);
polygon.setMode('line');
...
polygon.setHandler(handler); // Set custom event handler
polygon.setPoints(points);
Data API
showObject
We provide a function to draw several pre-defined objects (points, lines, and polygons), e.g., province/district/subdistrict boundary, roads, Longdo Map contributed points, lines and polygons. Usage is as below:
mmmap.showObject(myid,ds,showdefaulttitle,forcetitle,forcemode,linecolor,fillcolor,linetransp,filltransp);
Note that by using this API to display too many data, the client browser might become less responsive.
Example:
mmmap.showObject('5710', 'IG');แสดงขอบเขตอำเภอ อ.แม่สรวย โดย 5710 เป็น Geocode ตามของกระทรวงมหาดไทย ของ อ.แม่สรวย
mmmap.showObject('5_', 'IG';, true, null, null, 'FF0000');แสดงทุกจังหวัดที่รหัส Geocode ขึ้นต้นด้วย 5 ด้วยสีแดง และให้แสดงชื่อจังหวัดด้วย
mmmap.showObject('42;43', 'IG');แสดงจังหวัดที่มีรหัส 42, 43, ไม่ต้องแสดงชื่อจังหวัด
mmmap.showObject('57', 'IG');แสดงจังหวัดที่มีรหัส 57
mmmap.showObject('77__', 'IG', true, null, null,'0000FF', '0000FF', 0.7, 0.5);แสดงทุกอำเภอของจังหวัดประจวบคีรีขันธ์ ด้วยสีขอบ, สีภายใน, ความโปร่งแสงสีขอบ, ความโปร่งแสงสีภายใน ตามที่กำหนด
mmmap.showObject('__', 'IG',true);แสดงทุกจังหวัดในประเทศไทย พร้อมป้ายชื่อ -- ระวังอาจทำให้เครื่องช้า
mmmap.showObject('จ.นนทบุรี', 'ADM', 'เมืองนนทน์', 'polygon', 'FF0000', 'FF0000');
mmmap.showObject('อ.ลำลูกกา', 'ADM');
mmmap.showObject('สมุทรปราการ', 'ADM');
mmmap.showObject('ต.ศรีดอนมูล', 'ADM');
mmmap.showObject('อ.ปาย', 'ADM');
mmmap.showObject('ชลบุรี', 'ADM', true, null, null, '00FF00', '00FF00', 0.7, 0.5);Chon Buri, with line and fill colors
mmmap.showObject('ถนนพญาไท', 'RNM');แสดงเส้นถนนพญาไท
mmmap.showObject('100', 'RID');แสดงเส้นถนนที่มีหมายเลข 100
mmmap.showObject('M00000001', 'LONGDO');แสดง Longdo Map contributed map หมายเลข M00000001 (ซึ่งประกอบด้วยเส้นทางรถไฟฟ้าสายใหม่ๆ ของ กทม. และปริมณฑล)
mmmap.showObject('A10000001', 'LONGDO');แสดง Longdo Map contributed POI หมายเลข A10000001 (คืออะไรดูได้ที่ http://map.longdo.com/p/A10000001)
MMMapObject
The return value of showObject is of MMMapObject class, you can also do:
new MMMapObject(mymmmap, myid, ds, showdefaulttitle, forcetitle, forcemode, linecolor, fillcolor, linetransp, filltransp)
Example:
var x1 = new MMMapObject(mmmap, 'จ.นนทบุรี', 'ADM', true, 'เมืองนนทน์', 'polygon', 'FF0000', 'FF0000');
setTimeout('alert(x1.getGSObjects().length)', 200);getGSObjects
returns an array of MMLine instances
MMMapIG
var objgroup = new MMMapIGGroup(object);
MMMapIGGroup
var object = {
"mmmap" : mmmap,
"mmmapig" : mmmapig,
"groupid" : 'myobjectgroup',
"autocenter" : true,
"id" : ['90','91','94','95'],
"ds" : "IG",
"simplify" : 0.0007,
//"clearcache" : true, // enable this if you want to use fresh data
"linewidth" : 4,
"linecolor" : linecolor,
"fillcolor" : fillcolor,
"lineopacity" : 0.7,
"fillopacity" : 0.1,
"showlabel" : true,
"zoom" : "4",
"minzoom" : 1,
"maxzoom" : 15,
"drilldown" : true,
"drilldownconfig" : {
"initbreadcrumb" : "ภาคใต้ชายแดน",
"breadcrumbdiv" : "breadcrumbs",
"breadcrumbbullet" : " <img src='images/bullet-active.png'> ",
"showlabellevel" : {
"province" : [3,15],
"amphoe" : [4,15],
"tambol" : [6,15]
},
"handler" : {
"ondraw" : function(){loading(true)},
"ondrawsuccess" : function(){loading(false)},
"onclick" : function() {loading(true)}
},
"minlevel" : "amphoe"
}
}
var objgroup = new MMMapIGGroup(object)
addObjectGroup
mmmapig.addObjectGroup(objgroup)
hideObjects
mmmapig.hideObjects('groupid', 'myobjectgroup'); //hidden all objects by group id;
mmmapig.hideObjects('id', '91'); //hide object by id;showObjects
mmmapig.showObjects('groupid', 'myobjectgroup'); //show all objects by group id;
mmmapig.showObjects('id', '91'); //show object by id;hideAllObjects
mmmapig.hideAllObjects(); //hide all objects
showAllObjects
mmmapig.showAllObjects(); //show all objects
removeObject
mmmapig.removeObject('groupid', 'myobjectgroup'); //remove all objects by group id;
mmmapig.removeObject('id', '91'); //remove object by id;removeAllObjects
mmmapig.removeAllObjects(); //remove all objects
moveTo
mmmapig.moveTo('groupid', 'myobjectgroup'); //move to group;
mmmapig.moveTo('id', '91'); //move to object by id;getLastSelectedObject
mmmapig.getLastSelectedObject(); //return id of lastest clicked object
getIGDesc
mmmapig.getIGDesc('91'); //get object description by id (JSON)getCurrentObjectGroup
var groupobject = mmmapig.getCurrentObjectGroup(); //get all objects of current showing group
setCurrentObjectGroup
mmmapig.getCurrentObjectGroup(groupobect); // set current showing group
hideCurrentObjectGroup
mmmapig.hideCurrentObjectGroup(); // hide all objects of current showing group
showCurrentObjectGroup
mmmapig.showCurrentObjectGroup(); // show all objects of current showing group
addObjectsAttributes
// set attributes before draw
var attr = [
{"id" : "90", "linecolor" : "#E6FF7F", "fillcolor":"#E6FF7F", "fillopacity":"0.8", "label":"สงขลา 30%", "title":"จังหวัดสงขลา"},
{"id" : "91", "linecolor" : "#77EF93", "fillcolor":"#77EF93", "fillopacity":"0.8", "label":"สตูล 20%"},
{"id" : "94", "linecolor" : "#EF8B3B", "fillcolor":"#EF8B3B", "fillopacity":"0.8", "label":"ปัตตานี 53%"},
{"id" : "95", "linecolor" : "#EF593B", "fillcolor":"#EF593B", "fillopacity":"0.8", "label":"ยะลา 61%"},
{"id" : "96", "linecolor" : "#EF483B", "fillcolor":"#EF483B", "fillopacity":"0.8", "label":"นราธิวาส 64%"}
];
mmmapig.addObjectsAttributes(attr);
updateObject
mmmapig.updateObject('90', 'fillcolor', '#000000');
// (IG, [fillcolor, fillopacity, linecolor, lineopacity, linewidth], value)updateObjectsAttributes
// update existing objects after draw
var attr = [
{"id" : "90", "linecolor" : "#E6FF7F", "fillcolor":"#E6FF7F", "fillopacity":"0.8", "label":"สงขลา 30%", "title":"จังหวัดสงขลา"},
{"id" : "91", "linecolor" : "#77EF93", "fillcolor":"#77EF93", "fillopacity":"0.8", "label":"สตูล 20%"},
{"id" : "94", "linecolor" : "#EF8B3B", "fillcolor":"#EF8B3B", "fillopacity":"0.8", "label":"ปัตตานี 53%"},
{"id" : "95", "linecolor" : "#EF593B", "fillcolor":"#EF593B", "fillopacity":"0.8", "label":"ยะลา 61%"},
{"id" : "96", "linecolor" : "#EF483B", "fillcolor":"#EF483B", "fillopacity":"0.8", "label":"นราธิวาส 64%"}
];
mmmapig.updateObjectsAttributes(attr);Example :