hanlong

Problem on OneMap with ESRI Javascript API On Toolbars

Discussion created by hanlong on Apr 13, 2011
Latest reply on Oct 11, 2012 by vermier
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/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>
      <!--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>

Outcomes