Select to view content in your preferred language

Measure Tool off

755
2
05-27-2014 04:25 AM
deleted-user-yA_w_FC9FKe5
Deactivated User
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.
0 Kudos
2 Replies
TimWitt
Deactivated User
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
0 Kudos
deleted-user-yA_w_FC9FKe5
Deactivated User
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;">
0 Kudos