Add your own logo to ArcGIS JS Maps

[ReneRubalcava]

One of the easiest things you can do to personalize your ArcGIS JavaScript map is to add a custom logo. Esri does it, why can't you?

Own it

Chances are you're building the app for a client, and a client can mean your own workplace, but I'm betting that client has brand and most likely a logo.

You work hard for your maps, so let people know it!

This isn't really difficult to do, it's just a little css and DOM insertion, but you could power it up and make it a reusable widget too. A very simple example may look something like this:

var LogoWidget = declare([_WidgetBase, _TemplatedMixin], {
  templateString: '<div class="${logoClassName}" data-dojo-attach-event="click:openLink"></div>',
  postCreate: function() {
    put(dom.byId('map_root'), this.domNode);
  },
  openLink: function() {
    window.open(this.get('url'), '_blank');
  }
});

What you have is a basic widget where you can use the put-selector to add the widgets DOM node to the page. I'm going to assume you want the logo within the map bounds, so I set it up to insert at the div with an id of "map_root". This is equal to the DOM id you gave to the DOM element you provided for the map, so if the map id is "map", it will contain a div with an id of "map_root". If my map id was "harry", it would contain a div with an id of "harry_root". I'm sure you get the idea.

Once you do that, you just initialize the widget with a URL and a class name you define in your css:

var logo = new LogoWidget({
  url: 'http://odoe.net/blog/',
  logoClassName: 'my-logo'
});

Style it

Then in the css for the widget you can define the size and location as well as the background-image:

.my-logo {
  display: inline-block;
  position: absolute;
  height: 36px;
  width: 125px;
  right: 75px;
  bottom: 5px;
  z-index: 30;
  background-color: white;
  background-image: url('http://odoe.net/blog/wp-content/uploads/logo_gray_sm.png');
  cursor: pointer;
}

*Note - You could switch all this up to use an <img> tag if you wanted.

There you have it! You have a logo in the map and you can click that logo to go to a website of your choosing.

You can view a demo of this sample and play around with it if you like. There's nothing stopping you from being obnoxious awesome and adding an animated gif as your logo either.

So customize your apps and maps and show off your skills!