tool tip on measurement tool

3665
8
01-14-2016 07:57 AM
AdrianMarsden
Occasional Contributor III

I've had a few users who don't realize that it is a double click to close the measurement tool, and complain they have to restart everything.  Is there a way in the CSS to define a tooltip, in the same way as the draw tools?

Cheers


ACM

8 Replies
SteveCole
Frequent Contributor

You could try this:

var measurement = new Measurement({
          map: map
}, dom.byId("measurementDiv"));
measurement.startup();

measurement.distance.titleNode.title = "New Text";
measurement.area.titleNode.title = "New Text";
measurement.location.titleNode.title = "New Text";

I was just poking around, looking at the object so this isn't a "supported property." Use at your own risk.

AdrianMarsden
Occasional Contributor III

Alas, those unsupported properties seem to have been removed sometime between 3.11 (doesn't actually work, but I can see the properties in a debug window, so I'm sure it would with some tweaking) and 3.15 - non of the properties Area,  Distance or location exist - or if they do they are further down the "tree" of properties _ i'll try to dig further

Thanks anyway!


ACM

0 Kudos
SteveCole
Frequent Contributor

Bummer. Now that I look a little closer at my app, it is using v3.10 of the API. It was the only one of my apps I could think off that was currently using the measurement widget.

0 Kudos
TyroneBiggums
Occasional Contributor III

You could create one with javascript (or jQuery to make it a little easier on you). Create a div element, append it to a container you'd like it to appear in, set the css position to fixed, give it some html (which should be just text to display in between the div tags when rendering), give it a really high z-index, apply css to make it look like a tooltip (in terms of size, border, color, etc.) and finally, onclick set the top and left to the mouse position.

AdrianMarsden
Occasional Contributor III

Maybe, but for the few people who need "educating" I think I'll pass.  Many thanks anyway.

KellyHutchins
Esri Frequent Contributor

If you want to modify the existing tooltips for the measurement buttons you can do so by modifying the strings that come with the API. For details take a look at the Default API Strings help topic.

And here's a code example showing how to modify the measurement widget strings:

<!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.15/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
      html,body, #map{
        height:100%;
        width:100%;
        margin:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #measurementDiv{
        position: absolute;
        z-index: 1;
        top:20px;
        right:20px;
        background-color: #fff;
        width:200px;
        height:200px;
      }
      </style>
      <script src="https://js.arcgis.com/3.15/"></script>
    <script>
    var map;
    require([
        "dojo/dom",
        "esri/Color",
        "dojo/keys",
        "dojo/parser",


        "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",
        "dojo/i18n!esri/nls/jsapi",
        "dojo/domReady!"
      ], function(
        dom, Color, keys, parser,
        esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol, esriBundle
      ) {
        parser.parse();
        map = new Map("map", {
          basemap: "satellite",
          center: [-85.743, 38.256],
          zoom: 17
        });


        // modify measurement widget tooltips
        console.log(esriBundle);
        esriBundle.widgets.measurement.NLS_area = "Measure Area - double click to finish";
        esriBundle.widgets.measurement.NLS_distance = "Measure Distance - double click to finish";




        var sfs = new SimpleFillSymbol(
          "solid",
          new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
          null
        );


        var parcelsLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/M...", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        parcelsLayer.setRenderer(new SimpleRenderer(sfs));
        map.addLayers([parcelsLayer]);




        var layerInfos = [{
          layer: parcelsLayer
        }];


        var measurement = new Measurement({
          map: map
        }, dom.byId("measurementDiv"));


        measurement.startup();
      });
    </script>
  </head>


  <body>
    <div id="map"></div>
    <div id="measurementDiv"></div>
  </body>
</html>
AdrianMarsden
Occasional Contributor III

Cheers - that gets a tool tip over the actual tool buttons - I was after a floating tool tip over the actual line/polygon the users are creating.

0 Kudos
JordanBaumgardner
Occasional Contributor III

We handle this by changing the text over the cursor.

esri.bundle.toolbars.draw.addPoint = "Click to add Point";

Not sure what the exact item is for the measure tools.

0 Kudos