nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Problem with Zoom In Zoom Out

AlejandroMorales

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>

Najděte více příspěvků označených jako

Accepted answers

All comments

AlejandroMorales

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

AlejandroMorales

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();" /

derekswingley1

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();" /

Capture 2.JPG

AlejandroMorales

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

derekswingley1

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.

AlejandroMorales

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?

AlejandroMorales

Thanks swingley! you rock! 😄

derekswingley1

Deactivate your drawing toolbar?

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.