How to change the esri logo link to custom link?

[ChadRicks]

I can change the ESRI logo to my own logo by adding this into the jimu.css file:

.map .logo-med, .map .logo-sm {

             background-image: url("https://mylogo.png") !important;/*your logo */

             border:0;

             bottom: 5px;

             cursor: pointer;

             height: 70px !important; /* size of your image */

             position: absolute;

             right: 5px;

             width: 100px !important;/* size of your image */

             z-index: 49;

}

and i can remove the imagery attribution by adding this to the config.json under mapOptions:

"showAttribution": false,

I can also change the location of the logo by adding this in the jimu.css file

.map .esriControlsBR {

    position: absolute;

    left: 110px !important;

    right: auto;

    bottom: 5px;

    z-index: 30;

    text-align: right;

}

But how do i change the link from esri.com to my own?

I saw a thread Replace ESRI logo with custom logo?  that uses this: esri.config.defaults.map.logoLink = "http://yoursite.com"

I'm not sure where to make that change.

Thanks

[RobertScheitlin__GISP · Accepted solution]

Chad,

  Add this to the MapManager.js file Line 4, line 7 end, line 29

.......
'./utils',
  './dijit/LoadingShelter',
  'esri/config'
], function(declare, lang, array, html, topic, on, aspect, keys, InfoWindow,
  PopupMobile, InfoTemplate, esriRequest, Extent, Point, require,
  jimuUtils, LoadingShelter, esriConfig) {
  var instance = null,
    clazz = declare(null, {
      appConfig: null,
      mapDivId: '',
      map: null,
      previousInfoWindow: null,
      mobileInfoWindow: null,
      isMobileInfoWindow: false,

      constructor: function( /*Object*/ appConfig, mapDivId) {
        this.appConfig = appConfig;
        this.mapDivId = mapDivId;
        this.id = mapDivId;
        topic.subscribe("appConfigChanged", lang.hitch(this, this.onAppConfigChanged));
        topic.subscribe("changeMapPosition", lang.hitch(this, this.onChangeMapPosition));
        topic.subscribe("syncExtent", lang.hitch(this, this.onSyncExtent));

        on(window, 'resize', lang.hitch(this, this.onWindowResize));
      },

      showMap: function() {
        esriConfig.defaults.map.logoLink = "http://www.yoursite.com";
        // console.timeEnd('before map');
        this._showMap(this.appConfig);
      },
........

[ChadRicks]

Thanks again Robert! You saved the day again and made my life easier

[AndrewNiederhauser1]

Is there a way to completely remove the link and logo?

Thanks in advance,

Andrew

[RobertScheitlin__GISP]

Andrew,

  Sure that is as simple opening the main config.json for your app and finding the "map" object and adding logo false to the mapOptions object (line 21 bellow).

"map": {
    "3D": false,
    "2D": true,
    "position": {
      "left": 0,
      "top": 0,
      "right": 0,
      "bottom": 0
    },
    "itemId": "8bf7167d20924cbf8e25e7b11c7c502c",
    "mapOptions": {
      "extent": {
        "xmin": -9586853.166835416,
        "ymin": 3958647.4575281255,
        "xmax": -9519588.581944551,
        "ymax": 4025376.9832209945,
        "spatialReference": {
          "wkid": 102100
        }
      },
      "logo": false
    },
    "id": "map",
    "portalUrl": "http://www.arcgis.com"
  },

[NZWAC_GIS]

Managed to get the hyperlink working on desktop, however when I test it on a touch screen device, tapping on the image won't take users to the hyperlink in a new tab. This seems like it was intentionally done to prevent accidental clicks.

Is there a way to activate the touch event for this image?

[RobertScheitlin__GISP]

Steven,

Sure you can just open the MapManager.js and find the _publishMapEvent function and at the very end of this function add:

require(["dojo/touch", "dojo/query"], function(touch, query){
          var node = query(".logo-med")[0];
          on(node, touch.press, function(){
            window.open('http://yahoo.com','_blank');
          });
        });

[NZWAC_GIS]

thanks heaps Robert, seems to have done the job.

On line 2, I've added this to account for the other loco class: var node = query(".logo-med")[0]; || query(".logo-sm")[0] ;

[StephenMolnar]

rscheitlin‌ 

Is there a way to change the title attribute of the logo/link? I used your method to replace the logo and link, however it still says "Esri" on hover. This comes from the title attribute of div.esriControlsBR.logo-med, which I have tried to select and alter through CSS- to no avail.

Thanks

[RobertScheitlin__GISP]

Stephen,

  Sure see this thread:

https://community.esri.com/thread/192588-change-hover-text-over-esri-logo