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/.
Initialize
Include MM Map API
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 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), '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);
Demo
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.
Marker and User-defined Div
Create 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 Marker
marker_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 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,
};
mmmap.showPopUp(lat, lon, title, content, popup_params);
Other possible attributes:
- fixpopupsize - if set to true, the width and height will be exactly as given, otherwise they will be LESS THAN OR EQUAL to the given values
- 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
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:
- cancelmousedown - if set to true, mouse down event on the popup will NOT propagate further to the underlying map (default: false)
Delete User-defined Div
customdiv_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 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);
Map Manipulation
Resize Map
mmmap.setSize(newwidth,newheight); mmmap.rePaint();
MoveLocation
mmmap.moveTo(latitude, longitude);
Get/Set 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();
Set the opacity attribute of the base layer.
mmmap.setMapAttributes({ "opacity" : 0.65 });
Available base layer map modes are: (subject to change)
- icons, icons-en, icons-ja (สถานที่)
- normal, normal-en, normal-ja (ถนน)
- gray, gray-en, gray-ja (สถานที่ สีเทา)
- traffic, traffic-en, traffic-ja (ถนน สีเทา)
- rail, rail-en (ทางรถไฟ)
- political, political-en (เขตการปกครอง)
- water, minimal, hydro (ไม่มีเส้นถนน)
For traffic overlay add '+overlay' after mode name e.g., gray+overlay, gray+overlay-en
Custom 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;
}
mmmap.setExtraRightClickFunction(myExtraRightClickFunction);
Fix Navigation Key
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 Current Position
mmmap.centerLat(); mmmap.centerLong();
Accessing the global variables "latitude" and "longitude" are depreciated
Get Visible Area Border
MMMap.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 pad
showZoomBar
mmmap.showZoomBar(); // show Longdo Map classic zoom bar
hideZoomBar
mmmap.hideZoomBar(); // hide Longdo Map classic zoom bar
showVerticalZoomBar
mmmap.showVerticalZoomBar(); // show Longdo Map zoom bar
hideVerticalZoomBar
mmmap.hideVerticalZoomBar(); // hide Longdo Map zoom bar
showMovingPad
mmmap.showMovingPad(); // show Longdo Map moving pad
hideMovingPad
mmmap.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
Keyboard-related
Move Map When Double Clicked
mmmap.setMoveMapWhenDBLClicked(<boolean>);
Whether to move the map to center when the user double-clicked (default = true)
Enable Keyboard ShortCuts
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...)
Set Key Focus At Maparea
mmmap.setKeyFocusAtMaparea();
To move the focus to the map so that the above enableKeyboardShortCuts will work
Enable Mouse Wheel
mmmap.enableMouseWheel();
Enable map zooming using mousewheel
Custom Event Handlers
Mouse Move Handler
mmmap.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 Delay
mmmap.setMouseMoveHandlerNoDelay(f);
Set custom mousemove event handler (run without delay)
Mouse Down Handler
mmmap.setMouseDownHandler(f);
Set custom mousedown event handler
Mouse Up Handler
mmmap.setMouseUpHandler(f);
Set custom mouseup event handler
Mouse Wheel Handler
mmmap.setMouseWheelHandler(f);
Set custom mousewheel event handler
Resolution Changed Handler
mmmap.setResolutionChangedHandler(f);
Set custom event handler for resolution changing event
Move To Handler
mmmap.setMoveToHandler(f);
Set custom event handler for map moved event
Controls
Add 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');
Get Shapes
Get all shapes drawn by user
canvas.getAllShapes();
Get last shape drawn by user
canvas.getLastShape();
see http://mapdemo.longdo.com/index-getlineobjects.php
Callback Functions
Callback 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 Module
Center Mark
mmmap.showCenterMark();
mmmap.hideCenterMark();
Scale
mmmap.showScale();
mmmap.hideScale();
Zoom Bar
mmmap.showZoomBar();
mmmap.hideZoomBar();
Mode Selector
mmmap.showModeSelector();
mmmap.hideModeSelector();
Tag
Show Tag
MM 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 Tags
mmmap.clearAllOOITags();
Clear all OOI tags
Etc.
Layer
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
km/degree
mmmap.getKmPerLat();
Get kilometers per 1 latitude degree
mmmap.getKmPerLong(lat);
Get kilometers per 1 longitude degree at the given latitude
Appropriate Zoom
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]
See example at http://mapdemo.longdo.com/index-appropriate zoom.php
- 1044 reads
