Problem with Zoom In Zoom Out

1369
8
08-31-2010 09:07 AM
AlejandroMorales
New Contributor
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>
0 Kudos
8 Replies
derekswingley1
Frequent Contributor
0 Kudos
AlejandroMorales
New Contributor
Thanks swingley! you rock! 😄
0 Kudos
AlejandroMorales
New Contributor
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?
0 Kudos
derekswingley1
Frequent Contributor
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.
0 Kudos
AlejandroMorales
New Contributor
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
0 Kudos
derekswingley1
Frequent Contributor
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();" /
0 Kudos
AlejandroMorales
New Contributor
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();" /
0 Kudos
AlejandroMorales
New Contributor
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
0 Kudos