topic Re: How to successfully change the ESRI logo in JSAPI applications? in ArcGIS JavaScript Maps SDK Questions

How to successfully change the ESRI logo in JSAPI applications?

GeoffreyWest — Sat, 11 Dec 2021 23:25:48 GMT

I am writing an Esri JavaScript API application and would like to replace the Esri logo with my client's logo. I have found that using logo.med allows me to replace the logo, however, there are size dependencies in the API that I cannot change. I would like my logo size to be about 85px x 29px. Here's an example of the image that I am using which appears incorrectly at the bottom right of the map. This incorrect because the image shows up 4 times. I am using .logo-med to change the logo. How can I set the CSS so that I can use the image at any size that I prefer?

<!DOCTYPE html>

<html>

<head>

<title>Create web map from id</title>

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }


    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Helvetica";
    }




    #rightPane {
      background-color: #E8E8E8;
      border: solid 2px #B8B8B8;
      margin: 5px;
      width: 20%;
    }


    #map {
      background-color: #FFF;
      border: solid 2px #B8B8B8;
      margin: 5px;
      padding: 0;
    }


    .esriLegendServiceLabel {
      display: none;
    }


    #search {
      display: block;
      position: absolute;
      z-index: 10px;
      top: 25px;
      right: 1025px;
    }


  
  .logo-med {  
  background-image: url('capture2.png') !important;  
  
}  






  </style>

Re: How to successfully change the ESRI logo in JSAPI applications?

RobertScheitlin__GISP — Wed, 16 Mar 2016 16:20:23 GMT

Geoffrey,

Can I see how you are adjusting the css to apply your logo?

Re: How to successfully change the ESRI logo in JSAPI applications?

GeoffreyWest — Wed, 16 Mar 2016 16:23:22 GMT

.logo-med {

background-image: url('capture2.png') !important;

}

Results in:

On Wed, Mar 16, 2016 at 9:20 AM, Robert Scheitlin, GISP <geonet@esri.com>

Re: How to successfully change the ESRI logo in JSAPI applications?

RobertScheitlin__GISP — Wed, 16 Mar 2016 16:31:32 GMT

Geoffrey,

So you need to override the .logo-meds height and width as well then:

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

}