At the moment I have 3 menu items that draw a line, point or area on a map. I'm using
esri.bundle.toolbars.draw.addPoint = "Click the map at the location you want to search";
as a tooltip for drawing the point.
However for the draw area and line I want a different tooltip for each so that it reads:
"Click to start drawing a search line" for a line and "Click to start drawing a search area"; for an area.
At the moment this is the code that's used so that the line tool tip reads as area. Is there a way to distinguish between the two?
esri.bundle.toolbars.draw.addPoint = "Click the map at the location you want to search";
esri.bundle.toolbars.draw.start = "Click to start drawing a search area";
esri.bundle.toolbars.draw.resume = "Click to continue drawing your search area";
esri.bundle.toolbars.draw.finish = "Click to continue drawing or Double-click to finish";
esri.bundle.toolbars.draw.complete = "Click to continue drawing or Double-click to finish";
esri.bundle.widgets.legend.NLS_noLegend = "Legend will appear here when search results are displayed on the map.";
map = new esri.Map("map", {
logo : false
});
Any help appreciated!
Olivia,
Maybe you could create a custom window, if there is no way to do it with the native ESRI tooltips?
I have an example here:
http://jsfiddle.net/timw1984/5398h/
I know this is not an answer to your question but I hope it helps
Tim
I just thought of another way that might work.
You could change the tooltip depending on which button you press?
For example:
on(registry.byId("AreaButton"), "click", function () {
esri.bundle.toolbars.draw.start = "Click to start drawing a search area";
});
on(registry.byId("LineButton"), "click", function () {
esri.bundle.toolbars.draw.start = "Click to start drawing a search line";
});
Hi Olivia,
I was just trying to research this looks like you have following options:
To view all the customizable widget strings view any of the samples in a browser with debugging tools open and type console.dir(esri.bundle)
in the console.
Tim Witt is partly correct you can access the element and apply the tool tip.
Here is a hack that I did in the code it uses
on(document.getElementById("dijit_form_Button_2_label"), "click", function(){
esri.bundle.toolbars.draw.freehand = "Click to start drawing a search line"
});
FOR THE FULL CODE USE FOLLOWING as SAMPLE:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<!--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>Maps Toolbar</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
#header {
height: 80px;
overflow: auto;
padding: 0.5em;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map, toolbar, symbol, geomTask;
require([
"esri/map",
"esri/toolbars/draw",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry", "dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
], function(
Map, Draw, Graphic,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry, on
) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-15.469, 36.428],
zoom: 3
});
map.on("load", createToolbar);
// loop through all dijits, connect onClick event
// listeners for buttons to activate drawing tools
registry.forEach(function(d) {
// d is a reference to a dijit
// could be a layout container or a button
if ( d.declaredClass === "dijit.form.Button" ) {
d.on("click", activateTool);
}
});
on(document.getElementById("dijit_form_Button_2_label"), "click", function(){
esri.bundle.toolbars.draw.freehand = "Click to start drawing a search line"
});
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, "_");
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
function createToolbar(themap) {
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
function addToMap(evt) {
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Draw:<br /></span>
<button data-dojo-type="dijit/form/Button">Point</button>
<button data-dojo-type="dijit/form/Button">Multi Point</button>
<button data-dojo-type="dijit/form/Button">Line</button>
<button data-dojo-type="dijit/form/Button">Polyline</button>
<button data-dojo-type="dijit/form/Button">Polygon</button>
<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
<!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
<button data-dojo-type="dijit/form/Button">Arrow</button>
<button data-dojo-type="dijit/form/Button">Triangle</button>
<button data-dojo-type="dijit/form/Button">Circle</button>
<button data-dojo-type="dijit/form/Button">Ellipse</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Hope that helps
Akshay Harshe
Esri Technical Support