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?

HemingZhu · ‎10-20-2011

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 · ‎10-20-2011

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 · ‎10-20-2011

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 · ‎10-21-2011

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 · ‎11-09-2011

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

HemingZhu · ‎11-09-2011

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 · ‎11-09-2011

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

VadimKozyrenko · ‎12-26-2013

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

ErwinSoekianto · ‎02-03-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.

LisCollins · ‎06-20-2014

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.