プロジェクト実習I/II(2013年度) テーマ「俺(私)の地図」
ここに、必要なファイルをアップロードします。
第1期
9月20日
趣旨説明、班分け、班ごとにフリータイム(自己紹介など)、ディスカッション「自分にとって地理情報とは」、班ごとの発表、テーマ選定、情報収集方法の検討、班ごとの発表
9月27日
ミニレクチャー(HTML, JavaScript, Google Map APIの基本)、進捗発表会以外は自由時間
10月4日
前回と同様、ミニレクチャー(マーカーアイコンの変更, JSON, jQuery, Ajax, ポリゴンの表示)、進捗発表会以外は自由時間。
10月11日
前回と同様、ミニレクチャー(JavaScriptの基本、addListnerメソッド(オブジェクトのイベントへの対応)、マーカーのdraggable属性、オープンデータの動向)、進捗発表会以外は自由時間
10月18日
前回と同様、ミニレクチャー(ジオコーディング)、進捗発表会以外は自由時間
10月25日
進捗発表会以外は、各班で作業
11月1日
成果発表会
第2期
11月15日
班分け、趣旨説明、フリータイム(自己紹介など)とディスカッション、班ごとの発表、テーマ選定・方法の検討、進捗報告
11月22日
ミニレクチャー(地図の表示、オーバーレイの表示、JSON)、進捗報告以外は各班ごとに議論・情報収集・制作活動。
11月29日
ミニレクチャー(jQueryの利用、ジオコーディングGeocoding)、進捗報告以外は各班ごとに議論・情報収集・制作活動。
(例2)は、住所→緯度経度の変換と微調整が可能なツール。連続して作業し、結果をエクセルにコピー&ペーストすることを想定。
12月6日
ミニレクチャー(地図上のクリックした場所の座標(緯度経度)を取得する)、進捗報告以外は各班ごとに議論・情報収集・制作活動。
12月13日
ミニレクチャー(setMap(null)の使い方、jQueryの利用、正規表現による検索(作品例))、進捗報告以外は各班ごとに議論・情報収集・制作活動
12月20日
各班ごとに議論・情報収集・制作活動
1月10日
成果発表会:各班はプレゼンテーションと成果物のデモンストレーションを行うこと。
提出物(〆切:1月17日)1)各班で1つ、プレゼン、成果物の説明書、ならびに成果物
2)各自のレポート。
サンプルプログラム一覧(右クリックでダウンロード):番号はテキストの章に対応(テキストは7章以降未執筆)
2.ある地点を中心とする地図の上に、一つマーカーを表示する。
5.ページ上のリストのアイテムをクリックすると、対応するマーカーに吹き出しが表示される。
9.ページ上のリストのアイテムをクリックすると、現在地から対応するマーカーまでの経路が表示される
10.入れ子になったJSONファイルの中身を確認するテストページ
11.ポリゴンの座標をJSONファイルから読み込んで表示するテストページ
13.マーカーを別の場所にドラッグしてクリックすると緯度と経度を表示する
テキストで紹介した以外の参考になるサイト
1.Waste Of Time - Geolocation API
現在地の取得方法などが参考になる
2.Japonyol 地図と技術 - Google Maps JavaScript API V3: いろいろな使い方
サンプルプログラムの参考にも利用した。地図上の点から緯度と経度を取得する方法も参考になる。
3.逆引きGoogle Maps APIリファレンス ver 3
やりたいことがGoogle Maps APIのどの機能を用いれば実現できるか調べる時に使う。
JSON形式で表現された位置情報をAjaxを使って読み込んでマーカー表示するための簡単な方法
JSONデータの入門。
Javascript入門
Ajaxの概要とJSON形式での情報のやりとり
8.オーバーレイ
Google Developersによる、「オーバーレイ」の説明
9.超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法
効率的にUIを構築するためのjQueryの利用例。
10.CSSの使い方
Webページのデザインに用いるカスケーディングスタイルシート(CSS)入門。
ひとつひとつのマーカーに、メソッドsetMap(null)を実行する。そのために、マーカー生成時にマーカーを配列に格納しておく。