SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

jQueryで地震分布図を作成しよう

  • X ポスト
  • このエントリーをはてなブックマークに追加

 地理情報を含むデータを表現する場合、地図上で表すことで視覚的にその情報を認知しやすくなります。例えば、車のナビや道路標識などでは、単純に方向や座標だけを示すのではなく、地図上に表現することで、見た人が直感的に認知できるようにしています。本稿では、jQuery対応コントロール集である「Ignite UI 2013 Volume 1」のigMapというコントロールを用いて、地震分布図を作成していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

図1 地震分布図
図1 地震分布図

対象読者

 JavaScriptの経験者、地図アプリに興味のある方。

必要環境

 IDEは特に必要がなく、コード編集用のエディタと動作確認用のブラウザがあれば良いです。

 今回使用するigMapコントロールは、jQuery UIウィジェットの一つであり、jQueryライブラリとjQuery UIライブラリに依存します。そのため、対応ブラウザについてもjQuery UIに依存します。

プログラム実行時の注意環境

 Ignite UIはASP.NET MVCにも対応しています。今回は使用しませんが、MVC開発に利用する場合は、Visual StudioおよびMVC専用のアセンブリファイルが別途必要になります。

コンポーネントのインストール

 はじめてIgnite UIを使用する場合は、事前にスクリプトファイルを準備する必要があります。以下のいずれかのリンクよりインストーラをダウンロードしてください(サイトへの登録が必要になります)また、この製品は有償ですが、20日間すべての機能を使用できるトライアル版としてインストール可能です。

 なお、プラットフォームインストーラ(下)は、通常のインストーラ(上)より軽量ですが、インストール時にインターネット経由で必要なファイルをダウンロードするため、インストール時にインターネット環境が必要となります。また、Ignite UIだけでなくWindows FormsやASP.NET、WPF、Silverlightなど他プラットフォーム向け製品についても、インストーラ実行時に選択することでインストール可能です。

Ignite UIについて

 Ignite UIは、jQuery、jQuery UI、jQuery MobileといったJavaScriptライブラリに対応したコントロール集です。HTML5、CSS3を活用したモバイルデバイス、デスクトップ対応のリッチWebアプリケーションを構築するためのコントロールを数多く提供しています。IDE非依存であり、さまざまな開発環境でご利用いただくことが可能です。また、Visual Studioを利用する場合は、ASP.NET MVCのRazor構文でViewを構築できるようにもなっており、Entity Frameworkなど今までのWeb資産を活用することも可能です。

 このIgnite UIを含めた、インフラジスティックス社のコントロールを使用したサンプルについてはこちらで確認することができます。

 今回は、2013年4月に公開された最新バージョンのIgnite UI 2013 Volume 1を使用します。

マップコントロールについて

 今回利用するigMapコントロールでは、以下の5種類の表示形式がサポートされています。

地図シンボルシリーズ

図2 地図シンボルシリーズ

 地理座標に基づいて、マップ上のデータポイントを視覚化します。今回はこのシリーズを使用して、地図上に地震の分布を表現します。また、震源の深さや震度の情報も併せて保持し、それらの情報で地図上のマーカーをフィルタリングできるようにします。

地理図形シリーズ

図3 地理図形シリーズ

 シェープ(SHP)ファイルまたはカスタム形状データソースが提供する形状データに基づいて、国や地域などの、マップ上の囲まれた領域を色分けするなどして視覚化します。

地理ポリラインシリーズ

図4 地理ポリラインシリーズ

 シェープ(SHP)ファイルまたはカスタム形状データソースが提供する形状データに基づいて、道路、川、または毎日の供給路などの、マップ上の開いたパスを視覚化します。

次のページ
地図分布図の作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

山口 慧(ヤマグチ サトル)

SIerにソフトウェアエンジニアとして5年勤めた後、2012年にインフラジスティックス・ジャパンに入社。現在は、様々な技術と英語に囲まれる好環境で、日々開発者のサポートをしています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7090 2013/04/25 15:45

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング