Measurement Widget: disable tooltips & units

Question

Is it possible to disable the icons tooltips in the Measurement Widget sandbox ?

And also disable certain units of measurement that are not necessary for a user?

Thank you,

Andrei

rscheitlin · Accepted Answer

Andrei, Sure here is a sample for both of those: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Measure Tool</title> <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/themes/calcite/esri/esri.css"> <style> html,body { height:100%; width:100%; margin:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } #map { border:solid 2px #808775; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; margin:5px; padding:0px; } #titlePane{ width:280px; } </style> <script src="https://js.arcgis.com/3.21/"></script> <script> var map; require([ "dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "dojo/query", "esri/config", "esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/dijit/Scalebar", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/CheckBox", "dojo/domReady!" ], function( dom, Color, keys, parser, query, esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol ) { parser.parse(); //This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic //for details on setting up a proxy page. esriConfig.defaults.io.proxyUrl = "/proxy/"; esriConfig.defaults.io.alwaysUseProxy = false; //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); map = new Map("map", { basemap: "satellite", center: [-85.743, 38.256], zoom: 17 }); var sfs = new SimpleFillSymbol( "solid", new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2), null ); var parcelsLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); parcelsLayer.setRenderer(new SimpleRenderer(sfs)); map.addLayers([parcelsLayer]); //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac var snapManager = map.enableSnapping({ snapKey: has("mac") ? keys.META : keys.CTRL }); var layerInfos = [{ layer: parcelsLayer }]; snapManager.setLayerInfos(layerInfos); var measurement = new Measurement({ map: map }, dom.byId("measurementDiv")); measurement.startup(); //remove tooltips query(".esriMeasurement .dijitButtonContents").forEach(function(node){ node.title = ""; }); //adjust distince units drop down list measurement._distanceUnitStrings = ["Miles", "Kilometers", "Meters"]; measurement._distanceUnitStringsLong = ["esriMiles", "esriKilometers", "esriMeters"]; }); </script> </head> <body class="calcite"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div style="position:absolute; right:20px; top:10px; z-Index:999;"> <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false"> <div id="measurementDiv"></div> <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span> </div> </div> </div> </div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