Fetch APIのStream機能を使ってデータを読み込みながら地図を描画する
地理空間データはどうしてもデータサイズが大きくなりがちです。 通常のデータ読み込みでは、読み込みが終わるまで地図の描画を始めることができないのですが、Fetch APIのReadableStreamを使うことで、「一部データを読み込んでは地図の一部分を描画する」という分割したレンダリングを実装することができます。 サンプルコード 約50MBのポリゴンデータを読み込みながら逐次描画しています。 DEMO //地理データをstreamを使って読み込む fetch("city.txt").then((response) => { const reader = response.body.getReader(); const stream = new ReadableStream({ start(controller) { function push() { reader.read().then(
JavaScriptで距離計算など地理情報処理を行うライブラリ「Geolib」
緯度経度のデータから、２点間の距離を求めたり、中心点の算出などが行えるライブラリです。 Geolib 100%pureJavascriptで書かれているので、node.jsでもフロントエンドでも使用できます。 node.jsでのインストール方法は以下。 var geolib = require('geolib'); //２点間の距離を求める var distance = geolib.getDistance( {latitude: 36.322356, longitude: 139.013057}, //高崎駅 {latitude: 36.383191, longitude: 139.073177} //前橋駅 ); console.log(distance+"m"); //->8642m //コンバート console.log(geolib.convertUnit('km', dista
まるでシムシティのような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
node.jsでファイル監視を手軽に行えるモジュール「chokidar」
node.jsにはファイル監視を行えるAPI「fs.watch()」や「fs.watchFile()」がありますが、なんだかんだいろいろめんどくさかったりします。 【参考】Node.js の fs.watch() と fs.watchFile() の違い – てっく煮ブログ そういったメンドクサイ部分を綺麗にラップしてファイル監視を手軽に行えるようにしたモジュールが「chokidar」です。 サンプル スクリプトを起動したカレントディレクトリ(子ディレクトリを含む)を監視して、ファイルの追加や削除、編集などが行われたら通知します。 var chokidar = require('chokidar') var watcher = chokidar.watch('.', { //watch対象ディレクトリorファイル ignored: /[/\]./, //無視する対象 persistent:
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
あなたもKomodo Editを使いたくなる、10のTIPS
時の流れは残酷なもので、2019年現在、私はVisual Studio Codeへ移行しました。 布教のかいなく、周囲ではまったく愛好者が増えない「Komodeo Edit」。 悲しいので人によっては心をくすぐられるかもしれない(?)小技を集めてみました。「Komodo Editって何？」という方は、過去の記事を先にご覧ください。 Komode Edit 記事一覧 以下「それvim…」とか「それema…」とか禁止。 Komode Edit Tips 1.URLをクリックで開く ドキュメント内のURLを「Ctrl」ボタンを押しながらクリックすると、デフォルトブラウザでURLを開きます。 相対パスの場合は、エディタで対象ファイルを開きます。 2.ファイル毎のエディタ設定 ファイルツリーに表示されているファイル上で右クリック「Properties」を選択するとファイル毎の詳細設定が行えます。 イ
データビジュアライゼーション「d3.js」 | GUNMA GIS GEEK
最近、「データビジュアライゼーション」に興味を持ち始め d3.js というjavascriptのデータビジュアライゼーションライブラリの使い方を学び始めました。海外では、結構有名なライブラリらいしいのですが、日本では利用者が少ないようなので、勉強がてら紹介をしてみたいと思います。 d3.js http://d3js.org/ 「データビジュアライゼーション」については以下を。 データビジュアライゼーションの美 ■データ駆動ドキュメント d3.jsは、データを基にDOM(ドキュメントオブジェクトモデル）を操作するためのライブラリです。 データとDOMのエレメントを結びつけ、データの変化をドキュメントへと反映させることができます。 d3.jsは、配列を渡すだけでグラフィカルな結果を出力してくれるようなフレームワークではありません。 その代わりに、柔軟なカスタマイズが可能で、webの標準の機能（
D3.jsはなぜ人気があるのか？ そして、なぜ難しいのか？
個人的なD3愛についてはこちらに。 日本ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。 JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか？ その理由を考えてみました。 結論 なんかスッゲー長くなったので先に結論を書いておきます。 他のChartライブラリより柔軟性が高いコードが簡潔に書けるJavaScriptの面白さを味わえる理解が進む程に惹かれる設計の妙 以上。以下、詳細。 柔軟性 データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを
Komodo Editをとりあえず使ってみるための基本的な設定 – GUNMA GIS GEEK
時の流れは残酷なもので、2019年現在、私はVisual Studio Codeへ移行しました。 エディタをKomodo Editに変えた10の理由 上記記事で紹介したKomodo Editを、とりあえず使ってみるために必要な、基本的な設定などを記載してみました。 「メニュー」→「Edit」→「Preferences」から、様々な設定を行うことができます。 １．日本語テキストに関する設定 まずは、日本語がちゃんと書けないと困るのでその設定を。 フォントの設定は「Fonts and Colors」で。 Komodo Editには”ＭＳ ゴシック”などの日本語名のフォントを指定すると正しく反映されないという問題があります。とりあえずWindows なら「System」を選らんでおけば問題ないですが、日本語名のフォントを設定したい場合は、下記サイトが参考になると思います。 Komodo Edit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Komodo Edit]マクロを使う – GUNMA GIS GEEK
[Komodo Edit]JSHint、JSLintを使用する – GUNMA GIS GEEK
[Komodo Edit] スニペットを使う – GUNMA GIS GEEK