Ajoutez votre propre logo aux cartes ArcGIS JS

ReneRubalcava

<\/HEAD>

<\/P>

L'une des choses les plus simples que vous puissiez faire pour personnaliser votre carte ArcGIS JavaScript est d'ajouter un logo personnalisé. Esri le fait, pourquoi pas vous ?<\/EM><\/P><\/P>Possédez-le<\/H2>Il y a de fortes chances que vous construisiez l'application pour un client, et un client peut signifier votre propre lieu de travail, mais je parie que ce client a une marque et très probablement un logo.<\/P><\/P>Vous travaillez dur pour vos cartes, alors faites-le savoir !<\/EM><\/P><\/P>Ce n'est vraiment pas difficile à faire, c'est juste un peu de css et d'insertion DOM, mais vous pourriez le renforcer et en faire un widget réutilisable aussi. Un exemple très simple pourrait ressembler à ceci :<\/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>Ce que vous avez est un widget basique où vous pouvez utiliser le put-selector<\/A> pour ajouter le nœud DOM du widget à la page. Je vais supposer que vous voulez le logo dans les limites de la carte, donc je l'ai configuré pour s'insérer dans la div avec un id de "map_root"<\/STRONG>. Cela correspond à l'id DOM que vous avez donné à l'élément DOM que vous avez fourni pour la carte, donc si l'id de la carte est "map"<\/STRONG>, elle contiendra une div avec un id de "map_root"<\/STRONG>. Si mon id de carte était "harry"<\/STRONG>, elle contiendrait une div avec un id de "harry_root"<\/STRONG>. Je suis sûr que vous comprenez l'idée.<\/P><\/P>Une fois cela fait, il suffit d'initialiser le widget avec une URL et un nom de classe que vous définissez dans votre css :<\/P>var logo = new LogoWidget({
  url: '<\/SPAN>http:\/\/odoe.net\/blog\/<\/A>',<\/SPAN>
  logoClassName: 'my-logo'
});<\/PRE><\/P>

Stylisez-le<\/H2>Puis dans le css du widget, vous pouvez définir la taille et l'emplacement ainsi que l'image de fond :<\/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>

*Note - Vous pourriez tout changer pour utiliser une balise <img> si vous le souhaitez.<\/EM><\/SPAN><\/P><\/P><\/P>Voilà ! Vous avez un logo sur la carte et vous pouvez cliquer sur ce logo pour aller sur un site web de votre choix.<\/P>Vous pouvez voir une

démonstration de cet exemple<\/A><\/STRONG> et jouer avec si vous voulez. Rien ne vous empêche d'être agaçant<\/SPAN> génial<\/EM> et d'ajouter un gif animé comme votre logo<\/A><\/STRONG> aussi.<\/P>

<\/P>

Alors personnalisez vos applications et cartes et montrez vos compétences !<\/P><\/BODY>