url parameter popup, and measure widget

JohnBowdre · ‎06-11-2012

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!!

StuartFletcher1 · ‎06-11-2012

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

JohnBowdre · ‎06-12-2012

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()
});

LisCollins · ‎02-20-2015

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.]

KellyHutchins · ‎02-20-2015

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.

ChrisSergent · ‎02-20-2015

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

LisCollins · ‎02-20-2015

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.

ChrisSergent · ‎02-20-2015

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.

KellyHutchins · ‎02-20-2015

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?

LisCollins · ‎02-23-2015

@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?