Multiple custom logos (Legacy)

[MathewSuran]

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.

[MathewSuran]

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

[JonathanUihlein]

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?

[MathewSuran]

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.

[JonathanUihlein]

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.

[MathewSuran]

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

[JonathanUihlein]

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

[MathewSuran]

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?

[MathewSuran]

Can anyone else lend some further assistance?