MM Map API Documentation Reference

MM Map API comes the Thailand map imageries from NuMAP called NuRasterMap. Usage of the MM Map API with this NuRasterMap is possible only under the condition specified in the MM Map API Term of Use. 

You will need to register for a key to be used with your web URL, see more information about how to obtain the key.

For MM Route routing suggestion API reference, please visit MM Route API Reference.

More demos code are available at http://mapdemo.longdo.com/.

Include the MMMap engine JavaScript class

Put this in the header (replace xxxxxxxxxxxxxx with the registered key):

<script type="text/javascript" src=http://mmmap15.longdo.com/mmmap/mmmap.php?key=xxxxxxxxxxxxxxx></script>

Create a map object

Specify a div, latitude, longitude, and zoom level. You need create a div to hold the map, e.g., mmmap_div, first and create a variable linking to it.

var mmmap_div = document.getElementById('my_map_div');
mmmap = new MMMap(mmmap_div,13.767734,100.5351375,3);

You can also specify mapmode, e.g., "icons", "normal" (without icons), "traffic" (gray-ish map), "hydro" 
mmmap = new MMMap(mmmap_div,13.767734,100.5351375,3, "normal");

Note that the given latatitude and longitude in MMMap constructor above can be overriden by the location-remembering feature using web browser cookie (i.e. user will see the same location if he/she revisits MM Map API pages). To avoid this, call the moveTo again:

mmmap.moveTo(13.767734,100.5351375);

This is way too complicated. Could you just show me a working example?

Sure. Please visit our map demo site at http://mapdemo.longdo.com/. There are several examples, you can view HTML source code of each example to see how the APIs are used. Don't forget to replace the API key with yours one if you cut and paste those code to your files.

Create a marker

var marker_id = mmmap.createMarker(13.7654,100.538,"Victory Monoment", "<font face=tahoma>An important transportation hub of Bangkok.อนุสาวรีย์ชัยครับ</font>");

Note the the return value is the marker id (integer). Later on, you can also modify the contents of the marker.

document.getElementById("marker_" + marker_id).detail += "<br><br><span style='cursor:pointer;text-decoration:underline' onclick='mmmap.deleteMarker("+marker_id+")'>Delete</span>";

Delete a marker

markerid = id of the marker you get as a return value of the call mmmap.createMarker(...) (see the previous question)

mmmap.deleteMarker(markerid);

Show a popup

mmmap.showPopUp(lat, lon, title, content);

The width and height of the pop-up will be automatically determined based on the contents inside. Optionally popup parameters can be also given in case we want to hint the proper width and height.

var popup_params = {
        link : "http://longdo.com",
        width : 450, height: 400,
        fixpopupsize : true, // if true, the width and height will be exactly as given, otherwise they will be LESS THAN OR EQUAL to the given values
};

mmmap.showPopUp(lat, lon, title, content, popup_params);

Other possible parameters:

  • cancelmousedown: if set to true, mouse down event on the popup will NOT propagate further to the underlying map (default: false)
  • draggable: if set to true, the custom div will be draggable (default: false)

To close an open popup, use mmmap.closeLocationDetailPopup();

See the demo at http://mapdemo.longdo.com/index-popupdemo.php.

Display a user-defined div

var testdiv = document.createElement("div");
testdiv.style.border = "1px solid red";
testdiv.innerHTML = "click me";
testdiv.onclick = testclick;
testdiv.latitude = 13.752016;
testdiv.longitude = 100.53059;
var customdiv_id = mmmap.drawCustomDiv(testdiv, 13.752016, 100.53059, "HEY");

function testclick(){
    mmmap.showPopUp(this.latitude, this.longitude, "what is this?", "this is a pop-up");
}

Also you can draw a custom div only at some zoom level:

min_zoom = 3;
max_zoom = 10;
mmmap.drawCustomDivLevel(testdiv, 13.752016, 100.53059, "HEY", min_zoom, max_zoom); 

Or draw custom div together with add a pop-up

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"); 

By default the center of the testdiv will be positioned at the given latitude and longitude. The center of the testdiv is defiend by its width/2 and height/2. In some cases you might want to specify these offsets, you can do so by:

var attributes = {
  "centerOffsetX":"12px",
  "centerOffsetY":"24px"
  };

mmmap.drawCustomDiv(testdiv, 13.752016, 100.53059, "HEY", attributes);

