Accessing Attribution

2806
12
Jump to solution
01-05-2016 06:07 AM
TimWitt2
MVP Alum

Good morning everybody,

I am trying to add some text to the ESRI attribution in the bottom right (see attachment).

attribution.png

How would I access this element? When I inspect it, it doesn't have an id, it only has a class.

Thanks!

Tim

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Tim,

  Sure this is pretty straight forward:

Require: 'dojo/dom-construct'

var myDiv = domConstruct.toDom("<div style='right:5px;bottom:22px;position:absolute;text-align:right;z-index: 9;'>hello world</div>");
domConstruct.place(myDiv, "map");

View solution in original post

12 Replies
RobertScheitlin__GISP
MVP Emeritus

Tim,

   The map has a attribution property that returns the Attribution dijit

TimWitt2
MVP Alum

Thanks Robert I didn't even think about that.

How would I add some custom text above "Earthstar Geographics"?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

The Attribution dijit is designed to display the attribution text in a single line and truncate it at a certain string limit until the user clicks the dijit, for it show more text. You would have to do css manipulation to attempt to override the single line nature of the dijit. You would probably be better off adding your own dom element above it.

TimWitt2
MVP Alum

Do you have an example on how to add a dom element above it? I really like this idea.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Tim,

  Sure this is pretty straight forward:

Require: 'dojo/dom-construct'

var myDiv = domConstruct.toDom("<div style='right:5px;bottom:22px;position:absolute;text-align:right;z-index: 9;'>hello world</div>");
domConstruct.place(myDiv, "map");
TimWitt2
MVP Alum

Thanks Robert!

0 Kudos
KierenTinning2
New Contributor III

Robert, for a Web AppBuilder Developer Edition app, which file would we need to modify to add our own custom attribution logo?

I can over-ride the Powered By Esri with this code in index.html

#map .logo-med {
background-image: url('images/XYZ.png');
height: 40px;
width: 180px;
}

But what I'd really like to do is add our own image along side of it.  I like the idea of inserting the DOM element, but would you have advice on which page this would need to be inserted on?

Thanks,

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Kieren,

   You can add it to the MapManager.js in the _show2DWebMap funtion at the end of the 

mapDeferred.then(lang.hitch(this, function(response) {

function

...
          setTimeout(lang.hitch(this, this._checkAppState), 500);
          this._addDataLoadingOnMapUpdate(map);
          var myDiv = domConstruct.toDom("<div style='right:5px;bottom:22px;position:absolute;text-align:right;z-index: 9;'>hello world</div>");
          domConstruct.place(myDiv, "map");
        }), lang.hitch(this, function(error) {‍‍‍‍‍
...

You will have to add

'dojo/dom-construct'

 to the define array.

0 Kudos
KierenTinning2
New Contributor III

Robert,

Thank you for the pointer, it unfortunately doesn't seem to work.

Adding

'dojo/dom-construct'

to the Define array just stops loading the entire page, but of course if I don't add it then the text never gets added.

I found though if in Chrome, I added the value

hello world





to the

(at the end)

The it places the text exactly where needed. Now, the key is to figure out which file in the software is generating that HTML.

Have you seen the map simply stop loading when adding the dojo value?

Thanks,

Kieren

Terraflow Geomatics Inc

ktinning@terraflow.ca

416-689-8197

0 Kudos