topic Re: Problem with Zoom In Zoom Out in ArcGIS JavaScript Maps SDK Questions

Problem with Zoom In Zoom Out

AlejandroMorales — Tue, 31 Aug 2010 16:07:35 GMT

Hi, Im having this problem... whenever I run this web site I cannot make zoom in or zoom out, or even move the map with the pan control, can anyone tell me why is this ? please I've been working with this sample since I found it and I don't know how to solve this problem ...
my code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Measure Distances</title>
       
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0" type="text/javascript"></script>

    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.geometry");

        var map, navToolbar;

        var geometryService;


        function init() {
        
            //esriConfig.defaults.map.sliderLabel = null;

        
            //var startExtent = new esri.geometry.Extent(-80.0571, 41.3697, -74.4321, 44.0822, map.spatialReference);  //new esri.SpatialReference({ wkid: 4326 }));
            var map = new esri.Map("map"); //, { extent: FullExtent });
            dojo.connect(map, "onLoad", initFunctionality);

            map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://servarcgisprd/ArcGIS/rest/services/MapaBase/MapServer"));
            geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            dojo.connect(geometryService, "onLengthsComplete", outputDistance);

//            navTool = new esri.toolsbars.Navigation(map);
//            dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

        }

        function initFunctionality(map) {
            var tb = new esri.toolbars.Draw(map);

            var lengthParams = new esri.tasks.LengthsParameters();

            //on draw end add graphic, project it, and get new length
            dojo.connect(tb, "onDrawEnd", function (geometry) {
                map.graphics.clear();
                lengthParams.polylines = [geometry];
                lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                lengthParams.geodesic = false;
                //call GeometryService.lengths() with projected geometry
                geometryService.lengths(lengthParams);
                var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));

            });

            tb.activate(esri.toolbars.Draw.LINE);
        }

        function outputDistance(result) {
            dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0]) + " metros or " + dojo.number.format(result.lengths[0] / 1000) + " Kilometros";
        }

//        function extentHistoryChangeHandler() {
//            dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
//            dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
//        }
        
        dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    Click and hold down on the map to draw a line that will be added to the map.  The application will then use the geometry service to project and compute the length of the line.
    <div id="map" ></div>
    Distance: <span id="distance"></span>

  </body>
</html>

Re: Problem with Zoom In Zoom Out

derekswingley1 — Tue, 31 Aug 2010 16:24:16 GMT

Deactivate your drawing toolbar?

Re: Problem with Zoom In Zoom Out

AlejandroMorales — Tue, 31 Aug 2010 17:32:32 GMT

Thanks swingley! you rock! 😄

Re: Problem with Zoom In Zoom Out

AlejandroMorales — Tue, 31 Aug 2010 19:29:40 GMT

Hi, It worked what you told me, Just I want to know If you can help me with this, in the same code I want to make 2 buttons (one for activate the toolbar another for deactivate it) so it's that possible?

thanks, for your anwser

Deactivate your drawing toolbar?

Re: Problem with Zoom In Zoom Out

derekswingley1 — Tue, 31 Aug 2010 20:57:20 GMT

Good deal, glad to help.

The drawing toolbar sample has examples of using buttons to call activate/deactivate. All of the buttons to create graphics first call activate.

Re: Problem with Zoom In Zoom Out

AlejandroMorales — Sat, 11 Dec 2021 08:21:26 GMT

