Agrega tu propio logo a ArcGIS JS Maps

ReneRubalcava

<\/HEAD>

<\/P>

Una de las cosas más fáciles que puedes hacer para personalizar tu mapa de ArcGIS JavaScript es agregar un logo personalizado. Esri lo hace, ¿por qué tú no? <\/EM><\/P><\/P>Hazlo tuyo<\/H2>Lo más probable es que estés construyendo la aplicación para un cliente, y un cliente puede ser tu propio lugar de trabajo, pero apuesto a que ese cliente tiene una marca y muy probablemente un logo.<\/P><\/P>Trabajas duro por tus mapas, ¡así que deja que la gente lo sepa!<\/EM><\/P><\/P>Esto realmente no es difícil de hacer, es solo un poco de css e inserción en el DOM, pero podrías potenciarlo y convertirlo en un widget reutilizable también. Un ejemplo muy simple podría verse algo así:<\/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>Lo que tienes es un widget básico donde puedes usar el put-selector<\/A> para agregar el nodo DOM del widget a la página. Voy a asumir que quieres el logo dentro de los límites del mapa, así que lo configuré para insertarlo en el div con un id de "map_root"<\/STRONG>. Esto es igual al id DOM que le diste al elemento DOM que proporcionaste para el mapa, así que si el id del mapa es "map"<\/STRONG>, contendrá un div con un id de "map_root"<\/STRONG>. Si mi id del mapa fuera "harry"<\/STRONG>, contendría un div con un id de "harry_root"<\/STRONG>. Seguro entiendes la idea.<\/P><\/P>Una vez que haces eso, solo inicializas el widget con una URL y un nombre de clase que defines en tu css:<\/P>var logo = new LogoWidget({
  url: '<\/SPAN>http:\/\/odoe.net\/blog\/<\/A>',<\/SPAN>
  logoClassName: 'my-logo'
});<\/PRE><\/P>

Estílalo<\/H2>Luego en el css para el widget puedes definir el tamaño y la ubicación así como la imagen de fondo:<\/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 - Podrías cambiar todo esto para usar una etiqueta <img> si quisieras.<\/EM><\/SPAN><\/P><\/P><\/P>¡Ahí lo tienes! Tienes un logo en el mapa y puedes hacer clic en ese logo para ir a un sitio web de tu elección.<\/P>Puedes ver una

demostración de este ejemplo<\/A><\/STRONG> y jugar con ella si quieres. No hay nada que te impida ser molesto<\/SPAN> increíble<\/EM> y agregar un gif animado como tu logo<\/A><\/STRONG> también.<\/P>

<\/P>

Así que personaliza tus aplicaciones y mapas y ¡muestra tus habilidades!<\/P><\BODY><\HTML>