The Code below is taken from the sample. I had only changed the base map to OneMap and the buttons are not working already. Can anyone help me with this. thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta name="viewport" content="width=device-width,user-scalable=no"/> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Maps Toolbar</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript"> djConfig = { parseOnLoad: true } </script> <script type='text/JavaScript' src='http://www.onemap.sg/API/JS?accessKEY=xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r...'></script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.toolbars.draw"); dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane");
var toolbar, symbol, geomTask; var resizeTimer; var map = new GetOneMap('map', 'SM');
function init() { dojo.connect(map, "onLoad", createToolbar);
function createToolbar(map) { dojo.connect(dijit.byId('map'), 'resize', function () { resizeMap(); }); toolbar = new esri.toolbars.Draw(map); dojo.connect(toolbar, "onDrawEnd", addToMap); }
function addToMap(geometry) { toolbar.deactivate(); map.showZoomSlider(); switch (geometry.type) { case "point": var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25])); break; case "polyline": var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1); break; case "polygon": var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); break; case "extent": var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); break; case "multipoint": var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 1), new dojo.Color([255, 255, 0, 0.5])); break; } var graphic = new esri.Graphic(geometry, symbol); map.graphics.add(graphic); } //Handle resize of browser function resizeMap() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { map.resize(); map.reposition(); }, 500); }
Your map variable in the code is not an esri.Map object. It comes from GetOneMap() from onemap API. Please check their API documentation. For their GetOneMap class, there is no method called addLayer(). Therefore, the firebug first returns an error message shows the addLayer() method is undefined.
Second, esri.toolbars.Draw(map) method is attached to an esri.Map object. In your code, the map object is not an esri.Map object. It is a map object form onemap API.