Measure Tool off

deleted-user-yA_w_FC9FKe5 — Tue, 27 May 2014 11:25:52 GMT

I am using a title pan in my application and it seems to be throwing off the measure tool. However, big the title pane is when I use this tool it is off by the size of my title pane. How can I fix this?

See example be low.
http://jsbin.com/baqas/1/edit

Thanks in advance.

Re: Measure Tool off

TimWitt — Sat, 11 Dec 2021 12:48:57 GMT

Michael,

would this work for you?

<!DOCTYPE html>
<html> 
  <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 Tool</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html,body {
        height:100%;
        width:100%;
        margin:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #map {
        border:solid 2px #808775;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        margin:5px;
        padding:0px;
      }
      #titlePane{
        width:240px;
      }
      .claro .dijitTitlePaneTitle {
        background: #808775;
        font-weight:600;
        border:solid 1px #29201A;
      }
      .claro .dijitTitlePaneTitleHover {
        background:#808775;
      }
      .claro .dijitTitlePaneTitleActive {
        background:#808775;
      }
      .claro .dijitTitlePaneContentOuter {
        border-right: solid 2px #808775 !important;
        border-bottom: solid 2px #808775 !important;
        border-left: solid 2px #808775 !important;
      }
      </style>
      <script src="http://js.arcgis.com/3.9/"></script>
    <script>
require(["dojo/dom",
          "esri/Color",
          "dojo/keys",
          "dojo/parser",

          "esri/config",
          "esri/sniff",
          "esri/map",
          "esri/SnappingManager",
          "esri/dijit/Measurement",
          "esri/layers/FeatureLayer",
          "esri/renderers/SimpleRenderer",
          "esri/tasks/GeometryService",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          
          "esri/dijit/Scalebar",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dijit/TitlePane",
          "dijit/form/CheckBox"
    ],
    function(dom, Color, keys, parser, esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol){      
      var map;
        
        parser.parse();
        //This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to  
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
        //for details on setting up a proxy page.
        esriConfig.defaults.io.proxyUrl = "/proxy";
        esriConfig.defaults.io.alwaysUseProxy = false;
        
        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
        esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        
        map = new Map("map", {
          basemap: "satellite",
          center: [-85.743, 38.256],
          zoom: 17
        });

        var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
         new Color([195,176,23]), 2),null);
        
        var parcelsLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        parcelsLayer.setRenderer(new SimpleRenderer(sfs));
        map.addLayers([parcelsLayer]);
        
        //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
        var snapManager = map.enableSnapping({
          snapKey:has("mac") ? keys.META : keys.CTRL
        });
        var layerInfos = [{layer: parcelsLayer}];
        snapManager.setLayerInfos(layerInfos);

        var measurement = new Measurement({
          map: map
        }, dom.byId("measurementDiv"));
        measurement.startup();
});
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
    style="width:100%; height:100%;">
    <div id="filterTitlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Filter Properties',  open: true,region:'top'" >
  The bigger the panel the farther off the point on the map is from the location I clicked
<br>
<br>
  
</div>
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">


        <div style="position:absolute; right:20px; top:10px; z-Index:999;">
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
            <div id="measurementDiv"></div>
            <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Tim

Re: Measure Tool off

deleted-user-yA_w_FC9FKe5 — Tue, 27 May 2014 12:11:33 GMT

thanks for the quick response. I already have information in the top container and having it set to a certain size to fit the contents of the title pane kind of takes away from the idea here.

I'm currently experiementing with making it an absolute position. the problem with that is it covers part of the map. In the end it may be my best option. Just figured I could not have been the first person to have this problem with the title pane.

<div id="filterTitlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Filter Properties', open: false" style="position:absolute; left:0px; bottom:0px; width:100%; z-Index:999;">

topic Measure Tool off in ArcGIS JavaScript Maps SDK Questions

Measure Tool off

Re: Measure Tool off

Re: Measure Tool off