【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
ここ最近のWeb地図周辺の動向をまとめてみた
Web地図の歴史というのは Google Maps 登場以前と登場後に分けられるのですが、2015年現在、まさにGoogle Maps登場と同じぐらいの変革がWeb地図の世界に訪れているのではないか？ と勝手に思っているので自分の観測範囲内でまとめてみました。 概要 簡単に要点をまとめると、CanvasとかSVGとかWebGLとかブラウザ周りの表現力の進化がWeb地図にも影響を及ぼしていて、そこにGeoJSONのようなそれまでGISなどに疎かったフロントエンドエンジニアにも気軽に扱うことができるフォーマットが普及し始めたことと、降って湧いたようなデータビジュアライゼーションブームなどによって爆発的にエコシステムが増殖し、さらにフロントエンド回りの新技術、仮想DOMとか Web Components とかFRPだとかもろもろいろいろ絡まってよくわからないけど地味に凄いことになっています。 G
deck.glでmapboxサービス以外のベースマップを使用する
概要 そもそもdeck.glにはデフォルトで表示されるベースマップといったものはありませんが、公式のサンプルの多くがdeck.glとreact-map-glを組み合わせて使っているケースが多いため、deck.glではベースマップを使うためにMapboxサービスへの登録が必須であるような誤解があるようです。 他のサービスのベースマップを使う deck.glでmapbox以外のベースマップを使用する方法はいろいろあるのですが、ここではTIleLayerを利用した例を紹介します。 TileLayerとは TileLayer:Deck.gl API reference TileLayerはサードパーティのラスタタイル(地図タイル)を読み込んで表示するためのレイヤーです。 サンプルコード 解説 他のマップライブラリで外部の地図タイルを読み込んだことがある方であればあまり迷うことはないかと思います。
Leaflet.jsで作成した地図上にお天気情報をオーバーレイする
以前、「Google Map上に雲と天気を表示する」という記事を書きましたが、残念なことに「お天気＆雲レイヤ」と「Panoramioレイヤ」は2015年に廃止されるそうなので、その代案として「OpenWeatherMap API」を利用してみました。 OpenWeatherMapでは、様々な気象データが取得できるのですが、今回はAPI keyも必要なく簡単に使える画像タイルデータをLeaflet.jsに読み込んで表示しています。 サンプル OpenWeatherMapから「降水予測」「雲」「気圧図」のタイル画像を読み込み地図上にオーバーレイして表示しています。 example //オープンストリートマップレイヤー設定 var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '©
GeoJSONを使いこなすためのWebサービスまとめ
GitHubが地図表示に対応したり、Google Maps APIでも直接読み込めるようになったりと、着々と利用が進むGeoJSON。 D3.jsで地理情報を視覚化する際にも欠かせないものですが、そんなGeoJSONを扱うのに便利なWebサービスを集めてみました。 資料 GeoJSON フォーマット仕様 GeoJSONの仕組みを理解したい場合は、まずこれを読みましょう。 コンバーター ・mapshaper 地理情報の簡素化を行うためのサービスですが、Shape,geojson,topojsonを相互に変換するWebサービスとしても利用できます。 ・mapbox/csv2geojson 緯度経度を含んだcsvファイルをGeoJSONに変換するnode.jsツール。ポイントデータのみならず、ラインデータやポリゴンデータへの変換も可能。フロントエンドでも動作し、web上でコンバートを提供している
まだAPIで消耗してるの？ サクッとデータが欲しいなら「Blockspring」を使おう！ – GUNMA GIS GEEK
各サービスのAPIの仕様なんて覚えてらんねぇ！という人は是非。 Blockspringとは Blockspringは、TwitterやFacebookなどのソーシャルメディアをはじめ、Amazon、Youtubeなど様々なサービスからのデータを、プログラマがAPIを直接触ることなく表データとして取得することができるサービスです。サービスごとに規格の異なるWebAPIを利用するには学習コストが結構かかるわけですが、Blockspringはそういったサービスとプログラマーの間に立ち、データ取得のインターフェイスを抽象化してくれます。 非常に沢山のサービスに対応しています。 「ちょこっとデータが欲しいだけなのに、サービス毎のWebAPIを勉強するのもう疲れた」 そんな時はBlockspringを利用してみてください。 インストール BlockspringはGoogle スプレッドシートとエクセル
「E2D3」を使ってExcel上にGoogle Mapsを表示してみた。 – GUNMA GIS GEEK
昨日に引き続き「E2D3」を弄ってます。 Google Maps表示してみた 昨日の記事に書いた「これ多分D3.js以外にもいろいろ使えますね」の複線回収。 シート上の選択エリアからlat,lngフィールドを読み取りGoogle Maps上にマーカーでプロットするアプリです。 仕組みとしてはE2D3.jsで取得したデータをGeoJSONに変換してGoogle Mapsに渡しています。 多分Gmapをこんな感じで使うのは規約上駄目だと思うので、いづれleaflet.js版を作ろうと思います。 サンプルコード //サンプルデータ(県庁所在地) var sample_data = [ [ 'code', 'pref' , 'city', 'lat', 'lng'], [1,"北海道","札幌市",43.063968,141.347899], [2,"青森県","青森市",40.824623,14
[DataTables] テキストボックスを敷き詰めたテーブルで、フォーカスのあたっているセルの位置を取得したい。
昨日に引き続き、テーブルにソート機能や、フィルタリング機能を付けたいときに、とても便利なプラグイン「DataTables」に関するメモ。 <td>に<input type=”text”>を敷き詰めるってことをやったりすると、フォーカスのあたっているセルがテーブルの何行目/何桁目にあるのか、その位置を知りたいって時があります。 DataTablesには位置を取得するためのメソッド(fnGetPosition)が提供されているので、簡単にセルの位置を取得することができます。 例えば、フォーカスが当たっているセルが何行目にあるかを取得したい場合は以下。 myTable = $('#example').dataTable( { //初期設定 } ); //フォーカスのあたっている行(td)を取得 var currentTR = $('td > input:focus', myTable).pare
![[DataTables] テキストボックスを敷き詰めたテーブルで、フォーカスのあたっているセルの位置を取得したい。](https://cdn-ak-scissors.b.st-hatena.com/image/square/44c79880b222521d992bbb34d4311772e4505f6d/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2012%2F08%2Fdatatables20140325-2.jpg)
FullCalendar のカスタマイズ
カレンダーを作成するのに便利なjQueryのプラグイン「FullCalendar」を使用する際に行ったカスタマイズのメモ書きです。 FullCalendar DEMO before after 使用したのは、fullcalendarのver 1.5.3です。 ラベルの変更 monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'], monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], dayNames: ['Sunday','Monday','Tuesday','Wednes
Google Map上にヒートマップを表示する
国土数値情報サイトからダウンロードした都道府県地価調査データ(点)を元にGoogle Map上に群馬県の地価データをヒートマップで表示しました。 国土数値情報からダウンロードしたデータをKMLにコンバートし、さらにJavascriptの配列に変更(手動)してます。 （ぶっちゃけJPGIS(XML)から、直接JavaScriptの配列に変換した方が楽だったような気も…） KML形式への変換の仕方は以下の記事を参照してください。 Google Map上に学校区情報（国土数値情報）を表示する ※追記 Quantum GISでgeoJSON形式で出力することができるので、そっちを使う方がらくでした。 データさえできてしまえば、ヒートマップを表示するのは簡単です。 HeatmapLayerを使用するには、libraries=visualizationを付加してGoogle Map APIを読み込んで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
