topic Re: url parameter popup, and measure widget in ArcGIS JavaScript Maps SDK Questions

url parameter popup, and measure widget

JohnBowdre — Mon, 11 Jun 2012 19:43:54 GMT

Hello,

I am trying to disable the url parameter popup while I am using the measure widget. I am able to hide the window when I click the measure widget and when I double click to end, but DURING the measurement the url parameter popup keeps........well...........popping up. Any help would be appreciated. Here is the code below I have been working with from the Javascript sample section in resources.arcgis.com.

<!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" />
    <!--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>Parcel Locator</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      .esriScalebar {
        padding: 20px 20px;
      }
      #map {
        padding:0;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
   dojo.require("esri.dijit.Measurement");
      dojo.require("esri.dijit.Popup");

      var map;
      var parcels;

      function init() {
        //apply a selection symbol that determines the symbology for selected features 
        var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([111, 0, 255]), 2), new dojo.Color([111, 0, 255, 0.15]));

        var popup = new esri.dijit.Popup({
          fillSymbol: sfs
        }, dojo.create("div"));

        map = new esri.Map("map", {
          infoWindow: popup,
          slider: false
        });
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/AssessorsBasemap/MapServer/");
        map.addLayer(basemap);

        //apply a popup template to the parcels layer to format popup info 
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{PARCELID}",
          fieldInfos: [{
            fieldName: "SITEADDRESS",
            label: 'Address:',
            visible: true
          }, {
            fieldName: "OWNERNME1",
            label: "Owner:",
            visible: true
          }]
        });



        //add the parcels layer to the map as a feature layer in selection mode we'll use this layer to query and display the selected parcels
        parcels = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/AssessorsBasemap/MapServer/1", {
          outFields: ["*"],
          infoTemplate: popupTemplate,
          mode: esri.layers.FeatureLayer.MODE_SELECTION
        });

        parcels.setSelectionSymbol(sfs);

        //when users click on the map select the parcel using the map point and update the url parameter
        dojo.connect(map, 'onClick', function (e) {
          var query = new esri.tasks.Query();
          query.geometry = e.mapPoint;
          var deferred = parcels.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) {
            //update the url param if a parcel was located
            if (selection.length > 0) {
              var parcelid = selection[0].attributes['PARCELID'];
              //Refresh the URL with the currently selected parcel
              if (typeof history.pushState !== 'undefined') {
                window.history.pushState(null, null, "?parcelid=" + selection[0].attributes.PARCELID);
              }
            }
          });
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(e.mapPoint);

        });



        dojo.connect(map, 'onLayersAddResult', function (result) {
          // Add a link into the InfoWindow Actions panel       
          var emailLink = dojo.create("a", {
            "class": "action",
            "innerHTML": "Email Map",
            "href": "javascript:void(0);"
          }, dojo.query(".actionList", map.infoWindow.domNode)[0]);


          // Register a function to be called when the user clicks on
          // the above link
          dojo.connect(emailLink, "onclick", function (evt) {
            var feature = map.infoWindow.getSelectedFeature();
            var url = window.location;
            var emailLink = "mailto:?subject=Parcel Map of :" + feature.attributes.PARCELID + "&body=Check out this map: %0D%0A " + window.location;
            window.location.href = emailLink;
          });

          //When users navigate through the history using the browser back/forward buttons select appropriate parcel  
          //https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
          window.onpopstate = function (event) {
            var parcelid = getParcelFromUrl(document.location.href);
            if (parcelid) {
              selectParcel(parcelid);
            } else {
              parcels.clearSelection();
              map.infoWindow.hide();
            }
          };

          //if a parcelid is specified in url param select that feature 
          var parcelid = getParcelFromUrl(document.location.href);
          selectParcel(parcelid);

        });

        map.addLayers([parcels]);



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

      //extract the parcel id from the url
      function getParcelFromUrl(url) {
        var urlObject = esri.urlToObject(url);
        if (urlObject.query && urlObject.query.parcelid) {
          return urlObject.query.parcelid;
        } else {
          return null;
        }
      }

      //select parcel from the feature layer by creating a query to look for the input parcel id 
      function selectParcel(parcelid) {
        if (parcelid) {
          var query = new esri.tasks.Query();
          query.where = "PARCELID = '" + parcelid + "'";
          var deferred = parcels.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) {
            var center = esri.graphicsExtent(selection).getCenter();
            var extHandler = dojo.connect(map, 'onExtentChange', function () {
              dojo.disconnect(extHandler);
              //zoom to the center then display the popup 
              map.infoWindow.setFeatures(selection);
              map.infoWindow.show(center);
            });
            map.centerAt(center);
          });

        }
