Problem on OneMap with ESRI Javascript API On Toolbars

yaphanlong — Wed, 13 Apr 2011 08:11:35 GMT

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"/>
    
    <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/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi'></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);

            var myLayerService = "http://www.onemap.sg/ArcGIS/rest/services/POI/MapServer";
            var myLayer = new esri.layers.ArcGISDynamicMapServiceLayer(myLayerService);
            map.addLayer(myLayer);
        }

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

        dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
    <div id="header" dojotype="dijit.layout.ContentPane" region="top" style="height:75px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;overflow:hidden;">
      <span>Draw:<br /></span>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();">Point</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.MULTI_POINT);map.hideZoomSlider();">Multipoint</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();">Line</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();">Polyline</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();">Polygon</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button>
      
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.ARROW);map.hideZoomSlider();">Arrow</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.TRIANGLE);map.hideZoomSlider();">Triangle</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.CIRCLE);map.hideZoomSlider();">Circle</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.ELLIPSE);map.hideZoomSlider();">Ellipse</button>
    </div>
    <div id="map" dojoType="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" region="center">
    </div>
</div>
</body>
</html>

Re: Problem on OneMap with ESRI Javascript API On Toolbars

SiqiLi — Wed, 13 Apr 2011 13:28:18 GMT

Hi hanlong,

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.

http://www.onemap.sg/API/Help/ check getOnMap tab on the left side.

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.

Also, here is the onemap live sample for the drawing toolbar I found. Their sample itself doesn't seem work. Get some errors from firebug.
http://www.onemap.sg/API/Help/HTMLSource/DrawingToolbar.aspx

Re: Problem on OneMap with ESRI Javascript API On Toolbars

Vermiedelos_reyes — Fri, 12 Oct 2012 06:14:29 GMT

try changing the code with this :

var toolbar, symbol, geomTask;
var resizeTimer;
var oneMap = new GetOneMap('map', 'SM');

function init() {

//dojo.connect(oneMap.map, "onLoad", createToolbar);
map=oneMap.map;
createToolbar(map)

var myLayerService = "http://www.onemap.sg/ArcGIS/rest/services/POI/MapServer";
var myLayer = new esri.layers.ArcGISDynamicMapServiceLayer(myLayerService);
map.addLayer(myLayer);
}

topic Problem on OneMap with ESRI Javascript API On Toolbars in ArcGIS JavaScript Maps SDK Questions

Problem on OneMap with ESRI Javascript API On Toolbars

Re: Problem on OneMap with ESRI Javascript API On Toolbars

Re: Problem on OneMap with ESRI Javascript API On Toolbars