MM Map API
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. For MM Line API and Data API reference, please visit MM Line API and Data API Reference. More demos code are available at http://mapdemo.longdo.com/.
InitializeInclude MM Map APIPut 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 Map ObjectSpecify 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), 'gray' (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); DemoThis 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.
Marker and User-defined DivCreate Markervar marker_id = mmmap.createMarker(13.7654, 100.538, 'Victory Monoment', '<font face=tahoma> An important transportation hub of Bangkok.อนุสาวรีย์ชัยครับ</font>'); Note 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 Markermarker_id = id of the marker you get as a return value of the call mmmap.createMarker(...) (see the previous section) mmmap.deleteMarker(marker_id); Show Popupmmmap.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,
};
mmmap.showPopUp(lat, lon, title, content, popup_params);
Other possible attributes:
To close an open popup, use mmmap.closeLocationDetailPopup(); See the demo at http://mapdemo.longdo.com/index-popupdemo.php Create 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:
Delete User-defined Divcustomdiv_id = id of the custom div you get as a return value of the call mmmap.drawCustomDiv(...) (see the previous section) mmmap.removeCustomDivs(markerimage.customdiv_id); Or you can delete all custom divs: mmmap.clearCustomDivs(); Get Position of User-defined Divcustomdivholder_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);
Map ManipulationResize Mapmmmap.setSize(newwidth,newheight); mmmap.rePaint(); MoveLocationmmmap.moveTo(latitude, longitude); Get/Set Zoom Levelmmmap.getZoom(); mmmap.setZoom(3); Get/Set Map ModeTo change the base map layer, one can use the following functions.
mmmap.setMapMode('normal');
mmmap.setMapMode('hydro');
mmmap.getMapMode();
Set the opacity attribute of the base layer.
mmmap.setMapAttributes({ "opacity" : 0.65 });
Available base layer map modes are: (subject to change)
For traffic overlay add '+overlay' after mode name e.g., gray+overlay, gray+overlay-en Custom Right-click MenuDefine 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;
}
mmmap.extraRightClickFunction = myExtraRightClickFunction;
Fix Navigation KeyCannot 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 Current Positionmmmap.centerLat(); mmmap.centerLong(); Accessing the global variables "latitude" and "longitude" are depreciated Get Visible Area BorderMMMap.getVisibleAreaBorder(); Return value is object of min/max position of map border in degree
{
"minlatitude" : xxx,
"maxlatitude" : xxx,
"minlongitude" : xxx,
"maxlongitude" : xxx
}
Zoom bar and moving padshowZoomBarmmmap.showZoomBar(); // show Longdo Map classic zoom bar hideZoomBarmmmap.hideZoomBar(); // hide Longdo Map classic zoom bar showVerticalZoomBarmmmap.showVerticalZoomBar(); // show Longdo Map zoom bar hideVerticalZoomBarmmmap.hideVerticalZoomBar(); // hide Longdo Map zoom bar showMovingPadmmmap.showMovingPad(); // show Longdo Map moving pad hideMovingPadmmmap.hideMovingPad(); // hide Longdo Map moving pad setZoomBarPosition
mmmap.setZoomBarPosition(<value>);
// 'default' or {"left":"10px", "top":"30px"} or {"bottom":"20px", "right":"10px"}
setVerticalZoomBarPosition
mmmap.setVerticalZoomBarPosition(<value>);
// 'default' or {"left":"10px", "top":"30px"} or {"bottom":"20px", "right":"10px"}
setMovingPadPosition
mmmap.setMovingPadPosition(<value>);
// 'default' or {"left":"10px", "top":"30px"} or {"bottom":"20px", "right":"10px"}
see http://mapdemo.longdo.com/index-zoombar.php showShortNoticemmmap.showShortNotice(<value>); // true or false // true will set the lower left copyright notice to be the short one (can be used when the map div is very small)
Keyboard-relatedMove Map When Double Clickedmmmap.setMoveMapWhenDBLClicked(<boolean>); Whether to move the map to center when the user double-clicked (default = true) Enable Keyboard ShortCutsmmmap.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...) Set Key Focus At Mapareammmap.setKeyFocusAtMaparea(); To move the focus to the map so that the above enableKeyboardShortCuts will work Enable Mouse Wheelmmmap.enableMouseWheel(); Enable map zooming using mousewheel
Custom Event HandlersMouse Move Handlermmmap.setMouseMoveHandler(f); Set custom mousemove event handler (will be delayed with setTimeout for 100 ms) Example
function f() {
alert('Current location is ' + mmmap.centerLat() + ', ' + mmmap.centerLong());
};
mmmap.setMouseMoveHandler(f);
Mouse Move Handler No Delaymmmap.setMouseMoveHandlerNoDelay(f); Set custom mousemove event handler (run without delay)
Mouse Down Handlermmmap.setMouseDownHandler(f); Set custom mousedown event handler Mouse Up Handlermmmap.setMouseUpHandler(f); Set custom mouseup event handler Mouse Wheel Handlermmmap.setMouseWheelHandler(f); Set custom mousewheel event handler Resolution Changed Handlermmmap.setResolutionChangedHandler(f); Set custom event handler for resolution changing event Move To Handlermmmap.setMoveToHandler(f); Set custom event handler for map moved event
ControlsAdd ControlsControls will be displayed at the top left corner of the maps.
var canvas= mmmap.addControl('canvas');
canvas.addButton('measure');
canvas.addButton('poly');
canvas.addButton('clear');
canvas.addButton('zoomarea');
Get ShapesGet all shapes drawn by user canvas.getAllShapes(); Get last shape drawn by user canvas.getLastShape(); see http://mapdemo.longdo.com/index-getlineobjects.php Callback FunctionsCallback functions when a shape is added
canvas.setAddShapeCallBack(function() {..} );
Callback functions when a shape is deleted
canvas.setDeleteShapeCallBack(function() {..} );
see http://mapdemo.longdo.com/index-getlineobjects.php
Show/Hide ModuleCenter Markmmmap.showCenterMark(); mmmap.hideCenterMark(); Scalemmmap.showScale(); mmmap.hideScale(); Zoom Barmmmap.showZoomBar(); mmmap.hideZoomBar(); Mode Selectormmmap.showModeSelector(); mmmap.hideModeSelector();
TagShow TagMM Map API allows displaying of Object-Of-Interests (OOI) from Longdo Map web site by using the mmmap.showOOITag() method
mmmap.showOOITag(tag);
mmmap.showOOITagWithShowLevel(tag, showlevel_min, showlevel_max, showlevel_label_min, showlevel_label_max);
mmmap.showOOITagWithShowLevelWithCustomIcon(tag, showlevel_min, showlevel_max, showlevel_label_min, showlevel_label_max,
iconmode);
showlevel_*, 0 means default from DB iconmode = '' means default (server-supplied), 'none' means no icon, otherwise an image location (URL) of custom icon 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 Clear Tagsmmmap.clearAllOOITags(); Clear all OOI tags
Longdo Events & Traffic camerasShow Longdo Event IconsMM Map API allows displaying of Events from Longdo Event web site by using the mmmap.showEvents() method mmmap.showEvents(event_type, showlevel_min, showlevel_max); event_type: "ttn" means show all active events from Longdo Event that added by traffic.thai.net, otherwise show all active events from Longdo Event showlevel_min: start level for show all active events' icon. (thailand map: default = 9, world map: default: 13) showlevel_max: stop level for show all active events' icon. (thailand map: default = 15, world map: default: 19) Examples: mmmap.showEvents(); Show all active events from Longdo Event.
mmmap.showEvents('ttn');
Show all active events from Longdo Event that added by traffic.thai.net. Show Traffic CamerasMM Map API allows displaying of Traffic Cameras from Longdo Traffic web site by using the mmmap.showTrafficCameras() method mmmap.showTrafficCameras(showlevel_min, showlevel_max); showlevel_min: start level for show all traffic cameras' icon. (Thailand map: default = 9, world map: default: 13) showlevel_max: stop level for show all traffic cameras' icon. (Thailand map: default = 15, world map: default: 19) Examples: mmmap.showTrafficCameras(); Start showing all traffic cameras from zoom level 9-15 (in Thailand map) / level 13-19 (in World map)
Search POIsJavascriptMM Map API allows searching of Tag/POIs from Longdo Map web site by using this method mmmap.getSearchResultObject(search, bookmark, latitude, longitude, var_name, callback, ds);
Examples:
function showFirstPOIName(result) {
alert(result.data[0].name);
}
mmmap.getSearchResultObject("hotel", 0, 13.76887, 100.49342, "search_result", "showFirstPOIName(search_result)", "data2,con");
get locations that contain "hotel" word, nearby position 13.76887,100.49342. (for POIs from NuMap and contributed points only)
mmmap.getSearchResultObject("hotel", 0, 13.76887, 100.49342, "search_result", "showFirstPOIName(search_result)");
get locations that contain "hotel" word, nearby position 13.76887,100.49342. (all data type)
Return object:
({
meta: {
hasmore:true, start:0, end:19, keyword:"hotel"
},
data: [
{
objecttype: "poi",
id:"00145064",
name:"โรงแรมเซิร์ฟ บีช",
status:"STATUS=A",
showlevel:"12",
lat:"12.8960446577816",
lng:"100.869849109296",
name_en:"Surf Beach Hotel",
tag:"tag: hotel, tag: โรงแรม",
ooi_id:"A00145064",
num_location_image:"0",
num_location_event:"0"
},
{
objecttype: "poi",
id:"00145067",
name:"โรงแรมซันไล้ท์",
status:"STATUS=A",
...
},
...
...
...
]
})
/*
meta:
hasmore - true/false (have more results or not ?)
start - index of the first of search results
end - index of the end of search results
keyword - the word for search POIs
data:
objecttype - poi(POIs), khet(District), road, tag, geom
id - POI ID
name - name (TH)
status - A(Approved), N(New/Not approved)
showlevel - start level for show on map
lat - latitude
lng - longitude
name_en - name (EN)
tag - POI's tag
ooi_id - OOI ID
num_location_image - number of location's image(s)
num_location_event - number of location's event(s)
*/
See: http://mapdemo.longdo.com/demo/index-example-code.php?file=get-search-result-object.html
RESTful APINot just javascript, you can also get search location results via RESTful API. Here's a simple example for POIs search: http://mmmap15.longdo.com/search/rpc-json.php?action=search&mode=json&key=xxxxxxxx&search=hotel&bookmark=0 ¢er_lat=12.896474¢er_long=100.869217&var=sresult&callback=getsearch(sresult);&ds=con,data2&rand=0.20621807145052362
Return JSON Object:
sresult = {
"meta" : {"hasmore" : true, "start" : 0, "end" : 19, "keyword" : "hotel" },
"data" : [
{
"objecttype": "poi",
"id":"00145064",
"name":"โรงแรมเซิร์ฟ บีช",
"status":"STATUS=A",
"showlevel":"12",
"lat":"12.8960446577816",
"lng":"100.869849109296",
"name_en":"Surf Beach Hotel",
"tag":"tag: hotel, tag: โรงแรม",
"ooi_id":"A00145064",
"num_location_image":"0",
"num_location_event":"0"
},
{
"objecttype": "poi",
"id":"00145067",
"name":"โรงแรมซันไล้ท์",
"status":"STATUS=A",
...
},
...
...
...
]
};
getsearch(sresult);
Etc.See: http://mapdemo.longdo.com/demo/index-full.php
Reverse GeocodingJavascript
mmmap.getAddressObjectFromLatLon(latitude, longitude, language, variable_name, callback_fn);
Return Address Object:
{
Examples:
function generateAddresToText(address) {
if(!address.province) address.province = "-";
if(!address.amphoe) address.amphoe = "-";
if(!address.district) address.district = "-";
if(!address.postcode) address.postcode = "-";
if(!address.road) address.road = "-";
if(!address.soi) address.soi = "-";
alert("Province: " + address.province + "\n" +
"District: " + address.amphoe + "\n" +
"Subdistrict: " + address.district + "\n" +
"Postcode: " + address.postcode + "\n" +
"Road: " + address.road + "\n" +
"Soi: " + address.soi + "\n" +
"Geocode: " + address.geocode + "\n"
);
}
mmmap.getAddressObjectFromLatLon(13.76887, 100.49342, "th", "address", "generateAddresToText(address)")
mmmap.getAddressFullTextFromLatLon(latitude, longitude, language, variable_name, callback_fn);
Return: Address (text)
Examples: mmmap.getAddressFullTextFromLatLon(13.76887, 100.49342, "th", "address", "alert(address)");
See: http://mapdemo.longdo.com/demo/index-reversegeocode-from-latlon.php
RESTful APINot just javascript, you can also get address results via RESTful API. Here's a simple example for get address from latitude, longitude: http://search.longdo.com/addr/iden.php?lat=13.73726&lon=100.51274&lang=th&var=address&callback=doProcess(address);&key=xxxxx
Return JSON Object:
address = {
"soi":"ซอยปทุมคงคา", // Lane name
"road":"ถนนเยาวราช", // Road name
"district":"แขวงสัมพันธวงศ์", // Subdistrict name
"amphoe":"เขตสัมพันธวงศ์", // District name
"province":"กรุงเทพมหานคร", // Province name
"postcode":"10100", // Post Code
"geocode":"101302" // Geocode
};
doProcess(address);
Etc.LayerMM 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
"nocache" : 0, // set to 1 to send the "&nocache=1" parameter to map server for some custom purposes
"addrand" : 0, // set to 1 to cause additional text "&rnd=<random number>" to be added to make the URL unique and avoid browser cache
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 km/degreemmmap.getKmPerLat(); Get kilometers per 1 latitude degree mmmap.getKmPerLong(lat); Get kilometers per 1 longitude degree at the given latitude Appropriate Zoomvar appropriate_zoom = mmmap.findAppropriateZoom(points); Return appropriate zoom level that is less than the current zoom and the position is also still current -- Fits all the points stored in the points array of [long, lat]
mmmap.autoMoveAndSetAppropriateZoom(points); // this function doesn't return value Move the map to center on all points and set zoom to appropriate zoom level -- Fits all the points stored in the points array of [long, lat]
And if all the points stored in array of [lat, long], you can use mmmap.swapLatLonPointsInArray(points_array_of_lat_long) function for swap your points to array of [long, lat] Examples: var lat_long_points = [ [13, 100], [13.5, 100.5] ]; var long_lat_points = mmmap.swapLatLonPointsInArray(lat_long_points); // points = [ [100, 13], [100.5, 13.5] ]; var appropriate_zoom = mmmap.findAppropriateZoom(long_lat_points); mmmap.setZoom(appropriate_zoom); // or mmmap.autoMoveAndSetAppropriateZoom(long_lat_points);
See example at - http://mapdemo.longdo.com/demo/index-appropriatezoom.php - http://mapdemo.longdo.com/demo/index-drawing-appropriatezoom.php user-defined getPOIs Functionmmmap.setMyGetPOIsFunction(callback); Overide default POIs function with user-defined function. Parameters of callback are imgid, objidx and resolution. imgid together with resolution can convert to latitude and longitude See example at http://mapdemo.longdo.com/demo/custom-getpois.php
Copyright © 2005-Now Metamedia Technology Co., Ltd.
Room 2104, 21F, Silom Center Building, 2 Silom Rd., Bangrak, Bangkok 10500 Thailand Tel: 02 632 9700-1, Fax: 02 632 9703 Email:  |
