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

Draw toolbar tooltips

TimWitt2

Hey everybody,

I am trying to dynamically change the draw tooltips. I know if I just want to change the text one time I can access it by using

i.e.

esri.bundle.toolbars.draw.resume = "New text here";

But what If I want to change the innerHTML constantly during a mouse-move event?

Would I have to access it like this?

dojo.byId ("whatever the id of the draw tool tooltip is for resume").innerHTML = evt.x;

I am having a hard time finding the Id. Or is there a different way to do this?

Thanks!

Tim

Find more posts tagged with

Accepted answers

All comments

BenFousek

Hey Tim Witt‌. Somebody pointed out your Advanced Draw fiddle to me the other day. Nice work. Just realized it was yours. I'm updating/reworking my draw module for another project. You have a quite a bit of the same features but here's my old one hardcider/viewer/js/hardcider/draw at master · btfou/hardcider · GitHub. It just provides methods (dev must provide buttons, etc in app) but the new one will be an all encompassing templated widget.

TimWitt2

Thanks Ben, I'll check it out!

BenFousek

Tim,

Check this out hardcider/Measure.js at master · btfou/hardcider · GitHub . It's a tooltip updater method in my measure widget. Look at line 218. You need to call the toolbar's _setTooltipMessage() method every time you want the tooltip to update.

This widget relies on helper methods extending esri/map. this.map.setDrawTooltips({}) calls this method:

//set/reset draw tooltips
setDrawTooltips: function(draw) {
    draw = draw || {};
    var defaults = {
        addMultipoint: 'Click to start adding points',
        addPoint: 'Click to add a point',
        addShape: 'Click to add a shape, or press down to start and let go to finish',
        complete: 'Double-click to finish',
        finish: 'Double-click to finish',
        freehand: 'Press down to start and let go to finish',
        resume: 'Click to continue drawing',
        start: 'Click to start drawing'
    };
    lang.mixin(esriBundle.toolbars.draw, defaults, draw);
}

TimWitt2

Kelly Hutchins I assume this doesn't work because the tooltip is not created in the "mouse-move" function?

TimWitt2

Thanks for the reply Kelly,

when I try that it doesn't work. However it works when I update the innerHTML in a div that I placed into a pane.

linelenMouseEvt = map.on("mouse-move", function (evt) {  
  if (clickedPointsArr.length > 0) {  
  distParams = new DistanceParameters();  
  var mp = evt.mapPoint; 
  distParams.distanceUnit = geometryService.UNIT_FOOT;
  distParams.geometry1 = clickedPointsArr[clickedPointsArr.length - 1];  
  distParams.geometry2 = mp;  
  distParams.geodesic = true;  
  geometryService.distance(distParams, function (distance) {  
  lastdrawnsegmentlength = distance;  
  totalsegmentlength1 = previousSegmentLength;  
  totalsegmentlength = totalsegmentlength1 + lastdrawnsegmentlength;  
  totalLength = parseFloat(totalsegmentlength).toFixed(2);
  console.log(totalLength);
  dojo.byId("current").innerHTML = totalLength; // works here
  esri.bundle.toolbars.draw.resume = totalLength; // doesn't work here
  }); 
  }
  });

Once I finish my first drawing, the last number shows up in the esri.bundle.toolbars.draw.resume tooltip box, once I start drawing the second line.

Tim

khutchins

One option would be to modify the text when the mouse moves:

on(map.graphics, "mouse-move",function(){

esri.bundle.toolbars.draw.resume = "mouse moving";

});

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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