Other possible attributes:

  • cancelmousedown: if set to true, mouse down event on the popup will NOT propagate further to the underlying map (default: false)

Delete a user-defined div

customdiv_id = id of the custom div you get as a return value of the call mmmap.drawCustomDiv(...)  (see the previous question)

mmmap.removeCustomDivs(markerimage.customdiv_id);

Or you can delete all custom divs:

mmmap.clearCustomDivs();

Get the position of a user-defined div

customdivholder_id = id of the custom div you get as a return value of the call mmmap.drawCustomDivHolder(...) 

var mydiv = mmmap.getCustomDivHolder(customdivholder_id);

alert(mydiv.latitude + ", " + mydiv.longitude);

Resize the map

mmmap.setSize(newwidth,newheight);
mmmap.rePaint();

Move to a location

mmmap.moveTo(latitude, longitude);

Get and set the zoom level

mmmap.getZoom(); mmmap.setZoom(3);

Get/Set map mode

To change the base map layer, one can use the following functions:

mmmap.setMapMode("normal");
mmmap.setMapMode("hydro");
mmmap.getMapMode();

mmmap.setMapAttributes( {"opacity": 0.65}); // set the opacity attribute of the base layer

Available base layer map modes are: icons, icons-en, normal, normal-en, hydro, political, political-en, rail, rail-en, traffic, traffic-en, water, minimal, hydro (subject to change).

Add custom items to the right-click menu

Define a function that will print the HTML content for the menu items and register it with mmmap.extraRightClickFunction.

function myExtraRightClickFunction() {
  var txt = '<br/><span id="add_location_text" style="font-family:loma,tahoma; font-size: 9pt;cursor:pointer;text-decoration: underline" onmousedown="window.open(\'http://myweb/myurl?lat=' + mmmap.mouseCursorLat() + '&long=' + mmmap.mouseCursorLong() + '\');">My custom menu item</span>';
  return txt;
}

then do:

 mmmap.setExtraRightClickFunction(myExtraRightClickFunction);

Cannot type "+", "-", "z", "x" in my search box. How do I fix?

This is because those keys' events are used for map navigation. One work around is to do something like this.

<input type=text name="searchfor" id="searchfor" size=14 onfocus="document.onkeydown='return true'" onblur="setKeyFocusAtMaparea()" onclick="document.onkeydown='return true'">

And  setKeyFocusAtMaparea() should be something like:

function setKeyFocusAtMaparea() {

  document.onkeydown=kh.doKeyDown;
  mmmap.mapdiv.focus();
} 

Get the current latitude

Use mmmap.centerLat() and mmmap.centerLong()

(Accessing the global variables "latitude" and "longitude" are depreciated)

Drawing Lines, Polygons, and Ellipses

There are two ways to draw lines as shown below but for polygons, use only the latter method.

 
Use mmmap.drawLine functions (old way):
 
mmmap.drawLine(x1,y1, x2,y2, startzoom,stopzoom,title,detail, detailpopup , pointmode)

mmmap.drawPolyline(points, startzoom,stopzoom,title,detail, detailpopup, pointmode)

Example:

mmmap.gssetopacity(0.7);
mmmap.gssetlinewidth(8);
mmmap.gssetcolor("#00FF00");
var points = [[100.53, 13.746], [100.528, 13.733], [100.544, 13.726]];
mmmap.drawPolyline(points, 1, 10); // , "", "", "", false);

Use MMLine class (new way)

Example:

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") // line or polygon
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);

polygon.hide();

polygon.show();

polygon.remove(); // remove permanently

var  polygon2 = new MMLine(mmmap);
polygon2.setMode("polygon") // line or 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);

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);

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();

To draw label use setCenter(lat, long) and setLabel(text):

polygon.setCenter(13.123, 100.456);polygon.setLabel("My polygon");

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); // *** to ensure that all objects are properly displayed ***

Please see http://mapdemo.longdo.com/index-drawpolygons.php.

 

Advance Lines, Polygons, and Ellipses

Keyboard-related

  • mmmap.setMoveMapWhenDBLClicked(<boolean>); whether to move the map to center when the user double-clicked (default = true)
  • mmmap.enableKeyboardShortCuts(); user can use keys like +, -, z, x, and arrow keys to control the map (to disable set document.onkeydown, onkeypress, onkeyup to something else...)
  • mmmap.setKeyFocusAtMaparea(); to move the focus to the map so that the above enableKeyboardShortCuts will work
  • mmmap.enableMouseWheel(); enable map zooming using mousewheel

