ArcGIS JS Mapsに独自のロゴを追加する

ReneRubalcava

<\/HEAD>

<\/P>

ArcGIS JavaScriptマップをパーソナライズする最も簡単な方法の一つは、カスタムロゴを追加することです。Esriがやっているなら、あなたにもできるはずです。<\/EM><\/P><\/P>所有しましょう<\/H2>おそらくクライアントのためにアプリを作っているのでしょう。クライアントとはあなた自身の職場かもしれませんが、そのクライアントにはブランドがあり、おそらくロゴもあるはずです。<\/P><\/P>あなたはマップのために一生懸命働いています。だからそれを人々に知らせましょう！<\/EM><\/P><\/P>これは本当に難しいことではなく、少しのCSSとDOM挿入だけですが、さらに強化して再利用可能なウィジェットにすることもできます。非常にシンプルな例は次のようになります:<\/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>ここで持っているのは基本的なウィジェットで、put-selector<\/A>を使ってウィジェットのDOMノードをページに追加できます。ロゴをマップの範囲内に配置したいと仮定して、idが"map_root"<\/STRONG>のdivに挿入するよう設定しました。これはマップ用に指定したDOM要素のDOM idと同じなので、マップidが"map"<\/STRONG>なら、その中にidが"map_root"<\/STRONG>のdivが含まれます。もし私のマップidが"harry"<\/STRONG>なら、idが"harry_root"<\/STRONG>のdivが含まれます。この意味はわかると思います。<\/P><\/P>これを行ったら、URLとCSSで定義したクラス名を使ってウィジェットを初期化します:<\/P>var logo = new LogoWidget({
  url: '<\/SPAN>http:\/\/odoe.net\/blog\/<\/A>',<\/SPAN>
  logoClassName: 'my-logo'
});<\/PRE><\/P>

スタイル設定する<\/H2>次にウィジェット用のCSSでサイズや位置、背景画像を定義できます:<\/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>

*注 - 必要なら<img>タグを使うように変更しても構いません。<\/EM><\/SPAN><\/P><\/P><\/P>これで完了です！マップ内にロゴが表示され、そのロゴをクリックすると任意のウェブサイトへ移動できます。<\/P>このサンプルの

デモを見ることができるので、自由に試してみてください。あなたが 迷惑な 素晴らしい ロゴとして アニメーションGIFを追加する のも全く問題ありません。<\/P><\/P>さあ、アプリやマップをカスタマイズしてあなたのスキルを披露しましょう！<\/P><\/BODY>