Select to view content in your preferred language

Problem on OneMap with ESRI Javascript API On Toolbars

1358
2
04-13-2011 01:11 AM
yaphanlong
New Contributor
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);

            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>
      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
      <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>
0 Kudos
2 Replies
SiqiLi
by Esri Contributor
Esri Contributor
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
0 Kudos
Vermiedelos_reyes
Emerging Contributor
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);
}
0 Kudos