More Related Content
Viewers also liked
Viewers also liked (8)
Similar to CodeForNara勉強会「Ｗｅｂ地図にマークをつけてみよう」
Similar to CodeForNara勉強会「Ｗｅｂ地図にマークをつけてみよう」 (20)
More from 康司 石塚
CodeForNara勉強会「Ｗｅｂ地図にマークをつけてみよう」
- 1. 2015.11.11 Code for Nara 奈良オープンデータハッカソン対策 Code for Nara勉強会その１ Web地図にマークをつけてみよう
- 2. 準備 この資料、サンプルソース・データはまとめて以下にあります。 http://www.code4nara.org/151111/sample.zip ダウンロードして、任意のフォルダに展開してください。 圧縮ファイルに含まれるもの ● この資料 (pdf) ● サンプルソース （*.html） ● サンプルデータ （*.csv） サンプルソースは http://www.code4nara.org/151111/ からアクセスできます。
- 4. 奈良オープンデータハッカソンとは いままでの経緯 ● フューチャーセッション（2015/9/5) – 多様な参加者による奈良をより良くするアイディア検討 – http://idea.linkdata.org/idea/idea1s1262i ● マッピングイベント（2015/10/17） – バリアフリーや店舗に関する地理情報を収集 – http://idea.linkdata.org/idea/idea1s1273i これらを踏まえ、新たなアプリやサービスの創出を目指す
- 5. 奈良オープンデータハッカソンとは 過去の活動の成果を踏まえ、オープンデータを利用し、 ArduinoやRapsberry PI等の小型IoTデバイスも組み合わせ、 より良い未来の奈良市を目指した開発を行います。 日時： 2015年12月5日（土）10:00 - 6日（日）18:00 場所： 奈良市 きらっ都・奈良 3階会議室 現在、申し込みサイトは準備中です。しばらくお待ちください。
- 6. ということで
- 8. GoogleMapAPIとは Google Maps API は、Javascript / AJAX を用いる地図サービス、 ◆主な機能 Webページ上に世界中の地図が掲載可能。 地図上にマーカー表示、線などの図形描画、文字や画像を重ねて表示が可能 ルート検索などのAPI、Android/iOS等モバイル端末用API ◆主な注意事項 ライセンス ・営利目的利用は要契約 ・個人利用でも、印刷物の配布禁止、キャプチャー画像の利用禁止、 一定数のアクセスを超えると有料など 詳しくは https://developers.google.com/maps/?hl=ja などを参照
- 9. Step0：ブラウザの確認 http://www.code4nara.org/151111/sample.zip を展開したフォルダを、エクスプローラ／Finder等で開いて sample00.html をダブルクリック or 任意のブラウザを立ち上げ、ドラッグ＆ドロップ ブラウザで 「サンプル表示」 と表示されればＯＫ ブラウザ表示
- 11. Step1：地図を表示してみよう sample01.html をテキストエディタで開いてみよう。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var lat= 34.6789322; // 緯度 var lon=135.8173808; // 経度 var zoomLevel=16; // ズームレベル google.maps.event.addDomListener(window, 'load', function() { var map = document.getElementById("gmap"); var options = { zoom: zoomLevel, center: new google.maps.LatLng(lat, lon), mapTypeId: google.maps.MapTypeId.ROADMAP }; new google.maps.Map(map, options); }); </script> false:端末センサーを使わない googleMapAPIを使う宣言、 <head></head>内に書く マップを作製 オプション設定 id=gmapに作成 body に <div id=“gmap”>...</div> が必要 テキストエディタ
- 12. Step2:任意の場所を表示しよう 課題１：位置を変更 緯度(lat)と経度(lon)を変更すると地図の場所が変わります。 （参考）緯度経度の調べ方：https://www.google.co.jp/maps/ <script type="text/javascript"> lat= 34.6789322; // 緯度 lon=135.8173808; // 経度 zoomLevel=16; // ズームレベル 緯度 経度 ズーム
- 13. Step3:ピン（マーカー）を立て見よう sample_marker1.html をブラウザで表示 課題２：マーカーの位置を変えてみよう ヒント テキストエディタを使ってソースを編集します。 sample_marker1.html は地図中心とマーカー位置が同じ ⇒ 緯度 lat2 経度 lon2 を latlon2 に代入すると ブラウザ表示 テキストエディタ
- 14. Step4:実際のデータを使ってみよう 奈良マッピングイベントで収集したデータは （現在準備中です） のテキスト情報から抽出し、csv形式でダウンロードできます。 （ＩＤ/パスワード XXXX/YYYY） 今回は sampledata.csv を使います。 文字コードはSJIS
- 16. Step4:実際のデータを使ってみよう 課題３ 任意の位置をマーカーで表示してみよう ファイルを読み込む or WebＡＰＩ経由などでアクセスすべき ですが、時間が短いので直接座標を書きましょう。 ヒント 緯度と経度の単位が違う点に注意 手計算でも、 javascript で式を書いてもＯＫ
- 17. Step5:マーカーに文字を出す マーカーにマウスオーバー（マウスの矢印を重ねる）で、 文字を出すことができます。 サンプル sample_marker2.html の以下の部分 var marker = new google.maps.Marker({ position: latlon2, map: mapObj, title: "きらっと奈良n奈良ハッカソン会場" });
- 18. Step6:地図上に線を描く サンプル sample_line1.html の以下の部分 // ラインを引く座標配列を作成 var points = [ new google.maps.LatLng(34.678, 135.817), new google.maps.LatLng(34.678, 135.815), new google.maps.LatLng(34.676, 135.815), new google.maps.LatLng(34.676, 135.817), new google.maps.LatLng(34.677, 135.816), new google.maps.LatLng(34.678, 135.817) ]; // ライン作成 var polyLineOptions = { path: points, strokeWeight: 5, strokeColor: "#0000ff", strokeOpacity: "0.5" }; // ラインを描画 var poly = new google.maps.Polyline(polyLineOptions); poly.setMap(mapObj
- 20. （参考）類似の地図API/ライブラリ ● いつもNAVI API （ゼンリンデータコム） http://www.zenrin-datacom.net/business/develop/apicgi/ ● YOLP （Yahoo Open Data Platform） http://developer.yahoo.co.jp/webapi/map/ ● Mapfan http://www.mapfan.com/ ● Openlayers （Javascript ライブラリ） http://openlayers.org/ ● Leaflet （Javascript ライブラリ） http://leafletjs.com/
- 21. （参考）OpenStreetMap関連サイト ● OpenStreetMap http://www.openstreetmap.org/ （本家） http://www.openstreetmap.jp/ （日本） ● OverPass API http://overpass-turbo.eu/ ● umap http://umap.openstreetmap.fr/ja/ ● Jauntful https://jauntful.com/