topic Re: Replace ESRI logo with custom logo? in ArcGIS JavaScript Maps SDK Questions

Replace ESRI logo with custom logo?

BarryGuidry — Mon, 17 Oct 2011 17:37:46 GMT

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?

Re: Replace ESRI logo with custom logo?

JoeJeurissen — Mon, 17 Oct 2011 17:54:16 GMT

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.

Re: Replace ESRI logo with custom logo?

BaileyLipscomb1 — Sat, 11 Dec 2021 19:25:07 GMT

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>

Re: Replace ESRI logo with custom logo?

martinschmoll — Sat, 11 Dec 2021 19:25:09 GMT

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?

Re: Replace ESRI logo with custom logo?

BarryGuidry — Sat, 11 Dec 2021 19:25:12 GMT

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.

Re: Replace ESRI logo with custom logo?

BaileyLipscomb1 — Wed, 19 Oct 2011 19:54:56 GMT

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.

Re: Replace ESRI logo with custom logo?

martinschmoll — Thu, 20 Oct 2011 12:27:09 GMT

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"

Re: Replace ESRI logo with custom logo?

BarryGuidry — Thu, 20 Oct 2011 13:25:13 GMT

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.

Re: Replace ESRI logo with custom logo?

martinschmoll — Thu, 20 Oct 2011 16:09:27 GMT

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.

Re: Replace ESRI logo with custom logo?

BarryGuidry — Thu, 20 Oct 2011 17:58:25 GMT

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?

Re: Replace ESRI logo with custom logo?

HemingZhu — Sat, 11 Dec 2021 19:25:15 GMT

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>

Re: Replace ESRI logo with custom logo?

martinschmoll — Sat, 11 Dec 2021 19:25:17 GMT

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

Re: Replace ESRI logo with custom logo?

BarryGuidry — Sat, 11 Dec 2021 19:25:20 GMT

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>

Re: Replace ESRI logo with custom logo?

HemingZhu — Sat, 11 Dec 2021 19:25:22 GMT

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?

Re: Replace ESRI logo with custom logo?

BarryGuidry — Wed, 09 Nov 2011 13:34:54 GMT

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

Re: Replace ESRI logo with custom logo?

HemingZhu — Sat, 11 Dec 2021 19:25:25 GMT

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.

Re: Replace ESRI logo with custom logo?

BarryGuidry — Wed, 09 Nov 2011 17:16:46 GMT

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

Re: Replace ESRI logo with custom logo?

VadimKozyrenko — Fri, 27 Dec 2013 03:39:27 GMT

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

Re: Replace ESRI logo with custom logo?

ErwinSoekianto — Mon, 03 Feb 2014 23:36:38 GMT

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.

Re: Replace ESRI logo with custom logo?

LisCollins — Fri, 20 Jun 2014 16:47:00 GMT

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.