Adicione seu próprio logo aos Mapas ArcGIS JS

ReneRubalcava

<\/HEAD>

<\/P>

Uma das coisas mais fáceis que você pode fazer para personalizar seu mapa ArcGIS JavaScript é adicionar um logo personalizado. A Esri faz isso, por que você não pode?<\/EM><\/P><\/P>Assuma o controle<\/H2>Provavelmente você está construindo o app para um cliente, e cliente pode significar seu próprio local de trabalho, mas aposto que esse cliente tem uma marca e muito provavelmente um logo.<\/P><\/P>Você trabalha duro pelos seus mapas, então deixe as pessoas saberem disso!<\/EM><\/P><\/P>Isso não é realmente difícil de fazer, é apenas um pouco de css e inserção no DOM, mas você poderia potencializar isso e fazer um widget reutilizável também. Um exemplo muito simples pode ser algo assim:<\/P><\/P>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');
  }
});<\/PRE><\/P>O que você tem é um widget básico onde você pode usar o put-selector<\/A> para adicionar o nó DOM do widget à página. Vou assumir que você quer o logo dentro dos limites do mapa, então configurei para inserir na div com id "map_root"<\/STRONG>. Isso é igual ao id DOM que você deu ao elemento DOM fornecido para o mapa, então se o id do mapa for "map"<\/STRONG>, ele conterá uma div com id "map_root"<\/STRONG>. Se meu id do mapa fosse "harry"<\/STRONG>, ele conteria uma div com id "harry_root"<\/STRONG>. Tenho certeza que você entendeu a ideia.<\/P><\/P>Depois de fazer isso, basta inicializar o widget com uma URL e um nome de classe que você define no seu css:<\/P>var logo = new LogoWidget({
  url: '<\/SPAN>http:\/\/odoe.net\/blog\/<\/A>',<\/SPAN>
  logoClassName: 'my-logo'
});<\/PRE><\/P>

Estilize-o<\/H2>Então no css para o widget você pode definir o tamanho e localização assim como a imagem de fundo:<\/P>.my-logo {
  display: inline-block;
  position: absolute;
  height: 36px;
  width: 125px;
  right: 75px;
  bottom: 5px;
  z-index: 30;
  background-color: white;
  background-image: url('<\/SPAN>http:\/\/odoe.net\/blog\/wp-content\/uploads\/logo_gray_sm.png');<\/A>
  cursor: pointer;
}<\/PRE>

*Nota - Você poderia trocar tudo isso para usar uma tag <img> se quiser.<\/EM><\/SPAN><\/P><\/P><\/P>Aí está! Você tem um logo no mapa e pode clicar nesse logo para ir a um site de sua escolha.<\/P>Você pode ver uma

demonstração deste exemplo<\/A><\/STRONG> e brincar com ele se quiser. Nada impede você de ser insuportável<\/SPAN> incrível<\/EM> e adicionar um gif animado como seu logo<\/A><\/STRONG> também.<\/P>

<\/P>

Então personalize seus apps e mapas e mostre suas habilidades!<\/P><\BODY><\HTML>