I tried those samples, but with my code It didn't work...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Measure Distances</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">        djConfig = { parseOnLoad: true }</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0" type="text/javascript"></script>

    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.geometry");
        dojo.require("esri.toolbars.draw");
        
       
        var map, navToolbar;
        var bandera = 1; 
        var geometryService;
       
        function init() {
            //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
            //If this null or not available the project and lengths operation will not work.  Otherwise it will do a http post to the proxy.

            //esriConfig.defaults.map.sliderLabel = null;

            //esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
            //esriConfig.defaults.io.alwaysUseProxy = false;

            //var startExtent = new esri.geometry.Extent(-80.0571, 41.3697, -74.4321, 44.0822, new esri.SpatialReference({ wkid: 32615 }));
            var startExtent = new esri.geometry.Extent({
                "xmin": 650.24376718739,
                "ymin": 1515.85251773739,
                "xmax": 807.862232212611,
                "ymax": 1673.47098276261,
                "spatialReference": { 'wkid': 32615 }
            });
            
            var map = new esri.Map("map"); //, { extent: startExtent });
            dojo.connect(map, "onLoad", initFunctionality);

            //map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
            map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://servarcgisprd/ArcGIS/rest/services/MapaBase/MapServer"));

            geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
            dojo.connect(geometryService, "onLengthsComplete", outputDistance);
        }

        function initFunctionality(map) {
            var tb = new esri.toolbars.Draw(map);

            var lengthParams = new esri.tasks.LengthsParameters();

            //on draw end add graphic, project it, and get new length
            dojo.connect(tb, "onDrawEnd", function (geometry) {
                map.graphics.clear();
                lengthParams.polylines = [geometry];
                lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                lengthParams.geodesic = true;
                //call GeometryService.lengths() with projected geometry
                geometryService.lengths(lengthParams);
                var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
            });

              tb.activate(esri.toolbars.Draw.LINE);
        
        }

        function outputDistance(result) {
            dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0]) + " metros or " + dojo.number.format(result.lengths[0] / 1000) + " Kilometros";
          
        }

        dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    Click and hold down on the map to draw a line that will be added to the map.  The application will then use the geometry service to project and compute the length of the line.
           
    <div id="map" class="tundra" style="width:1024px; height:512px; border:1px solid #000;"></div>
    Distance: <span id="distance"></span><br />
    <input type="button" value="Activar" onclick="" /><br />
    <input type="button" value="Desactivar" onclick="toolbar.deactivate();map.showZoomSlider();" /><br /> 
    
    <button dojoType="dijit.form.Button" onClick="tb.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();">Line</button>
    <button dojoType="dijit.form.Button" onClick="tb.deactivate();map.showZoomSlider();">Deactivate</button>     
  </body>
</html>

It's like tb its not a global variable I don't know It seems to me that but my experience with JavaScript its very little

thanks for taking the time to read this

Re: Problem with Zoom In Zoom Out

derekswingley1 — Sat, 11 Dec 2021 08:21:28 GMT

I think you're almost there...make tb global and change your markup to something like this:

    <div id="map" class="tundra" style="width:1024px; height:512px; border:1px solid #000;"></div>
    Distance: <span id="distance"></span><br />
    <input type="button" value="Desactivar" onclick="tb.deactivate();map.showZoomSlider();" />
    <input type="button" value="Line" onclick="tb.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();" /

Re: Problem with Zoom In Zoom Out

AlejandroMorales — Sat, 11 Dec 2021 08:21:31 GMT

Thank you so much!!! It worked!
You know the line sends its lenght to show in the distance space, but it's not showing any distance at all , I think it's because of the tb variable, it seems like its connecting with the geometry service at "http://sampleserver3.arcgisonline.com... " but still doesn't show the distance.

thanks for all the help I really really appreciate.

I think you're almost there...make tb global and change your markup to something like this:

    <div id="map" class="tundra" style="width:1024px; height:512px; border:1px solid #000;"></div>
    Distance: <span id="distance"></span><br />
    <input type="button" value="Desactivar" onclick="tb.deactivate();map.showZoomSlider();" />
    <input type="button" value="Line" onclick="tb.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();" /

Re: Problem with Zoom In Zoom Out

AlejandroMorales — Wed, 01 Sep 2010 13:53:52 GMT

Hi swingley I just want to thank you!
I found out was the problem was the one about the distance I told you about like 1 hour ago,
what happened was that my "<span id ="span1">" was incorrect it supposed to be "<span id="distance">" but I just changed it and it work just fine! thank you so much!!

Alex