topic Re: Multiple custom logos (Legacy) in ArcGIS JavaScript Maps SDK Questions

Multiple custom logos (Legacy)

MathewSuran — Tue, 13 May 2014 14:30:27 GMT

How do I set up the ability to display multiple custom logos (3 to be exact) using legacy? I currently have 1 custom logo set up no problem. Thanks in advance for the help.

Re: Multiple custom logos (Legacy)

MathewSuran — Wed, 14 May 2014 17:38:25 GMT

So no one has added more than one logo to their app?

Re: Multiple custom logos (Legacy)

JonathanUihlein — Sat, 11 Dec 2021 11:53:44 GMT

You would probably have to edit this specific CSS class in esri.css:

.map .logo-med {
    background-image: url("../images/map/logo-med.png");
    cursor: pointer;
    display: inline-block;
    height: 36px;
    vertical-align: bottom;
    width: 200px;
    z-index: 30;
}

Otherwise, you would want to use javascript to add more images to that div on initial load.

What method have you used to add a custom image so far and why can't you use the same method to add more logos?

Re: Multiple custom logos (Legacy)

MathewSuran — Sat, 11 Dec 2021 11:53:47 GMT

Thanks. I don't have the URL set up in my CSS, I have it set in HTML here:
[HTML]customlogo: {
          image: '...logo.jpg',
          link: ''
        },

<div id="logo" class="logo" style="display:none;">
          </div>
          <div style="position:absolute; width:20%; left:60px; top:30px; z-Index:999;">
            <div id="tp">
            </div>
          </div>[/HTML]

JS:

//add a custom logo to the map if provided
    if (configOptions.customlogo.image) {
        esri.show(dojo.byId('logo'));
        //if a link isn't provided don't make the logo clickable
        if (configOptions.customlogo.link) {
            var link = dojo.create('a', {
                href: configOptions.customlogo.link,
                target: '_blank'
            }, dojo.byId('logo'));

            dojo.create('img', {
                src: configOptions.customlogo.image
            }, link);
        } else {
            dojo.create('img', {
                id: 'logoImage',
                src: configOptions.customlogo.image
            }, dojo.byId('logo'));
            //set the cursor to the default instead of the pointer since the logo is not clickable
            dojo.style(dojo.byId('logo'), 'cursor', 'default');
        }
    }

CSS:

.logo{
  bottom:20px;
  cursor:pointer;
  position:absolute;
  right:10px;
  z-index:30;
  
}
.logo img{
  width: 100px; 
  border:none;

Any further suggestions would be appreciated.

Re: Multiple custom logos (Legacy)

JonathanUihlein — Wed, 14 May 2014 18:30:19 GMT

You're almost done!

That javascript snippet is exactly what you want.

It relies on the existence of:

configOptions.customlogo.image

Since that code only executes once, you'll need to do two things to make it work for multiple logos:

1) set up an array of logo urls
2) set up a length-based loop for creating the img dom nodes and populating your container div

You'll want to wrap most of that javascript code inside your loop.
Further CSS changes will probably be required.

Re: Multiple custom logos (Legacy)

MathewSuran — Wed, 14 May 2014 18:54:07 GMT

Can you give me an example of what you recommended? HTML/JS/CSS?

Re: Multiple custom logos (Legacy)

JonathanUihlein — Wed, 14 May 2014 18:59:48 GMT

I would do everything in Javascript using a forEach loop on your newly created logo array.

Check out DOJO's version because it tends to work on all older versions of IE as well.

http://dojotoolkit.org/reference-guide/1.9/dojo/_base/array.html#dojo-base-array-foreach

Re: Multiple custom logos (Legacy)

MathewSuran — Thu, 15 May 2014 12:53:05 GMT

I noticed the link you provided was for dojo v1.9 which is AMD? The entire project is in legacy and due to deadlines I can not convert it all to AMD (which I know is better). When I switch dojo to 1.7, which I was told is legacy) there is no code for the array. Am I looking at this correctly?

Re: Multiple custom logos (Legacy)

MathewSuran — Mon, 19 May 2014 14:41:18 GMT

Can anyone else lend some further assistance?