function disablepopup() {
   map.infoWindow.hide();
   }
  
  <!--MEASUREMENT TOOLS-->
  var measurement = new esri.dijit.Measurement({
            map: map, onClick: disablepopup 
          },dojo.byId('measurementDiv'));
    measurement.startup()
  
  
  <!--DEACTIVATES MEASUREMENT TOOLS AFTER MEASUREMENT-->  
  dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
  this.setTool(activeTool, false), map.infoWindow.hide()
  });
      }
      dojo.addOnLoad(init);
    </script>  
  </head>  
  <body class="claro">  
  <!--CENTER and RIGHT CONTAINER-->  
  <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
   </div>
      
   <div id="bottomPane" dojotype="dijit.layout.ContentPane" region="bottom"> 
   
  <!--MEASUREMENT TOOLS-->
  <div id="bottomPane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement Tools', closable:'false', open:'false'">
            <div id="measurementDiv"></div>
            <center><button dojoType="dijit.form.Button"  iconClass="eraserIcon" onclick="map.graphics.clear();">Clear Measurement</button></center>   
          </div>      
  </body> 
 
</html>

Thanks!!

Re: url parameter popup, and measure widget

StuartFletcher1 — Sat, 11 Dec 2021 21:20:05 GMT

Try something like the example below where the measure tool deactivates and activates the identify onclick functionality. Make sure you call activateIdentify() in the init() function.

var identifyListener;
      
function activateIdentify() {
          identifyListener = dojo.connect(map,"onClick",executeIdentifyTask);
}
      
function deactivateIdentify() {
          dojo.disconnect(identifyListener);
}

measure() {
              deactivateIdentify();
              map.graphics.clear();
              var tb = new esri.toolbars.Draw(map);
              dojo.connect(tb, "onDrawEnd", function(geometry) {
               tb.deactivate();
               //var points = geometry.paths[0];
               var lastPoint = geometry.getPoint(0,0);
               var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  new dojo.Color([255,0,0]), 3);
               map.infoWindow.setTitle("Measurement");
               measureDistanceHandle = dojo.connect(map.infoWindow, "onHide", function(){
                  map.graphics.clear();
                  dojo.disconnect(measureDistanceHandle);
                });
                //dojo.disconnect(handle);
                map.graphics.add(new esri.Graphic(geometry, symbol));
               var lengthParams = new esri.tasks.LengthsParameters();
                lengthParams.polylines = [geometry];
                lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                lengthParams.geodesic = true;
               geomService.lengths(lengthParams, function(result) {
                map.infoWindow.setContent("Length: "+ Math.round(result.lengths[0]*10)/10 + " Metres");
                map.infoWindow.show(lastPoint,map.getInfoWindowAnchor(lastPoint));
                });
                activateIdentify();
              });
              tb.activate(esri.toolbars.Draw.POLYLINE);
}

Regards,

Stuart

Re: url parameter popup, and measure widget

JohnBowdre — Sat, 11 Dec 2021 21:20:08 GMT

Thanks for the info Stuart, but it seems like there has got to be an easier way. Just a line or two of code I am mising. Surely there is a way to hide the info window popup during measurement using "onMeasure". The second group of code I have below does not work, but I am playing around with it.

function disablepopup() {
map.infoWindow.hide();
}

<!--ADDING MEASUREMENT TOOLS AND HIDES POPUP ONCLICK-->
var measurement = new esri.dijit.Measurement({
map: map, onClick: disablepopup 
},dojo.byId('measurementDiv'));
measurement.startup()

<!--HIDES POPUP DURING MEASUREMENT-->
dojo.connect(measurement, "onMeasure", map.infoWindow.hide()
);
  
<!--DEACTIVATES TOOL AND HIDES POPUP AFTER MEASUREMENT-->
dojo.connect(measurement, "onMeasureEnd", function(activeTool,geometry){
this.setTool(activeTool, false), map.infoWindow.hide()
});

Re: url parameter popup, and measure widget

