GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

「 Google Map API 」 一覧

道路上のマーカー

「ポケモンGOみたいなゲーム作って〜」と言われたときのために、巨人(Google)の力をかりて、道路上にランダムにマーカーを設置する。

2016/08/05   -Google Map API, leaflet.js, turf.js

そろそろ、世間では「ポケモンGOみたいの作ってー作ってー」という無茶振りと、それに伴うエンジニアの悲鳴が聞こえてくる季節が近づいてきたかと思います。そこで、いつそんな無茶振りが来ても対応できるように、 …

群馬県交通死亡事故発生マップ

群馬県の交通死亡事故発生箇所データをヒートマップにして表示してみた。

2016/05/24   -D3v3, Google Map API, maps

demo 群馬県が待望のオープンデータを開始してくれたので、早速公開されているデータを使ってみました。 防犯・交通事故情報の中から「交通死亡事故発生場所」を取得して地図上に表示しています。 一応スマホ …

smoothGeoPath

地図上のラインを滑らかに表示する

2015/11/10   -D3v3, Google Map API, 未分類

example geojsonのラインを補完して滑らかに表示してみました。 ちょこっと解説 棒グラフなどを滑らかに表示する際に使うinterpolateメソッドをgeojsonから再生されたパスに適用 …

leaflet and Google custom style

Leaflet.jsでGoogle Maps を表示する

2015/07/16   -Google Map API, leaflet.js

「Leafletでグーグルマップって使えないんですか?」という質問が多かったので書いておきます。 Google Maps Tileを表示する LeafletでGoogle Mapsの地図を表示するには …

Street View Image Search

ストリートビューの画像を使いたいときは「Street View Image API」を使いましょう。

2015/06/17   -Google Map API

Google Street View Image APIを使うと、JavaScriptを使用せずにWeb​​ページにスタティック(静的)なストリートビューのパノラマやサムネイルを埋め込むことができます …

Graphically Edit a Data Layer

Google Maps APIにGeoJSONを編集する機能が付いたので、サクッとGeoJSONエディタ作ってみた。

2015/04/21   -Google Map API, webix

以前、Google Map上にGeoJSONを表示するデータレイヤーについてお伝えしましたが、新たに編集機能が搭載されたそうです。 Google Geo Developers Blog: Intera …

Google Maps GeoJSON Grid

地図上にグリッドを書いて色塗り(模索中)

2015/02/03   -Google Map API

example 100m × 100mのグリッドをGoogle Maps上に表示して、各セルをランダムに色塗りしています。 地図上にグリッドを表示するにはいくつか選択肢があって、「グリッドをそもそもデ …

阪神・淡路大震災「1.17の記録」位置情報付加

[Fusion Tables]阪神・淡路大震災の記録写真(オープンデータ)に位置情報付加してみた。

2015/01/20   -data, Google Map API

阪神・淡路大震災「1.17の記録」の画像情報一覧ファイル(20150120101213.csv)をGoogle Fusion Tablesにインポートし、placeの値をジオコーディングにかけて位置情 …

intel map風スタイル

[GMaps API v3] Ingress Intel Map Style

2015/01/14   -Google Map API

example 小ネタ。 Ingress Intel Map風のスタイルでGoogleマップを表示します。 ポータルやコントロールフィールドがないと寂しい感じ。 サンプル [crayon-58af48 …

群馬県 小学校区 ボロノイ図 重ね合わせ

群馬県の小学校区とボロノイ図を重ね合わせてみた

2015/01/06   -D3v3, Google Map API

example 以前紹介した「最適配置の数理」という本の中で、学校区の範囲とボロノイ分割区域とを比較して、そのズレを検討した研究事例というのが載っていたので群馬県の小学校の上にボロノイ図をオーバレイし …

Excel2Gmap

「E2D3」を使ってExcel上にGoogle Mapsを表示してみた。

2014/10/30   -E2D3, Google Map API

昨日に引き続き「E2D3」を弄ってます。 Google Maps表示してみた 昨日の記事に書いた「これ多分D3.js以外にもいろいろ使えますね」の複線回収。 シート上の選択エリアからlat,lngフィ …

FusionTables

複数のFusion Tablesを一つの地図上に重ねて表示する。

2014/10/14   -Google Map API

下記は群馬県のバスルートデータとバス停留所データのFusion Tablesを重ねて表示した例。 example 以前も紹介したことがあるFusion Tables。手軽に地理情報の視覚化が行えて非常 …

Google Mapにマスクをかける

【D3.js】Google Mapにsvgを使ってマスクをかける

2014/10/01   -D3v3, Google Map API

example 実は以前、ClipPathを使って似たようなことをやったことがあるのですが、Mask機能を使った方が綺麗に切り抜けたので掲載します。 地図上にオーバーレイしたSVGにマスクをかけるテク …

snap.js + Google Maps API(スワイプイベントをmap要素に適用しない)

snap.jsを用いてサイドメニュー付きの地図を作成してみています。 それなりにサクサク動いて便利なのですが、地図を移動する際のタッチが親要素にsnap.jsのスワイプイベントとして伝播してしまい、地 …

Google Map上に棒グラフを表示する

【D3.js】Google Map上に棒グラフを表示する

2014/09/15   -D3v3, Google Map API

example 円グラフに引き続き、棒グラフを地図上に表示してみました。 棒グラフは高さのスケールを設定するのが難しいですね。 サンプル 今回も、Google Maps APIのdrawメソッド内だけ …

google map上に円グラフを表示する

【D3.js】Google Map上に円グラフを表示する

2014/09/05   -D3v3, Google Map API

example 以前,前橋のオープンデータを使ってシンボルマップを作成しましたが、同じ「町丁ごとの年齢別人口構成推移」データを使って、男女比を表す円グラフを地図上に表示してみました。 サンプル コード …