<!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>
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); }
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() });
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.]
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.
You would need a button to do this wouldn't you?
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.
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.
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?
@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?