LisCollins — Fri, 20 Feb 2015 19:31:30 GMT

Any recent suggestions for the AMD Module?

Popups configured in my AGOL based JavaScript web map keep popping up when ESRI's measure widget is used.

[My popups are configured in AGOL; not created manually in my code with infowindow.]

Re: url parameter popup, and measure widget

ChrisSergent — Fri, 20 Feb 2015 19:44:23 GMT

I had an application where the infoWindow and the editor widget conflicted. It's appears to be similar to your issue. Check out my post on how I resolved the conflict. You may need to destroy your measurement tool and bring it back and possibly create button to start identifying features:

Adding an Editor to the Template

Re: url parameter popup, and measure widget

KellyHutchins — Fri, 20 Feb 2015 21:07:54 GMT

Lis Collins‌ You can disable/enable map popups using map.setInfoWindowOnClick. False will disable popups and true enables.

map.setInfoWindowOnClick(false);

In order to have this functionality available in your web map based app you'll need to set the createMap constructor option usePopupManager to true.

Re: url parameter popup, and measure widget

ChrisSergent — Fri, 20 Feb 2015 21:11:44 GMT

You would need a button to do this wouldn't you?

Re: url parameter popup, and measure widget

LisCollins — Fri, 20 Feb 2015 21:22:58 GMT

Will this turn off my pop ups completely? (beginner coder here lol)

I still want my pop ups to show up, just not when I'm using the measure tool.

I'm also using esri's JavaScript public information web map template with my data stored on AGOL if that matters. My map also has other widgets like draw, geocoder, adding text, and printing that I don't want to mess up as well.

Re: url parameter popup, and measure widget

ChrisSergent — Sat, 11 Dec 2021 21:20:11 GMT

You could create two buttons, possibly make the measurement tool inactive when the popup is active to remove conflict.

Create two buttons with text of your choice with the following names:

Button 1: enablePopup

Button 2: disablePopup

In your JavaScript, add the following:

on(dom.byId("enablePopup"), "click", function () {
                document.getElementById("enablePopup").style.visibility = 'hidden';
                document.getElementById("disablePopup").style.visibility = 'visible';
                document.getElementById("measurementDiv").style.visibility = 'hidden';
                map.setWindowOnClick(true);
            });


on(dom.byId("disablePopup"), "click", function () {
                document.getElementById("enablePopup").style.visibility = 'visible';
                document.getElementById("disablePopup").style.visibility = 'hidden';
                document.getElementById("measurementDiv").style.visibility = 'show';
                map.setWindowOnClick(true);
            });

The enable popup button hides the measurement tool and allows you to use the infoWindow.

The disable popup button shows the measurement tool and disables the popup

I still would like it confirmed from Kelly Hutchins‌ to make sure this is right, but it seems logical.

Re: url parameter popup, and measure widget

KellyHutchins — Sat, 21 Feb 2015 00:09:20 GMT

Chris Sergent‌ is on the right track. You'll want to disable popups when the measure tool is active then enable when its not. You mentioned that you are using the Public Information Template - did you add the measure widget to that template because I don't see it there by default? If you added it how to users interact with it. Is there a button to enable it or is it immediately visible allowing them to click on the various tools?

Re: url parameter popup, and measure widget

LisCollins — Mon, 23 Feb 2015 15:48:26 GMT

@Kelly Hutchins, yes, I had to add the measure widget to myself. I literally just copied the code from ESRI's sample page to main.js and it worked.

	var measurement = new Measurement({
	map: this.map
	}, dom.byId("measureButton"));
	measurement.hideTool("location");
	measurement.startup();

The widget shows the area and distance buttons, Measurement Result text, and area that shows the number results.

So they have to press the area or distance button to turn it on and off.

Is it possible to do this without creating buttons to turn on and off popups?

Re: url parameter popup, and measure widget

ChrisSergent — Mon, 23 Feb 2015 18:10:33 GMT

There are three buttons already in the widget. The first one has the following ID: widgetid="dijit_form_ToggleButton_0 You could disable the identify based on the click event of each of these buttons, the first of the three being - dijit_form_ToggleButton_0. If the esriButtonChecked class exists, disable identify, otherwise enable identify.

Here is an example on how to evaluate class name: HTML DOM className Property

