nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Vind meer berichten getagd met

Accepted answers

All comments

MathewSuran

Can anyone else lend some further assistance?

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?

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

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

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

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 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

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.