topic Re: measure distance and change back to moving around in ArcGIS JavaScript Maps SDK Questions

measure distance and change back to moving around

HallbjornViktorsson — Fri, 02 Jul 2010 09:00:05 GMT

Hello,

so I'm trying to make my program work that way, that when I check my checkbox I will start measuring distance on my map, At the moment I can only do that when I have it active when I load the map, by that I mean when I have it all out side the checkbox so it doesn't matter if it is clicked or not I just measure the distance. and I was wondering if any one her know how I could fix this will put some cod her bellow so you can see how I did it.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTM...tp://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>Map</title>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/tundraGrid.css">


    <link type="text/css" href="../src/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../src/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../src/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../src/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../src/ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
djConfig = {
       parseOnLoad:true
      }
</script>

    <style>
#format { margin-top: 2em; }
</style>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">




<script type="text/javascript" src="../src/dojo.js.uncompressed.js" ></script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">

      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.tasks.geometry");
      dojo.require("esri.toolbars.draw");
      dojo.require("dojo.number");


      var map, startExtent;
      var grid;
      var geometryService;


function init() {
     dojo.connect(grid, "onRowClick", onRowClickHandler);

startExtent = new esri.geometry.Extent({"xmin":yourinfo,"ymin":yourinfo,"xmax":yourinfo,"ymax":yourinfo,"spatialReference":{"wkid":yourinfo}});
        map = new esri.Map("map", { extent: startExtent });

        dojo.connect(map,"onLoad", function(map) {map.infoWindow.resize(250, 100);} );

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("yourinfo");
        map.addLayer(basemap);

        geometryService = new esri.tasks.GeometryService("yourinfo");

        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout( function() {
             map.resize();
                map.reposition();
            }, 500);
          });
        });
      }


   //teikna línu fyrir veglengd.
       function initFunctionality(map) {
            var tb = new esri.toolbars.Draw(map);

              //on draw end add graphic, project it, and get new length
              dojo.connect(tb, "onDrawEnd", function(geometry) {
              map.graphics.clear();
              var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));.
              geometryService.project([graphic],new esri.SpatialReference({"wkid":yourinfo}));
            });
            tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
          }

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

    dojo.addOnLoad(init);



   function validateVegalengd(veg){
    if(veg.checked==1){

   dojo.connect(map, "onLoad", initFunctionality);

   dojo.connect(geometryService, "onLengthsComplete", outputDistance);
   dojo.connect(geometryService, "onProjectComplete", function(graphics) {
   geometryService.lengths(graphics);
   });
   }
      else{

      }
   }

     </script>

</head>

<body class="tundra">
<div id="cool" >
      <form name="Sup">
<input type="checkbox" id="check1" name=veg1 onclick="return validateVegalengd(veg1);"/><label for="check1">Vegalengd</label>
</form>
<div dojotype="dijit.layout.BorderContainer" gutters="false"
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
     </div></div>
</body>
</html>



I tried to make the code as shot as possible, not sure how good job I did,   but as it is now if you click the check box it takes you to validatevegalengd there it checks if the checkbox was checked or unchecked after that it should be able to start the drawing function but it dose not matter. on the other hand if I start with he drawing function no the checkbox validation just inside the main function where I load the map at start it works fine. so if there is some one that can help me fix this it would be awesome:)

Re: measure distance and change back to moving around

AxelSchaefer — Tue, 06 Jul 2010 13:47:23 GMT

You can try to add and remove event listeners as described in the JS API documentation.
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_events.htm

Re: measure distance and change back to moving around

HallbjornViktorsson — Wed, 07 Jul 2010 08:21:33 GMT

unfortunately that doesn't work 😞 see the problem is that when i put it in the validate function it's like it dose not start the draw stuff, but when I just have it in the init function at start it works, so if I connect it on load up I can't turn it off and then back on.

is there relay no one that has done this and know how I can do this?

Re: measure distance and change back to moving around

PetrHorn — Wed, 22 Sep 2010 10:18:32 GMT

I change the sample for measuring distance. I have detach the function for measure activating from init function and add function to disable measure.

To init function I have added:

geometryService = new esri.tasks.GeometryService("http://server/Geometry/GeometryServer");
dojo.connect(geometryService, "onLengthsComplete", outputDistance);
dojo.connect(geometryService, "onProjectComplete", function(graphics) {
    //call GeometryService.lengths() with projected geometry
    geometryService.lengths(graphics);
});