The reason I said to evaluate class of esriButtonChecked is that, that class appeared when I clicked on dijit_form_ToggleButton_0 and then disappeared when I deselected it. This method would allow you to avoid adding buttons.

Re: url parameter popup, and measure widget

KellyHutchins — Sat, 11 Dec 2021 21:20:13 GMT

Lis,

Something like this should work where you deactivate the popups every time someone activates a tool on the measure widget. In order for the code below to work you'll need to load the dojo/on and dojo/query modules.

        query(".esriMeasurementButtonPane .esriButton").on("click", function(c){
          var tool = measurement.getTool();
          if(tool){
            //deactivate the popup window
            map.setInfoWindowOnClick(false);
          }else{
            //activate the popup window
            map.setInfoWindowOnClick(true);
          }
        });

Here's a jsbin showing this in action:

Measure Tool

Re: url parameter popup, and measure widget

ChrisSergent — Mon, 23 Feb 2015 20:21:49 GMT

Kelly,

Just wanted to make sure I understand this. I have a project that I will need to add this functionality into later.

In this line; query(".esriMeasurementButtonPane .esriButton").on("click", function(c){

Is it correct to say that you are querying the classes of .esriMeasurementButtonPane .esriButton as a listener for a click event after which you evaluate the tool which if it has that method, could be any tool? If it were a different tool, how do I know which classes I want to query? Is it always the pane and the button?

Last, what purpose does the c have in the function; it's an argument, but it does not appear to be used. Is it needed?

Re: url parameter popup, and measure widget

StevenGraf1 — Sat, 11 Dec 2021 21:20:16 GMT

Here's how I am disabling Identify while measuring.

on(measurement, "tool-change", function(){
          map.setInfoWindowOnClick(false);
        })

  on(measurement, "measure-start", function(){
          map.setInfoWindowOnClick(false);
        })

  on(measurement, "unit-change", function(){
          map.setInfoWindowOnClick(false);
        })
        
        on(measurement, "measure-end", function(evt){ 
          //measurement.setTool("location", false); 
          map.setInfoWindowOnClick(true);
        })

The "unit-change" doesn't seem to work when the

showAdvancedUnits: true

constructor detail is on in ArcServer 10.3 though.

Hope this helps.

Re: url parameter popup, and measure widget

KellyHutchins — Mon, 23 Feb 2015 21:25:13 GMT

Chris Sergent‌

In the code snippet above I use dojo/query to find the measurement widget buttons based on the esri classes. If I inspect the Measure tools with the Chrome Dev Tools I can see that they have an esriButton class applied so I query for any buttons on the measurement widget and associate a click event handler with them. That way anytime someone clicks on one of the buttons I can check and see if there is an active tool. I do this using measurement.getTool. If no tool is selected then measurement.getTool returns undefined. If there is an active tool then I disable the popup.

c is just the name I gave to the event arg - we don't need them for this logic so you could leave that out.

Re: url parameter popup, and measure widget

ChrisSergent — Mon, 23 Feb 2015 22:48:55 GMT

Kelly Hutchins‌

Okay, so the final item; would the .esriMeasurementPane be included in the query to ensure that the .esriButton(s) are within that class, so other buttons in other controls are not affected?

Re: url parameter popup, and measure widget

KellyHutchins — Mon, 23 Feb 2015 22:51:37 GMT

Correct.

Re: url parameter popup, and measure widget

ChrisSergent — Mon, 23 Feb 2015 22:55:33 GMT

Thanks. I added the information to my notes for future reference. I've been reading the API Reference along with the examples lately or posters questions. It's helped out a lot. It makes a difference when I am trying to figure what functionality different items have.

Re: url parameter popup, and measure widget

LisCollins — Tue, 24 Feb 2015 17:46:11 GMT

@khutchins-esristaff

I get this error when I press one of my measurement buttons:

Uncaught TypeError: Cannot read property 'setInfoWindowOnClick' of undefinedmain.js:442 (anonymous function)init.js:1492 n.__onClickinit.js:177 (anonymous function)

I already added the query and on modules too.

This is what I have after measurement startup in my public information template main.js page:

query(".esriMeasurementButtonPane .esriButton").on("click", function(c){

var tool = measurement.getTool();

var map = this.map;

if(tool){

//deactivate the popup window

map.setInfoWindowOnClick(false);

}else{

//activate the popup window

map.setInfoWindowOnClick(true);

}

});