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?

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

JoeJeurissen

Set the logo to false in the parameter options of the map constructor.

Example:

var map = new esri.Map("map",{logo:false});

Then position your logo where you want in the map container.

BaileyLipscomb1

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>

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?

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.

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.

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"

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

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

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?

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>

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

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>

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

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

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

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

VadimKozyrenko

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

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.

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.

ReneRubalcava

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

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

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

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

ReneRubalcava

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

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

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!

DougBrowning_0-1654891004029.png

DougBrowning_0-1654891825982.jpeg

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.

Sunny_Esri_0-1654892251555.jpeg

Sunny_Esri_1-1654892251572.jpeg

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.

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.

MathewSuran

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

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.

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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