Replace ESRI logo with custom logo?

BarryGuidry · ‎10-17-2011

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?

ReneRubalcava · ‎06-20-2014

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 · ‎06-20-2014

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

JonathanUihlein · ‎06-20-2014

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 · ‎06-20-2014

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

ReneRubalcava · ‎06-20-2014

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 · ‎06-20-2014

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?

JonathanUihlein · ‎06-20-2014

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 · ‎06-20-2014

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!

MichaelThompson2 · ‎06-25-2014

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 · ‎06-25-2014

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.