How to change the esri logo link to custom link?

5071
9
Jump to solution
09-16-2015 09:02 AM
ChadRicks
New Contributor III

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

Tags (1)
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
      },
........

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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

0 Kudos
AndrewNiederhauser1
New Contributor III

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

Thanks in advance,

Andrew

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor

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

0 Kudos
StephenMolnar
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
0 Kudos