Tuesday 19 February 2019

web mapping - Hiding infoWindow of ArcGIS API for JavaScript while using measure tool?


In my Javascript API Web application I'm using the infoWindow to query a parcel layer and display display information in a popup when I click the parcel. I've set this functionality to turn on and off depending on if the parcel is visible, and I control the visibility of my different layers with check boxes in a legend.


Every time the parcel layer is checked on of off it calls the clickConnect function with a value of true or false. Depending on this, click connect will call the executeIdentifyTask function, which query's the parcel layer, when clicked, and displays the info in a popup. This works great unless I try to use the esri.dijit.Measurement tool while the parcel layer is turned on. In which case i still get a pop up every time I click, which gets in the way of me measuring parcels.


Is there a way that I could turn the popup/query functionality off while I'm using the measure tool and the parcel layer is turned on? I'm a bit of a beginner at using javascript/dojo so I'm not sure how to do this. I've searched the ESRI forums for answers to this question without much success thus far.


Any help would be greatly appreciated! I hope I was clear in my explanation, if not let me know!



Javascript from my map app relevant to the question:


  var app = {};
app.map = null;

var legendLayers = [];
var clickHandler;

function init() {
//add popup
var popup = new esri.dijit.Popup({

fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
}, dojo.create("div"));
//add geometry service
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://server/rest/services/Utilities/Geometry/GeometryServer");
//initalize map
app.map = new esri.Map("map", {
basemap : "streets",
center : [-111.924531, 40.611871],
zoom : 13,
infoWindow: popup

});
//add parcel layer
var parcels = new esri.layers.ArcGISDynamicMapServiceLayer("http://server/arcgis/rest/services/Parcels_UT/MapServer", {
id : 'parcels',
visible : false
});
legendLayers.push({
layer : parcels,
title : 'Parcels'
});

//add parcel query data
var content = "Address: ${ADDR}" + "
Owner Name: ${OWNER}" + "
Parcel ID: ${APN}" + "
City: ${CITY}" + "
Acres: ${TOTAL_ACRE}" + "
County Assessor Site"
var popUpTemplate = new esri.InfoTemplate("Parcel", content);
//add paercel layer as feature layer
var featureLayer = new esri.layers.FeatureLayer("http://server/arcgis/rest/services/Parcels_UT/MapServer/0",{
mode: esri.layers.FeatureLayer.MODE_SELECTION,
outFields: ["*"],
infoTemplate:popUpTemplate
});


//create legend
dojo.connect(app.map, 'onLayersAddResult', function(results) {
var legend = new esri.dijit.Legend({
map : app.map,
layerInfos : legendLayers
}, "legendDiv");
legend.startup();
});
app.map.addLayers([parcels]);


dojo.connect(app.map, 'onLayersAddResult', function(results) {

//add legend check boxes
dojo.forEach(legendLayers, function(layer) {
var layerName = layer.title;
var checkBox = new dijit.form.CheckBox({
name : "checkBox" + layer.layer.id,
value : layer.layer.id,
checked : layer.layer.visible,
onChange : function(evt) {

var clayer = app.map.getLayer(this.value);
clayer.setVisibility(!clayer.visible);
this.checked = clayer.visible;


//toggle the feature layer with the parcel layer
if (this.value ==="parcels" && this.checked === true){
clickConnect(true);
console.log("parcels");
} else if (this.value ==="parcels"){

clickConnect(false);
console.log("noParcels");
}

}
});

//add the check box and label to the table of contnents
dojo.place(checkBox.domNode, dojo.byId("toggle"), "after");
var checkLabel = dojo.create('label', {

'for' : checkBox.name,
innerHTML : layerName
}, checkBox.domNode, "after");
dojo.place("
", checkLabel, "after");
});
});

dojo.connect(app.map, 'onLoad', function(map) {
initToolbar(app.map);
});


function executeIdentifyTask(evt) {
var query = new esri.tasks.Query();
query.geometry = pointToExtent(app.map,evt.mapPoint,10);
var deferred = featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
app.map.infoWindow.setFeatures([deferred]);
app.map.infoWindow.show(evt.mapPoint);

}


function clickConnect(connect){
if(connect){
//perform the identify task on click
clickHandler = dojo.connect(app.map, "onClick", executeIdentifyTask);
}else{
//disconnect the click handler
dojo.disconnect(clickHandler);
clickHandler = null;
}


}
}

function initToolbar(mymap) {
//define a new line symbol and point symbol to use for measure tools
var pms = new esri.symbol.PictureMarkerSymbol("images/flag.png", 24, 24);
pms.setOffset(9, 11);
var sls = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([255, 0, 0, .55]), 4);
var measurement = new esri.dijit.Measurement({
map : mymap,

lineSymbol : sls,
pointSymbol : pms
}, dojo.byId('measurementDiv'));
measurement.startup();
measurement.setTool("area", false);

}

function pointToExtent(map, point, toleranceInPixel) {
var pixelWidth = map.extent.getWidth() / map.width;

var toleraceInMapCoords = toleranceInPixel * pixelWidth;
return new esri.geometry.Extent( point.x - toleraceInMapCoords,
point.y - toleraceInMapCoords,
point.x + toleraceInMapCoords,
point.y + toleraceInMapCoords,
map.spatialReference );
}

dojo.ready(init);

Answer




I would add a listener to the show and hide events of the measurement tool:


dojo.connect(measurement, "show", function(){      
//Then disconnect your onclick event for parcels layers
});

Then just connect the event when the measure tool is hidden.


dojo.connect(measurement, "hide", function(){
//Connect your onclick event for parcels layers
});

No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...