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

Replace ESRI logo with custom logo?

BarryGuidry

I've found how to insert a custom logo into the header of a web application, but how can one replace the "Powered by ESRI" logo?

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

MikeBijou1

I've wandered upon this thread in search of a solution. We've confirmed with our Esri reps that our enterprise license agreements permits us to change the "Powered by Esri" in our webmaps as needed. But the added complexity in this case is that we need to be able to choose from multiple logos based on different situations. I was able to achieve something similar previously by adding a new parameter to a template's appConfig to change the logo in a template's header, but I have not been able to successfully change the logo in the attribution control.

Is there a way to build something that will allow users to select from multiple logo options to replace the "Powered by Esri" logo?

RobertWinterbottom

If you are going to use css to hide this logo, keep in mind the class name can change from .logo-med to .logo-sm on smaller screen sizes so you may want to include .logo-sm in your css. In my personal opinion, I think the easiest and best way to do this is hide the logo in the map constructor using logo:false and adding some html inside your map div (by map div I mean the div you are mounting your map into), this way you can absolutely position the new logo and give it a z-index to sit over the map.

BrianO_keefe

Also my co-worker came back from the UC and said they explained how to change out the logo in one of the seminars.

MathewSuran

Any way to remove the clickable feature of the logo using the above css example? Or change the url location?

JonathanUihlein

I think this thread should have died right here. Instead, you folks keep discussing how to violate license terms. SMH.

4.2 (h) seems to be the appropriate section in the linked version of the agreement. Must have been updated since Erwin posted.

Right, but you must have missed this point:

4.1c: Licensee may customize Software using any (i) macro or scripting language, (ii) published application programming interface (API), or (iii) source or object code libraries, but only to the extent that such customization is described in Documentation.

The ability to hide the logo is well described in our documentation.

There are certain use-cases that require hiding the map-based ESRI logo when screen-space is an issue. They hide the map logo while showing the ESRI logo elsewhere in their application.

Another use case is replacing the default ESRI logo with a smaller ESRI logo.

Remember, we are developers, not lawyers.

Mike, I do appreciate your input.

LisCollins

I think this thread should have died right here. Instead, you folks keep discussing how to violate license terms. SMH.

4.2 (h) seems to be the appropriate section in the linked version of the agreement. Must have been updated since Erwin posted.

@burrito_mike,

Why does ESRI give us the option to turn off the logo (logo:false) in the ArcGIS JavaScript API if it against their license terms? Even more, in their basic Web Map Application Template that you can download from ArcGIS online, they provide you with code to replace the ESRI logo with your own logo.

MichaelThompson2

you should read license agreements here: http://www.esri.com/legal/pdfs/mla_e204_e300/english.pdf

4.2 (g) Licensee shall not remove or obscure any Esri or its licensors' patent, copyright, trademark, or proprietary rights notices contained in or affixed to Software, Data, Web Services, or Documentation.

I think this thread should have died right here. Instead, you folks keep discussing how to violate license terms. SMH.

4.2 (h) seems to be the appropriate section in the linked version of the agreement. Must have been updated since Erwin posted.

LisCollins

It's now showing and moving when I change numbers!

I had to set the logo back to true. When logo was false, my logo would not show.

Now, I have to play with the settings to get it in the right position.

I'm just using the #mapDiv .logo-med CSS stylesheet suggested above and #mapDiv in my body for anyone who needs help with this in the future.

Thanks everyone!

JonathanUihlein

Honestly, the best way to go about replacing the logo is via CSS like Odoe suggests.

We are over-complicating the issue by bringing javascript into this when your use-case doesn't require us to.

Basically, the above code is fine but you will need to tweak your CSS selector to specifically target the correct node containing the logo.

I started with:

.logo-med {
  background-image: url('myLogo.png') !important;
  height: 50px;
  width: 100px;
}

This should change the logo without any issue.
However, we want to be more specific in case the class 'logo-med' is used elsewhere..
I see you named gave your map an id of "mapDiv" so lets go ahead and use that too:

#mapDiv .logo-med {
  background-image: url('myLogo.png') !important;
  height: 50px;
  width: 100px;
}

Lastly, remove the jQuery append code.

LisCollins

Ok, here's my append code in the last part of my body html:

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script type="text/javascript">
 $("#mapDiv_root").append($('<div id ="logo"></div>'));
 </script>

In header:

 <style type="text/css">
 div.mapDiv_root #logo {
   display: inline-block;
  position: absolute;
  height: 36px;
  width: 46px;
  right: 5px;
  bottom: 5px;
  z-index: 30;
  background-image: url('logo.png');
  cursor: pointer;
}
 </style>

