Latest Contributions by RobertKirkwood

Robert, You'll want to replace your existing code that creates the home and locate button with the code I provided. Kelly, Thank you so much for your help. That worked out perfectly! ... View more

It looks like the issue is that the title attribute isn't getting removed from the locate button - perhaps due to a timing issue. It seems to work if I wait and remove the text after the locate button has loaded. Here's some sample code that shows this:       var homeText =  esriBundle.widgets.homeButton.home.title;          var locateText =  esriBundle.widgets.locateButton.locate.title;       geoLocate.on("load", function(){         query('div[title ="' +  locateText + '"]').forEach(function(node){             domAttr.remove(node, "title");             domAttr.set(node, "data-title", locateText);         });       });       home.on("load", function(){         //Remove default tooltip for home button         query('div[title ="' +  homeText + '"]').forEach(function(node){             domAttr.remove(node, "title");             domAttr.set(node, "data-title", homeText);         });       }); Thanks. How do i use this code then? Here is my full java script: var map; var bMap = "topo"; function changeBasemap(bm) {         bMap=bm;               map.setBasemap(bMap);          } require(["esri/map", "esri/toolbars/navigation", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "esri/dijit/OverviewMap", "esri/dijit/Scalebar", "esri/dijit/LocateButton", "esri/dijit/HomeButton", "dojo/i18n!esri/nls/jsapi", "dojo/query", "dojo/dom-attr", "dojo/domReady!"], function(Map, Navigation, on, parser, registry, Toolbar, Button, OverviewMap, Scalebar, LocateButton, HomeButton, esriBundle,  query, domAttr ){       esriBundle.widgets.homeButton.home.title = "HOME"    esriBundle.widgets.locateButton.locate.title = "FIND MY LOCATION"           parser.parse();         var navToolbar;         map = new Map("map", {         basemap: "topo",         center: [-107.646372, 43.433484],         zoom: 7,         slider: "small"     });         on(map, "load", addDataLayersInit);     on(map, "layers-add-result", initTOC);     //on(map, "layers-add-result", initTOC_Obs);         var scalebar = new Scalebar({         map: map,         // "dual" displays both miles and kilmometers         // "english" is the default, which displays miles         // use "metric" for kilometers         scalebarUnit: "dual",             attachTo:"bottom-right"                 });         geoLocate = new LocateButton({         map: map,       }, "LocateButton");     geoLocate.startup();             query(".zoomLocateButton").forEach(function(node){         //remove the title attribute         //Get the title attribute         if(domAttr.get(node, "title") === esriBundle.widgets.locateButton.locate.title){           //replace the title attribute with data-title           domAttr.remove(node, "title");           domAttr.set(node, "title", esriBundle.widgets.locateButton.locate.title )         }     });                   var home = new HomeButton({         map: map       }, "HomeButton");       home.startup();                 query(".home").forEach(function(node){         //remove the title attribute         //Get the title attribute         if(domAttr.get(node, "title") === esriBundle.widgets.homeButton.home.title){           //replace the title attribute with data-title           domAttr.remove(node, "title");           domAttr.set(node, "data-title", esriBundle.widgets.homeButton.home.title )         }     });             navToolbar = new Navigation(map);     on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);                registry.byId("zoomprev").on("click", function(){         navToolbar.zoomToPrevExtent();     });         registry.byId("zoomnext").on("click", function(){         navToolbar.zoomToNextExtent();     });           function extentHistoryChangeHandler(){         registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();         registry.byId("zoomnext").disabled = navToolbar.isLastExtent();             }         var overviewMapDijit = new OverviewMap({         map: map,         visible: false,             attachTo: "bottom-right",             width: 200,             height: 200                       });     overviewMapDijit.startup();     }); ... View more

the Locatebutton is a bit different from the HomeButton. here is the code that worked: geoLocate = new LocateButton({         map: map,       }, "LocateButton");     geoLocate.startup(); query(".zoomLocateButton").forEach(function(node){         //remove the title attribute         //Get the title attribute         if(domAttr.get(node, "title") === esriBundle.widgets.locateButton.locate.title){           //replace the title attribute with data-title           domAttr.remove(node, "title");           domAttr.set(node, "title", esriBundle.widgets.locateButton.locate.title )         }     }); and the css: [title]:hover:after {     content: attr(title);     text-align: center;     font-family: Arial;     font-size: 12px;     font-weight: bold;     background-color: white;     border: 1px solid #000000;     border-radius: 1px;     padding: 4px 8px;     left: 40px;     width: 125px;     z-index: 20px;     position: absolute; } However, the regular tooltip shows up as well... [ATTACH=CONFIG]32755[/ATTACH] ... View more

If you're using an IDE that has debugging, you can pause it and examine esriBundle. That's how I was able to find the right property in this thread. I found it for the locateButton: esriBundle.widgets.locateButton.locate.title Thanks again for you help! ... View more

If you're using an IDE that has debugging, you can pause it and examine esriBundle. That's how I was able to find the right property in this thread. Thanks for the information. I cant seem to get the right syntax for it... I tried esriBundle.widgets.locateButton.title = "New" as a test. when I  run the require(["dojo/i18n!esri/nls/jsapi"], function(b) { console.log(b); }); in the console i see the title new, but the button still has Find my location as the tooltip... when i copy out the html from the source it looks like this: <div class="LocateButton" role="presentation" id="LocateButton" widgetid="LocateButton" style="display: block;">     <div class="locateContainer">             <div data-dojo-attach-point="_locateNode" role="button" class="zoomLocateButton" title="Find my location"><span>My Location</span></div>     </div> </div> here is a screenshot: [ATTACH=CONFIG]32751[/ATTACH] any suggestions? thanks again! ... View more

Ok so the current tooltip for the Home Button is generated using the HTML title attribute Basically when you add the title attribute to an HTML tag the browser will display a tooltip. The style is browser dependent and I don't know of a way to modify the style. One approach might be to remove the title attribute then add a new one - maybe data-title and then use the mechanism you are using to generate the other tooltips to generate that one.  Here's a sample that show hiding the existing tooltip and creating a new one using css. one more question: what is the format for the Locate button widget? i.e. for the Homebutton its  "esriBundle.widgets.homeButton.home.title" Thanks again! ... View more

Excellent! Wow, nice work and thanks so much! [ATTACH=CONFIG]32747[/ATTACH] So, now i can do the same thing for the Locate button? I will test that out and see if it works for that too... ... View more

I would also like to change the position of the tooltip... ... View more

The link I posted shows how to change the default text for the tooltip. Are you trying to change the text or do you want to modify the appearance of the tooltip? I am trying to change the default style. I have a white box with a border around the rest of the tooltips in the map. here are the examples: [ATTACH=CONFIG]32743[/ATTACH] [ATTACH=CONFIG]32744[/ATTACH] ... View more

Hi Robert, Here's a link to a help topic that explains how to override the default strings in the JSAPI. https://developers.arcgis.com/javascript/jshelp/inside_bundle.html Thanks. I have looked and can't seem to find anything that talks about the default tootip being overwritten specifically. I have tried the code below for the Homebutton and the Locate button, but it doesn't seem to work. I have even put in the variable map. require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){ new Tooltip({         connectId: ["HomeButton"],         label: "Home",   orient: ['before'],     }); I have also tried this in my .css file: .HomeButton .tooltip {     font-family: Arial !important;     font-size: 11px !important;     font-weight: bold !important;         background-color: white !important;     } I am not sure what i am missing here? Thanks for the help! ... View more

Is there anyway to do this for the Home, Zoom in, Zoom Out, and Locate buttons? ... View more

You can take a look at the code for zoomToFullExtent by typing this in firebug or chrome dev tools console: navToolbar.zoomToFullExtent.toString() That will print: "function () {   var map = this.map;   map.setExtent(map.getLayer(map.layerIds[0]).initialExtent); }" The easiest way to change this is to re-define zoomToFullExtent for your toolbar. After you create your toolbar, do something like this: navToolar.zoomToFullExtent = function() {   var map = this.map;   map.setExtent(appFullExtent); } Where appFullExtent is a global that represents your app's full extent. where do i modify the code with the above edit? here is what i have: navToolbar = new Navigation(map);     on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);         registry.byId("zoomin").on("click", function(){         navToolbar.activate(Navigation.ZOOM_IN);     });         registry.byId("zoomout").on("click", function(){         navToolbar.activate(Navigation.ZOOM_OUT);     });         registry.byId("zoomfullext").on("click", function(){         navToolbar.zoomToFullExtent();     });         registry.byId("zoomprev").on("click", function(){         navToolbar.zoomToPrevExtent();     });         registry.byId("zoomnext").on("click", function(){         navToolbar.zoomToNextExtent();     });         registry.byId("pan").on("click", function(){         navToolbar.activate(Navigation.PAN);     });         registry.byId("deactivate").on("click", function(){         navToolbar.deactivate();     });         function extentHistoryChangeHandler(){         registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();         registry.byId("zoomnext").disabled = navToolbar.isLastExtent();     } }); Thanks in advance! ... View more

what is your projection you are using? This might be why they do not align... ... View more