MM Line API and Data API

MM Line API
Draw Line Draw Polygon Draw Ellipse Draw Parabola
Show/Hide/Remove Order of Drawn Label Force Redraw
Distance/Area Check Contain Remove All  
Tracker Pointer MMLine Handler  
Data API
showObject MMMapObject getGSObjects  
MMMapIG
MMMapIGGroup addObjectGroup hideObjects showObjects
hideAllObjects removeObject removeAllObjects moveTo
getLastSelectedObject getIGDesc getCurrentObjectGroup setCurrentObjectGroup
hideCurrentObjectGroup showCurrentObjectGroup addObjectsAttributes showAllObjects
updateObject updateObjectsAttributes    

 

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" : "&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