(Logo url was shortened.)

Part of Body section:
[HTML]<body class="calcite app-loading">
    
    <div class="loading-indicator">
        <div class="loading-error">
            <div class="icon-emo-unhappy"></div>
            <div class="error-message-text" id="error_message"></div>
        </div>
    </div>
    <div id="bc_outer" class="border-container-outer">
        <div id="cp_outer_left" class="content-pane-left">
            <div id="drawer_menus"></div>
        </div>
        <div id="cp_outer_center" class="content-pane-center">
            <div id="geoData"></div>
            <div class="top-bar">
                <div id="hamburger_button" class="hamburger-button toggle-grey">
                    <div class="icon-menu-1"></div>
                </div>
                <div id="title" class="app-title"></div>
                <div class="top-menu-right">
                    <div id="ShareDialog"></div>
                    <div class="locate-box">
                        <div id="geocoderSearch"></div>
                    </div>
                    <div id="mobileGeocoderIcon" class="mobile-geocoder-icon icon-right">
                        <div id="mobileGeocoderIconContainer" class="button-container toggle-grey icon-search-1"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div id="mobileSearch" class="mobile-locate-box-hidden">
                <div class="mobile-search-container">
                    <div id="geocoderMobile"></div>
                    <div id="btnCloseGeocoder" class="close-geocoder-button">Cancel</div>
                    <div class="clear"></div>
                </div>
            </div>
            <div id="mapButtons" class="map-buttons">
                <div id="LocateButton"></div>
                <div id="HomeButton"></div>
            </div>
            <div id="BasemapToggle"></div>
       <div id="mapDiv" dir="ltr">
   <div id="swipeDiv"></div>
            </div>

        </div>
    </div>
[/HTML]

When I open up the page in my browser, and go to mapDiv_root in the console, I see that the logo div is not being added. See anything wrong with my code?

RRubalcava

I haven't tried this, but here is the css for the esri logo copied straight from Chrome dev tools

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

So you might be able to override those manually in your own css by using the !important tag each rule. Worth a shot.

LisCollins

Ok, is there a reason I have to use append? Why doesn't it work when I try to do it manually?

JonathanUihlein

Hi odoe,

I'm still a beginner at JavaScript.
Can you explain what you mean by "I append a div to the "map_root" element"?

Odoe creates a new div and pushes it inside another div (called "map_root") using pure javascript.

A div is simply an element (or dom node) in your site's DOM (Document Object Model).

I would strongly recommend reading about HTML, CSS and the DOM before jumping into Javascript.
They are so tightly integrated that you must be faimilar with the basics of HTML and the DOM to be effective at javascript development.

LisCollins

Hi odoe,

I'm still a beginner at JavaScript.
Can you explain what you mean by "I append a div to the "map_root" element"?

RRubalcava

I append a div to the "map_root" element. The name can vary based on the map id, so it's technically MAP_ID_root.

For that div, I have css set up like this.

.my-logo {
  display: inline-block;
  position: absolute;
  height: 36px;
  width: 46px;
  right: 5px;
  bottom: 5px;
  z-index: 30;
  background-image: url('../img/my-logo.png');
  cursor: pointer;
}

That works for me.

LisCollins

Has anyone tried this recently? I was able to remove the ESRI logo using logo:false. But when I tried to add in my custom logo manually using CSS and a logo div in the body html using the parameters above, the logo sits in the top right of my page.

The logo never moves from this position no matter what numbers I have in the bottom, right, or z-value. Any suggestions? I want it in the lower right of the map where the ESRI logo used to be.

ErwinSoekianto

you should read license agreements here: http://www.esri.com/legal/pdfs/mla_e204_e300/english.pdf

4.2 (g) Licensee shall not remove or obscure any Esri or its licensors' patent, copyright, trademark, or proprietary rights notices contained in or affixed to Software, Data, Web Services, or Documentation.

VadimKozyrenko

init.js
find and replase "/images/map/logo-med.png')"
also find and replase logoLink:"http://www.esri.com"

BarryGuidry

OK, thanks Heming. I didn't have div.map #logo entry in the css stylesheet section. That works now.

HemingZhu

See post# 13. I don't know how else to explain it.

It's matter of consistence issue. Pull out the style in basemap div, and put it together with your custome logo:

div.map #baseMap
      { position:absolute; 
         right:20px; 
         top:10px; 
         z-Index:999;
       } 
div.map #logo
      {
 position:absolute;
 bottom:20px;
 right:20px;
 z-index:100; 
 width:15px; 
 heigth:15px;
      }

