Voeg je eigen logo toe aan ArcGIS JS-kaarten

ReneRubalcava

<\/HEAD>

<\/P>

Een van de gemakkelijkste dingen die je kunt doen om je ArcGIS JavaScript-kaart te personaliseren, is het toevoegen van een aangepast logo. Esri doet het, waarom jij dan niet? <\/EM><\/P><\/P>Maak het eigen<\/H2>De kans is groot dat je de app bouwt voor een klant, en een klant kan ook je eigen werkplek zijn, maar ik wed dat die klant een merk heeft en hoogstwaarschijnlijk een logo.<\/P><\/P>Je werkt hard voor je kaarten, dus laat mensen dat weten!<\/EM><\/P><\/P>Dit is eigenlijk niet moeilijk om te doen, het is gewoon een beetje css en DOM-invoeging, maar je zou het kunnen uitbreiden en er ook een herbruikbare widget van maken. Een heel eenvoudig voorbeeld kan er ongeveer zo uitzien:<\/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>Wat je hier hebt is een basiswidget waarbij je de put-selector<\/A> kunt gebruiken om de DOM-node van de widget aan de pagina toe te voegen. Ik ga ervan uit dat je het logo binnen de kaartgrenzen wilt hebben, dus ik heb het zo ingesteld dat het wordt ingevoegd in de div met een id van "map_root"<\/STRONG>. Dit is gelijk aan de DOM-id die je hebt gegeven aan het DOM-element dat je voor de kaart hebt opgegeven, dus als de kaart-id "map"<\/STRONG> is, bevat deze een div met een id van "map_root"<\/STRONG>. Als mijn kaart-id "harry"<\/STRONG> was, zou deze een div bevatten met een id van "harry_root"<\/STRONG>. Ik weet zeker dat je het idee begrijpt.<\/P><\/P>Zodra je dat doet, initialiseer je gewoon de widget met een URL en een klassenaam die je definieert in je css:<\/P>var logo = new LogoWidget({
  url: '<\/SPAN>http:\/\/odoe.net\/blog\/<\/A>',<\/SPAN>
  logoClassName: 'my-logo'
});<\/PRE><\/P>

Stijl het<\/H2>Vervolgens kun je in de css voor de widget de grootte en locatie definiëren evenals de achtergrondafbeelding:<\/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>

*Opmerking - Je zou dit allemaal kunnen aanpassen om een <img>-tag te gebruiken als je dat wilt.<\/EM><\/SPAN><\/P><\/P><\/P>Daar heb je het! Je hebt een logo in de kaart en je kunt op dat logo klikken om naar een website naar keuze te gaan.<\/P>Je kunt een

demo van dit voorbeeld<\/A><\/STRONG> bekijken en ermee experimenteren als je wilt. Niets houdt je tegen om opdringerig<\/SPAN> geweldig<\/EM> te zijn en ook een geanimeerde gif als je logo toe te voegen<\/A><\/STRONG>.<\/P>

<\/P>

PAS JE APPS EN KAARTEN AAN EN LAAT JE VAARDIGHEDEN ZIEN!<\/P><\BODY><\HTML>