GUNMA GIS GEEK

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

「 leaflet.js 」 一覧

バイナリベクトルタイル

バイナリベクトルタイルの作り方

2017/02/09   -leaflet.js

「全国のガソリンスタンドの位置を地図上にプロットしてみた。」で作成したバイナリベクトルタイルの作業工程メモです。 バイナリベクトルタイルとは 巨大なGeoJSONを分割しタイル化することで必要な情報だ …

ガソリンスタンドマップ

全国のガソリンスタンドの位置を地図上にプロットしてみた。

2017/02/09   -leaflet.js, maps

大量のデータを地図上にマッピングする練習として、国土数値情報から取得した平成27年の「燃料給油所データ」をすべて地図上にプロットしてみました。 密度の高い地域と、周囲に全然ガソリンを給油できる場所が見 …

駅すぱあと路線図API Hacks! D3.jsを使ってSVGをオーバーレイする。

2016/10/03   -D3v4, leaflet.js, turf.js

新しい地図サービスが始まったとき、誰もが気になるのは「この地図サービスでD3.jsは使えるのだろうか?」という点でしょう。心配ありません。駅すぱあと路線図でD3.jsは使えますよ! 日本全国シームレス …

道路上のマーカー

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

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

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

FlashAir

FlashAirを使って、ネットに繋がっていなくてもつかえる地図アプリを作る

2016/06/08   -FlashAir, leaflet.js

Gunma.web#23 のLTで知ってからずっと気になっていたFlashAirを買いました。 FlashAirとは FlashAirは、東芝から発売されている「無線LAN内蔵SDカード」です。 無線 …

重み付けボロノイ図

【D3.js】重み付けボロノイ図

2016/04/25   -D3v3, leaflet.js

example 重み付けボロノイ図のサンプルを作った。 通常のボロノイ図は母点間に垂直二等分線を引いていく形で作られるが、重み付けボロノイ図は特定の値でもって二等分ではなく内外にラインを移動させること …

日本の地形地図

日本の典型地形情報をGoogleの地形図の上に重ねてみた。

2016/04/04   -leaflet.js, maps

「日本の典型地形ウェブサイト」をリニューアル ~地理院地図との連携でより分かりやすく~|国土地理院 「日本の典型地形」というデータが地理院地図上で見ることができるようになったというニュースがあったので …

余命地図

あなたの余命はあと何年? 余命地図を作ってみた。

2016/03/18   -D3v3, datavis, leaflet.js

厚生労働省の「平成22年市区町村別生命表」のデータを用いて「余命地図」なるものを作成してみました。あくまでネタとしてお楽しみください。 右上のセレクトボックスで、年代と性別を選択すると各市区町村での平 …

1936年の日本国立鉄道地図

1936年の日本国立鉄道地図

2016/02/23   -leaflet.js, maps

Fullscreen 1936年に作成された日本のカラフルな鉄道地図が、海外のサイトで公開されていたのでleaflet上に乗せてみました。 時代柄、韓国、台湾、満州などの鉄道地図も掲載されています。 …

家計を主に支える者の年収マップ

年収300万未満都市マップ、作ってみた。

2015/11/26   -D3v3, datavis, leaflet.js

むかし、「未満都市」というドラマがありましたね。まぁ、関係ないですけど。 ネットをさまよっていたら下記のような記事をみつけました。 年収300万円世帯と1000万円世帯では、子どもの学力がはるかに違う …

正しいだけの地図では物足りないなら「Project Linework」を使ってみよう!

2015/07/24   -data, leaflet.js

Project Linework 『Cartographyにおいてlinework(海岸線の形、川の通り道、国との境界線など)が似たようなものになるのはつまらない。地図スケールに基づいて単純化されたラ …

高崎市

平成の大合併、以前と以後の行政区を比較してみた。

2015/07/24   -data, leaflet.js

筑波大学の「歴史地域統計データ」というサイトから平成の大合併以前の行政区界データ(1990年)がダウンロードできたので、現在(2014年)の行政区界と重ねてあの頃の思い出に浸ってみました。 examp …

leaflet and Google custom style

Leaflet.jsでGoogle Maps を表示する

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

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

charlotte Maps

Charlotte(シャーロット)2話に出てきた地図のleaflet版作った。

2015/07/13   -CSS, leaflet.js

地理院地図……お前、地理院地図じゃないか! というわけで、leaflet版作ってみました。 ズームもパンもできるよ!\(^ω^\)( /^ω^)/ ホントは地図の向きも合わせようかと思ったのですが、見 …

Japan Industrial Revolution data

「明治日本の産業革命遺産」のGeoJSONデータ

2015/07/07   -data, leaflet.js

公開されていたKMLを変換してGeoJSONデータを作りました。 Gistに上げてあります。ついでにLeafletでのサンプルも。 明治日本の産業革命遺産 GeoJSON サンプル example

大阪市 ひったくり事件発生個所

大阪市のオープンデータを使って、ひったくり事件発生個所を視覚化してみた。

2015/06/29   -D3v3, datavis, leaflet.js

[2016/6/8 data update] 以前、大阪都構想住民投票結果の地図を作った際に、大阪市のオープンデータの中に犯罪発生個所データがあるのを発見したので、そのなかから「ひったくり発生個所」デ …