Note: #baseMap and #logo are ids of your basemap and your logo image.

BarryGuidry

See post# 13. I don't know how else to explain it.

HemingZhu

I was able to get the example Heming provided to work, except it now affects the format of my "BaseMapGallery" widget because the logo is in the same section (below).

<style type="text/css">
div.map img
      {
 position:absolute;
 bottom:20px;
 right:20px;
 z-index:100; 
 width:15px; 
 heigth:15px;
      } 
<body class="nihilo">
</style> 
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
           <a href="http://www.google.com"><img src="logo.png" alt="View Logo" /></a> 
     <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div>

Barry, what is the issue?

BarryGuidry

I was able to get the example Heming provided to work, except it now affects the format of my "BaseMapGallery" widget because the logo is in the same section (below).

<style type="text/css">
div.map img
      {
 position:absolute;
 bottom:20px;
 right:20px;
 z-index:100; 
 width:15px; 
 heigth:15px;
      } 
<body class="nihilo">
</style> 
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
           <a href="http://www.google.com"><img src="logo.png" alt="View Logo" /></a> 
     <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div>

martinschmoll

Three lines of code? Not sure which code you are using (perhaps a combination of what Bailey and yourself posted)?

Is there an additional "dojo.require" statement that may be necessary?

Yes, a combo of code. This is what is working for me:

esri.config.defaults.map.logoLink = "http://yoursite.com"    
document.getElementsByClassName('logo-med')[0].style.backgroundImage="url(\"http://www.yoururl.com/to/the/image.gif\")";
document.getElementsByClassName('logo-med')[0].style.backgroundRepeat="no-repeat";

HemingZhu

Three lines of code? Not sure which code you are using (perhaps a combination of what Bailey and yourself posted)?

Is there an additional "dojo.require" statement that may be necessary?

A simple combination of hide ESRI logo and add an image link with css will achieve your goal. Something like this

<style type="text/css">
div.map img
      {
 position:absolute;
 bottom:20px;
 right:20px;
 z-index:100; 
 width:15px; 
 heigth:15px;
      } 
</style> 
 <script type="text/javascript">
function init()
{
    map = new esri.Map("map", { 
          extent: initialExtent, logo: false 
        }); 
}
...
</script> 
<body class="claro">
...
<div id="map" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="center">
 <a href="http://www.google.com"><img src="logo.png" alt="View Logo" /></a> 
      </div> 
...
</body>

BarryGuidry

I've got both the replacement logo and url working. Make sure you post the (3 lines of) code in your init() function after the map object is created.

Three lines of code? Not sure which code you are using (perhaps a combination of what Bailey and yourself posted)?

Is there an additional "dojo.require" statement that may be necessary?

martinschmoll

Martin, that is also on Utah's GIS Portal. That is only a portion of what needs to be completed, though, which only adds a custom hyperlink to the logo. I attempted what Utah's site recommends, but it only deleted ESRIs logo, but did not add mine.

I've got both the replacement logo and url working. Make sure you post the (3 lines of) code in your init() function after the map object is created.

BarryGuidry

Martin, that is also on Utah's GIS Portal. That is only a portion of what needs to be completed, though, which only adds a custom hyperlink to the logo. I attempted what Utah's site recommends, but it only deleted ESRIs logo, but did not add mine.

martinschmoll

When the user clicks the logo it links to esri.com. How do you disable that, or better yet change the url?

I found it in old API documentation...

esri.config.defaults.map.logoLink = "http://yoursite.com"

BaileyLipscomb1

Thanks, Bailey. I cannot figure out where to insert it in the HTML file, though.

Drop it in the header below all of the ArcGIS javascript functions. Let me know if that works.

BarryGuidry

If you are trying to replace just the image it can be accomplished by the following code:

<script type="text/javascript">
    //Change the background image
    document.getElementsByClassName('logo-med')[0].style.backgroundImage="url(\"http://www.yoururl.com/to/the/image.gif\")";
    //Keep the image from repeating
    document.getElementsByClassName('logo-med')[0].style.backgroundRepeat="no-repeat";
</script>

Thanks, Bailey. I cannot figure out where to insert it in the HTML file, though.

martinschmoll

If you are trying to replace just the image it can be accomplished by the following code:

<script type="text/javascript">
    //Change the background image
    document.getElementsByClassName('logo-med')[0].style.backgroundImage="url(\"http://www.yoururl.com/to/the/image.gif\")";
    //Keep the image from repeating
    document.getElementsByClassName('logo-med')[0].style.backgroundRepeat="no-repeat";
</script>

When the user clicks the logo it links to esri.com. How do you disable that, or better yet change the url?

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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