Measurement Floating Window

MayJeff — Tue, 16 Oct 2012 19:36:53 GMT

I am new to this and try to figure out how to create a floating window after measurement button is clicked. Thank you.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
      Measure Tool
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dojox/layout/resources/floatingpane.css" />
    <style type="text/css">
      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 type="text/javascript">
        djConfig = {
          parseOnLoad:true
        };
      </script>
      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>

    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.TitlePane");
      dojo.require("dijit.form.CheckBox");

      dojo.require("esri.map");
      dojo.require("esri.dijit.Measurement");
      dojo.require("esri.SnappingManager");
      dojo.require("esri.dijit.Scalebar");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dojox.layout.FloatingPane");
      dojo.require("dijit.form.CheckBox");

      var map;

      function init() {

       //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.
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
        esri.config.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
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

       var initialExtent = new esri.geometry.Extent({"xmin":-9545482,"ymin":4615382,"xmax":-9544248,"ymax":4616059,"spatialReference":{"wkid":102100}});

        map = new esri.Map("map", {
          extent:initialExtent
        });

        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });

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

        var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
         new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
         new dojo.Color([195,176,23]), 2),null);

        var parcelsLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        parcelsLayer.setRenderer(new esri.renderer.SimpleRenderer(sfs));

       /* dojo.connect(map, "onLayersAddResult", function(results){

          //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac.
          var snapManager = map.enableSnapping({snapKey:dojo.keys.copyKey});

          var layerInfos = [{layer: parcelsLayer}];
          snapManager.setLayerInfos(layerInfos);

          var measurement = new esri.dijit.Measurement({
            map: map
          }, dojo.byId('measurementDiv'));

          measurement.startup();


        });*/
        addMeasurementWidget();

        map.addLayers([parcelsLayer]);
      }

       function addMeasurementWidget() {
         var fp = new dojox.layout.FloatingPane({
           title: "Measurement Tool<img style='right:2px; position:absolute;' onclick='Javascript:toggleMeasureButton();' src='https://www.arcgis.com/apps/OnePane/basicviewer/images/close.png' />",
           resizeable: false,
           dockable: false,
           closable: false,
           style: "position:absolute; top:0; left:50px; width:300px; height: 175px; z-index: 50; visibility: hidden;",
           id: 'floater'
         }, dojo.byId('floater'));

        fp.startup();

        measure = new esri.dijit.Measurement({
           map: map,
           id: 'measureTool'
         }, 'measureDiv');

        measure.startup();

      var measureButton = new dijit.form.ToggleButton({
         id: "measureButton",
         iconClass: "esriMeasureIcon"
       });

      dojo.connect(measureButton, "onClick", function() {
        toggleMeasureButton();
       });

      dojo.byId('divToolbar').appendChild(measureButton.domNode);
       }

      // Creates toggle for showing and hiding measurement widget
       function toggleMeasureButton() {
         if (dojo.byId('floater').style.visibility === 'hidden') {
            dijit.byId('floater').show();
           }
           else {
             dijit.byId('floater').hide();
             dijit.byId('measureButton').set('checked', false);
             var measure = dijit.byId('measureTool');
             measure.clearResult();

          if (measure.activeTool) {
            measure.setTool(measure.activeTool, false);
           }
         }
       }

      //show map on load
      dojo.addOnLoad(init);
    </script>
</head>

<body class="claro">
    <div id="header" dojotype="dijit.layout.ContentPane" region="top">
       <div data-dojo-type="dijit.form.Button" >Measurement</div>
    </div>
     </div>
    </div>
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:'false'"
    style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
          <div id="floater" class="dojoxFloatingPane dijitContentPane dojoxFloatingPaneFg" style="z-index: 50; visibility:hidden; position: absolute; top: 0px; left: 50px; width: 300px; height: 179px; opacity: 1;">
          <div id="measureDiv"></div>
        </div>
      </div>
    </div>
</body>
</html>

topic Measurement Floating Window in ArcGIS JavaScript Maps SDK Questions

Measurement Floating Window