hide measurement widget and show on radio button check

Question

i wanted to hide measurement widget . and wanted to display when radio button checked. but when i hide it, it becomes like this and does not show on radio button click

here is my code

var measurement = new esri.dijit.Measurement({
      map: map,
      //measurement.hideTool("location")
     // measurement.hideTool("distance")

    }, dojo.byId('measurementDiv'));

    measurement.startup();
    measurement.hide();
    measurement.hideTool("location");
    measurement.hideTool("distance");
    //measurement.hideTool("measurement Result");


<div class="roundedCorners" id="measureWindow" >
    <div class="innerDiv roundedCorners">
      <div id="measurementDiv"></div>
    </div>
  </div>

Vikash Pandey · Accepted Answer · 2017-05-10T14:13:20.417

Well, As i understood you want to show/hide the esri measurement tool based on a radio button click.

Below is the working code for it-

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Measure Tool</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/esri/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:280px;
      }
      </style>
  </head>

  <body class="calcite">
    <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'">
        <!-- Radio Button container with CSS styles and positioning -->
      <div style="position:absolute; right:20px; top:10px; z-Index:1000; color: white; margin-right: 20px; background: gray;">
         <input type="radio" data-dojo-type="dijit/form/RadioButton" checked='checked' name="measure" id="Show" value="Show"/> <label for="Show">Show</label> 
         <input type="radio" data-dojo-type="dijit/form/RadioButton" name="measure" id="Hide" value="Hide" /> <label for="Hide">Hide</label> 
      </div> 
      
      <!-- Measurement tool container with CSS styles and positioning -->
        <div style="position:absolute; right:20px; top:40px; z-Index:999;">
          <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false, open:false">
            <div id="measurementDiv"></div>
            
          </div>
        </div>
      </div>
    </div>
          <script src="https://js.arcgis.com/3.20/"></script>
    <script>
    var map;
    require([
        "dojo/dom",
        "esri/Color",
        "dojo/keys",
        "dojo/parser",
        "esri/domUtils",
        "esri/config",
        "esri/sniff",
        "dijit/registry",
        "esri/map",
        "esri/SnappingManager",
        "esri/dijit/Measurement",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/tasks/GeometryService",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "dijit/form/RadioButton",
        "esri/dijit/Scalebar",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/TitlePane",
        "dijit/form/CheckBox",
        "dojo/domReady!"
      ], function(
        dom, Color, keys, parser, domUtils,
        esriConfig, has, registry, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol
      ) {
        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("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        map = new Map("map", {
          basemap: "satellite",
          center: [-85.743, 38.256],
          zoom: 15
        });

        var measurement = new Measurement({
          map: map
        }, dom.byId("measurementDiv"));
        measurement.startup();
        
        // code to hide measure tool
      registry.byId("Hide").on("click", function(){
        domUtils.hide( registry.byId("titlePane"));
      });
      
      // code to show measure tool
      registry.byId("Show").on("click", function(){
        domUtils.show( registry.byId("titlePane"));
      });
        
      }); //  domUtils.show(widget);
     
  
    </script>
  </body>
</html>

Hoping this will help you :)

score 0 · Answer 2 · answered May 09 '17 at 04:45

0

You may have already done this but i would start with removing measurement.hidetool ("location") and running it again. If that doesnt do anything try the same for distance. does the .hide need to be there? could that possibly be hideing the whole thing?

answered May 09 '17 at 04:45

alexff7fan

1
1

want to hide the whole widget then wanted to display on when radio button check – Sarah Salar May 09 '17 at 04:47
ooooh ok. that makes more sense. i apologize. i think you would need a while statement indicating that button remains hidden until mouse enters button area. There is a jquery function called .mouseenter () that would probably be helpful. Is that helpful? i should be able to help a little later too if you still dont have an answer! – alexff7fan May 09 '17 at 15:21
is there any solution with javascript? i want widget remains hidden until radio button is checked. – Sarah Salar May 10 '17 at 03:41
I would try developers code posted above. Worked for me. – alexff7fan May 10 '17 at 23:28

hide measurement widget and show on radio button check

2 Answers2