Custom Event Handlers

  • mmmap.setMouseMoveHandler(f); set custom mousemove event handler (will be delayed with setTimeout for 100 ms)
  • mmmap.setMouseMoveHandlerNoDelay(f); set custom mousemove event handler (run without delay)
  • mmmap.setMouseDownHandler(f); set custom mousedown event handler
  • mmmap.setMouseUpHandler(f); set custom mouseup event handler
  • mmmap.setMouseWheelHandler(f); set custom mousewheel event handler
  • mmmap.setResolutionChangedHandler(f); set custom event handler for resolution changing event
  • mmmap.setMoveToHandler(f); set custom event handler for map moved event
  • Example: attach an event handler for mouse-move actions:
function f() {
  alert("Current location is " + latitude + ", " + longitude);
};
mmmap.setMouseMoveHandler(f);

Adding controls

Controls will be displayed at the top left corner of the maps.

var canvas= mmmap.addControl("canvas");

canvas.addButtons("measure");

canvas.addButtons("poly");

canvas.addButtons("clear");

 

Advanced controls

Show/Hide Things

For minimalists:

  • Center mark: mmmap.showCenterMark() and mmmap.hideCenterMark()

  • Scale: mmmap.showScale() and mmmap.hideScale()

  • Zoom bar: mmmap.showZoomBar() and mmmap.hideZoomBar()

  • Mode selector: mmmap.showModeSelector() and mmmap.hideModeSelector()

Data API

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)

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); // x1.getGSObjects() returns an array of MMLine instances

Tag

MM Map API allows displaying of Object-Of-Interests (OOI) from Longdo Map web site by using the mmmap.showOOITag() method:
  • Syntax
    • mmmap.showOOITag(tag);
    • mmmap.showOOITagWithShowLevel(tag, showlevel_min, showlevel_max, showlevel_label_min, showlevel_label_max); // these showlevel_*, 0 means default from DB
    • mmmap.showOOITagWithShowLevelWithCustomIcon(tag, showlevel_min, showlevel_max, showlevel_label_min, showlevel_label_max, iconmode); // iconmode = "" means default (server-supplied), "none" means no icon, otherwise an image location (URL) of custom icon
    • mmmap.clearAllOOITags(); // clear all OOI tags
  • Examples:
    • mmmap.showOOITag('hospital'); // show OOIs of tag "hospital" at their default zoom levels
    • mmmap.showOOITagWithShowLevel('education',3,0,11,0); // start showing OOIs of tag "education" from zoom level 3-End and their lables from zoom 11-End

Layers

MM Map API allows displaying of map layers together with the base one. In layers, image tiles will be retrieved from image servers using the protocol specified in the configuration. Currently two protocols are supported: the WMS (Web Map Service) and the LONGDO own map image server protocol.
 
The usage of the Layer API can be illustrated in the example JavaScript code below:

  • var  srtmhillshade = {
                      layertype: "WMS", // can be "WMS" or "LONGDO"
                      name: "topp:srtm_56_09 - Untiled",
                      url: "http://geoserver.longdo.com/geoserver/wms",
                      layers: 'SRTM-hillshade',
                      extra: '&FORMAT=image%2Fpng&TILED=true&TILESORIGIN=95%2C15&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&EXCEPTIONS=application%2Fvnd.ogc.se_inimage',  // WMS URL except SRS, LAYER, WIDTH, HEIGHT, and BBBOX
                      zIndex: 2  // stack order of this layer
                    };

  • mmmap.addLayer(srtmhillshade); // add this layer into display
  • mmmap.hideLayer(srtmhillshade); // hide the layer
  • mmmap.showLayer(srtmhillshade); // show the layer (after hiding)
  • mmmap.deletLayer(srtmhillshade); // delete the layer

More information please view the example at http://mapdemo.longdo.com/index-layers.php

Etc

  • mmmap.getKmPerLat(); get kilometers per 1 latitude degree
  • mmmap.getKmPerLong(lat); get kilometers per 1 longitude degree at the given latitude
  • mmmap.findAppropriateZoom(points); find an appropriate zoom level that is less than the current zoom and fits all the points stored in the points array of [long, lat]

 

  • 5043 reads