本資料は、「北海道オープンデータハッカソン、サッポロ・オープンデータGIS大賞in札幌」において、ハッカソンでコーディングを行うヒント集です。 GoogleMapsとは違う国土地理院等の地図を利用する事が推奨されています。OpenLayers, LeafletといったGoogleMapsとは違うライブラリを使った場合の実装例を載せました。短時間で実装方法がわからない場合のヒントとしてお使いください。
道路ネットワークのオープンデータが無いため、この機能はGoogleMapsを利用するしかありません。ここでは、単純にルート検索の結果を表示するリンクの書き方を提案します。 https://www.google.com/maps?saddr=[出発地点]&daddr=[目的地]&dirflq=[移動手段]という書き方をします。[出発地点], [目的地],[移動手段]は、それぞれの用途に合わせて書き換えてください。移動手段は、d =車, w =歩き, t =電車, b =自転車になります。例1 ）現在地から車で小樽水族館に行く場合https://www.google.com/maps?saddr=現在地&daddr=小樽水族館&dirflg=d例２）緯度経度で出発地点と目的地を指定https://www.google.com/maps?saddr=43.067823, 141.440573&daddr=43.081470, 141.306693&dirflg=t例３）リンクとしてHTMLに埋め込む<a href="https://www.google.com/maps?saddr=現在地&daddr=クリプトンフューチャーメディア&dirflg=w">クリプトンフューチャーメディアに行く</a>
<script type="text/javascript"> var userLang = navigator.language || navigator.userLanguage; alert ("The language is: " + userLang); </script>言語コードに関しては、こちらhttps://msdn.microsoft.com/ja-jp/library/cc392381.aspx?f=255&MSPPError=-214721 7396翻訳APIに関してhttp://qiita.com/kemayako/items/21fe36005e6e729aff77
住所の情報から、位置情報を割り当てるためのサービスです。サービスフリーで使用できるものは少ないです。 http://newspat.csis.u-tokyo.ac.jp/geocode-cgi/geocode.cgi?action=startから、CSV形式（ ,区切り）のデータを与えて、緯度経度情報を付加してもらいます。 GoogleMapsにポイントとしてデータが登録されている場合ークをクリックし「KMLをダウンロード」を選択札幌市収容避難場所(... □ 横のKMLというテキスト形式で、データをダウンロードする。データを整形するためにCSV形式に変換するためには、kml2csvというキーワードで検索します。見つかったオンラインの変換サイトは、下記。 http://www.monster.com.tw/kml2csv後ほどアイコンの見栄えを制御するために、ここではcsv形式に変換しましょう。
Leafletを使った例https://github.com/gsi-cyberjapan/gsitiles-leaflet/blob/gh-pages/index.html上記コードの簡単な解説… <body> <!--地図はmapというIDのdiv要素内に描画される--> <div id="map"></div> <script> // LはLeafletというライブラリvar map = L.map('map'); //赤字は、国土地理院のタイル・サービスのURL // http://maps.gsi.go.jp/development/ichiran.htmlに書かれている地図が利用可能L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { //青字は、説明のリンク（このまま書いて下さい） attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }).addTo(map); //地図を表示する中心位置を緯度経度で指定、縮尺は番号で指定//札幌市中心でズームさせてみました。 map.setView([43.063882, 141.345534], 12); </script> </body>
（「国土地理院地図を使う」の続きになります）各所からダウンロードしたファイル、csv, kml, geoJson等、多用な形式のアイコンをロードします。 Google ChromeのBrowserではCORSというエラーが発生します。対処法はこちら。 http://qiita.com/cigalecigales/items/33afaa42f91542ffa62eアイコンをロードするライブラリhttps://github.com/mapbox/leaflet-omnivoreを利用します。 leaflet.jsというライブラリを指定した場所の下に赤字の行を追加します。 <head> <meta charset="UTF-8"> <title>GSI Tiles on Leaflet</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script src='http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore. min.js'></script> <style> body {padding: 0; margin: 0} html, body, #map {height: 100%; width: 100%;} </style> </head>次に、表示位置を指定した場所の前にcsvファイルをロードするコードを追加します。緯度・経度の項目名をlatfield, lonfieldに指定しています。 omnivore.csv('避難場所.csv',{ latfield: 'Latitude', lonfield: 'Longitude', delimiter: ','}).addTo(map); map.setView([43.063882, 141.345534], 12);
（「国土地理院地図を使う」「地図にアイコンを表示する」の続きになります）使用するアイコンを生成しますllアイコンの入れ物var schoolIcon = (); //ロードするアイコンのファイル名iconName = [ 'school1.png', 'school2.png', 'school3.png' ]; //それぞれのアイコンファイルから、アイコンを作成iconName.forEach(function (png) { schoolIcon.push(new L.Icon({ iconUrl: png, iconSize: [32, 32], iconAnchor: [16, 16], popupAnchor: [0, 0] })) }); CSVをロードするコードに、ロードが完了した時に処理する関数を追記します。その関数内で、CSVの”Name”という項目に含まれる文字で、アイコンを割り当ててみます。 omnivore.csv( '避難場所.csv', {latfield: 'Latitude', lonfield: 'Longitude', delimiter: ','} ).on('ready', function(layer) { this.eachLayer(function(marker) { //名前に高校という文字が含まれていれば、school3.pngのアイコンを割り当てるif (marker.toGeoJSON().properties.Name.includes('高校')) { marker.setIcon(schoolIcon[2]); //名前に小学校という文字が含まれていれば、school1.pngのアイコンを割り当てる} else if(marker.toGeoJSON().properties.Name.includes('小学校')) { marker.setIcon(schoolIcon[0]); //それ以外は、school2.pngのアイコンを割り当てる} else { marker.setIcon(schoolIcon[1]); } //ポップアップに表示する項目(CSVのDescriptionという項目)を割り当てます。 marker.bindPopup(marker.toGeoJSON().properties.Description); }); }) .addTo(map);
var schoolLayer = omnivore.csv( '避難場所.csv', {latfield: 'Latitude', lonfield: 'Longitude', delimiter: ','} ).on('ready', function(layer) { this.eachLayer(function(marker) { //名前に高校という文字が含まれていれば、school3.pngのアイコンを割り当てるif (marker.toGeoJSON().properties.Name.includes('高校')) { marker.setIcon(schoolIcon[2]); //名前に小学校という文字が含まれていれば、school1.pngのアイコンを割り当てる。 } else if(marker.toGeoJSON().properties.Name.includes('小学校')) { marker.setIcon(schoolIcon[0]); //それ以外は、school2.pngのアイコンを割り当てる} else { marker.setIcon(schoolIcon[1]); } //ポップアップに表示する項目(CSVのDescriptionという項目)を割り当てます。 marker.bindPopup(marker.toGeoJSON().properties.Description); }); }).addTo(map); //レイヤを削除します。 alert('shown'); map.removeLayer(schoolLayer);