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

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" : "&nbsp;&nbsp;<img src='images/bullet-active.png'>&nbsp;&nbsp;",
    "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 :

Show object with drilldown

Move to object