Separate functions for activatig measure and listeners:
function initGeometrie(map) { // nastartuje mereni vzdalenosti, start measure of geometry
        tb = new esri.toolbars.Draw(map);
        dojo.connect(tb, "onDrawEnd", function measuregeom(geometry) {
          map.graphics.clear();
          var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
          geometryService.project([graphic],new esri.SpatialReference({"wkid":102067}));
        });
        tb.activate(esri.toolbars.Draw.LINE);
      }

      function outputDistance(result) {
                 dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] ) + " metrů";
      }

function for deactivating measure:
function disconGeometrie(){ // stop measure of geometry
          tb.deactivate();
    }
Then you call function initGeometrie(map) and disconGeometrie() from HTML code.

Re: measure distance and change back to moving around

ClaytonNam — Sat, 11 Dec 2021 23:53:19 GMT

Hi,

I'm new at both javascript and the esri javascript api and trying to incorporate the code provided by horn76 into the measuring sample (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/util_measureline.html)

Turning off the measuring works fine, but it won't turn back on again. Anyone care to tell me what I'm doing wrong? Thanks!

<!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">
  <!--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>Measure Distances</title>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1" type="text/javascript"></script>

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

      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.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:4326}) );
        var map = new esri.Map("map", {extent:startExtent});
        dojo.connect(map, "onLoad", initGeometrie);

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

        geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        dojo.connect(geometryService, "onLengthsComplete", outputDistance);
        dojo.connect(geometryService, "onProjectComplete", function(graphics) {
  //call GeometryService.lengths() with projected geometry
  geometryService.lengths(graphics);
  });
      }

      function outputDistance(result) {
        dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] / 1000) + " kilometers";
      }
      
      function initGeometrie(map) {
        tb = new esri.toolbars.Draw(map);
        var lengthParams = new esri.tasks.LengthsParameters();
        dojo.connect(tb, "onDrawEnd", function(geometry) {
        map.graphics.clear();
        lengthParams.polylines = [geometry];
        lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
        lengthParams.geodesic = true;
        geometryService.lengths(lengthParams);
        var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
        });
        tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
      }

      function disconGeometrie(){ // stop measure of geometry
        tb.deactivate();
      } 

      dojo.addOnLoad(init);
    </script>

  </head>
  <body>
  <input type="button" value="measure" onclick="initGeometrie(map)"/><input type="button" value="no measure" onclick="disconGeometrie()"/>
    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="claro" style="width:1024px; height:512px; border:1px solid #000;"></div>
    Distance: <span id="distance"></span>
  </body>
</html>

Re: measure distance and change back to moving around

KathyL — Sat, 11 Dec 2021 23:53:21 GMT

<!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">
  <!--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>Measure Distances</title>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1" type="text/javascript"></script>

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

      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.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:4326}) );
        var map = new esri.Map("map", {extent:startExtent});
        dojo.connect(map, "onLoad", initGeometrie);

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

        geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        dojo.connect(geometryService, "onLengthsComplete", outputDistance);
        dojo.connect(geometryService, "onProjectComplete", function(graphics) {
  //call GeometryService.lengths() with projected geometry
  geometryService.lengths(graphics);
  });
      }

      function outputDistance(result) {
        dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] / 1000) + " kilometers";
      }
      
      function initGeometrie(map) {
        tb = new esri.toolbars.Draw(map);
        var lengthParams = new esri.tasks.LengthsParameters();
        dojo.connect(tb, "onDrawEnd", function(geometry) {
        map.graphics.clear();
        lengthParams.polylines = [geometry];
        lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
        lengthParams.geodesic = true;
        geometryService.lengths(lengthParams);
        var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
        });
        tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
      }

      function disconGeometrie(){ // stop measure of geometry
        tb.deactivate();
      } 

      dojo.addOnLoad(init);
    </script>

  </head>
  <body>
  <input type="button" value="measure" onclick="initGeometrie(map)"/><input type="button" value="no measure" onclick="disconGeometrie()"/>
    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="claro" style="width:1024px; height:512px; border:1px solid #000;"></div>
    Distance: <span id="distance"></span>
  </body>
</html>