nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

url parameter popup, and measure widget

JohnBowdre

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

Encontre mais publicações marcadas com

Accepted answers

All comments

StephenPatterson1

I figured out another way around the issue. Our application calls the map hit tests and identify tasks from one function, so I set a boolean property to true while someone is using the widgets and set it back to false when finished. I check for that property now when the map click event happens, which bypasses the popups.

StephenPatterson1

I created my own Measure Widget and Annotation Widget with the version 4.5 API and am running into this same issue. Is there a new way to disable popups with 4.0+ API when adding points with the SketchViewModel or Draw tool?

I was able to disable popups for polygons and lines by using a click event and calling event.stopPropagation() while my tools are active, but it won't let me draw points or multipoints because it is a click event.

The map.setInfoWindowOnClick() function from the 3.0 API does not seem to be in the latest API.

StevenGraf1

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.

khutchins

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?

ChrisSergent

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.

LisCollins

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

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

khutchins

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

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

LisCollins

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

JohnBowdre

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

StuartFletcher1

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.