leafletでlayerの重なり順を調整するためのメモ。

leafletでlayerの重なり順を調整しようとして、ググると以下のページが役に立ちそうだったのでメモさせていただきます。
http://shimz.me/blog/leaflet-js/3671

こちらの「GUNMA GIS GEEK」ブログ様には、マップ関連の情報で大変お世話になっております。
多謝。

 ：：：：：：：：：：：：：：：：：：：：

追記です。
自分がやりたいことは、leafletのサンプルコードを借りてきたものから、「layer.bringToFront()」をコメントアウトすることで実現できました。

Meteorは、かなり楽しい。Mongoも。

Meteorというnode.jsで動く、大変面白いライブラリを知った。
今はver1.1。

リアルタイムにデータが複数ブラウザやマシン上で更新される、
あのnode.jsのページリロードなし同期の機能が、
かなり簡単に実装できる。

「体感！JavaScriptで超速アプリケーション開発 －Meteor完全解説」
http://gihyo.jp/dev/serial/01/meteor?ard=1430989100
あたりを読むと、概要がつかめる。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

https://www.meteor.com
が本家サイト。
かなり開発陣も気合が入っている印象。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Mac,Linuxだとterminal上で、インストールも簡単。
アプリのテンプレート作成も、コマンドで一発。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

todoアプリ作成の解説があり、
解説のコードを拾っていくと、パソコンでもiPhoneでも簡単に同期できるアプリができた。
meteor.com上に、簡単にdeployできて、試せる。それがとても気軽で楽しい。

以下がチュートリアル。
https://www.meteor.com/install

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

MongoDBをデフォルトで利用でき、Mongoも気になっていたので学習開始。
コマンドラインで、meteorアプリが起動中は、別terminal窓を開いていじれる。
「MongoDBの薄い本」という無料ドキュメントがあり、わかりやすかった。
http://www.cuspy.org/diary/2012-04-17/the-little-mongodb-book-ja.pdf

DBを最初からスキーマ設定なしで、気軽に作っていけるのがいい。
薄い本で、基本が学べるので、コマンドラインで楽しむのが吉。

リレーショナルDBとの呼び方の違いが最初、分かりにくかった。
以下、大体の対応表
・データベースは、Mongoでもデータベース
・テーブルは、Mongoではコレクション
・カラムは、Mongoではフィールド
・行は、Mongoではドキュメント

完全に一致するものでもないので、用語を変えた様子。
まあ、JSON形式での記述ができるので、確かにリレーショナルデータベースの概念とは違って見える。

一つのカラム内に配列を突っ込めたり、オブジェクトを突っ込めるという感じが柔軟ですごい。

JavaScript本質理解に役立つ二冊（「開眼本」と「忍者本」）

JavaScriptには、様々な理解しにくいポイントがあります。
それらのポイントを簡潔にこの「開眼！JavaScript」はまとめて解説してくれています。
良書。



もう一冊、JavaScript理解にお勧めなのが、かのjQuery開発者のJohn Resig氏による「JavaScript Ninjaの極意」。しかし、こちらはかなり噛みごたえのある、理解にパワーのいる本です。



私は、最初この忍者本を読んだのですが、文章の長さと、サンプルのトリッキーさで若干躓き、この開眼本を手にしました。

開眼本は、大変簡潔で、だいたい網羅している中心トピックは同じなのですが、よりシンプルであるがゆえに、分かりやすかったです。

開眼本で基本を理解してから、やや冗長な忍者本に戻ると、そこで言われていることがより深く理解できました。

この二冊は、相補完し合う感じで、JavaScriptの本質を理解したい場合には有益かと思います。

JavaScriptの脱初学者と、他の言語をやってきた方のJavaScript理解に役立つ本として、この二冊はお勧めです。

npmで「sudo: npm: command not found」という警告が出たので対処。

node.jsで、npmにて-gオプションでグローバルにcentOSにモジュールをインストールしようとしたところ、
「sudo: npm: command not found」と怒られた。

いろいろ調べて、
sudoの権限を/stc/sudoerというファイルに/usr/local/bin（nodeの置き場）に置いていなかったことが原因だと判明。
参考になったのは以下。
http://stackoverflow.com/questions/4976658/on-ec2-sudo-node-command-not-found-but-node-without-sudo-is-ok

そんなわけで、vimでsudoにて開き、読み込み専用を無理やり編集して、

Defaults    secure_path = /sbin:/bin:/usr/sbin:/usr/bin

に /usr/local/bin　を追加してOKに。

よかった。

D3.jsで緯度経度をクリックで取得

D3ではありがたいことに、緯度経度をgeoJSONやtopoJSONからpixel変換した位置でmousedownにて取得することも可能。

そのためには、
 projection.invert(point)
を使う。
https://github.com/mbostock/d3/wiki/Geo-Projections#invert
x,yを[x,y]の形で配列で返してくれる。

d3.mouse(this)でmouseクリック位置を取得してくれるので、これを使用。

ついでに、mouseクリックしたあたりに緯度経度を表示させたいので、
d3.event.pageXをつかってその位置に表示。

で、できたコードは以下のような感じです。
（緯度経度が非常に低い桁数まで表示されるので、toFixedで適当に丸めています。）

d3.select("svg").on("mousedown.log", function(d) {
   var latlon = svg.selectAll(".result");
   latlon.remove();
   var pointNow = projection.invert(d3.mouse(this));
   var fixedX = Number(pointNow[0]).toFixed(3);
   var fixedY = Number(pointNow[1]).toFixed(3);
   svg.append("text").attr("class","result").attr("x",d3.event.pageX ).attr("y",d3.event.pageY).text("results:" + fixedX+","+fixedY);
  });

gitで無視されているファイルを~/.gitignore_global編集で復活

gitにて、index.htmlがいつの頃からかコミットされていないことに気づき、なぜか調べると、どうも.gitignore_globalに書き込んでしまったらしい。

そこで、macにてどこにそのファイルがあるか調べると、~/にあった。

そこで、
 ~/.gitignore_global
を編集して、そこにあったindex.htmlの記述を削除すると無事コミットできた。

よかった。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

それにしても、いったい、いつ.gitignore_globalに設定してしまったんだろう。。。。
sourceTreeを使っているが、何かのタイミングでやってしまったんでしょう。
普段はterminalでgitコマンドは使っていないので。

EaselJSでのcacheは、処理が目に見えて軽くなり、重要

EaselJSでは、cacheがレンダリングにおいては便利。

Shapeなどで複雑なベクター画像は、cacheを使うと吉。
特に移動などを使うとなると、かなりcacheが効いてくる様子。
Spriteには効果ない様子。ベクターなどに効果あり。

参考になったページ。
http://espelada.sakura.ne.jp/chaotic/post-190/　

「cashe」という書き方をして、私はハマりました。。。
「cache」が正しかった。「s 」じゃなく「c」。。。。
これは、かなりのローマ字綴りに慣れた日本人はハマりそう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Textのcacheは、なぜかx,yが0,0のところからのキャッシュ領域でないと覚えてくれなかった。
ShapeなどではそのShapeのあるx,y座標からの長方形を切り取るかたちでないとダメだったが。

Textのcacheは、0,0からの領域指定がキモ。重要でした。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

以下のページがかなり良い解説を書いてくださっている。
http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/

パフォーマンス向上の6つのコツ、みたいな。
そのTipsの最初は「Cache It!」。
やっぱりcacheですね。

以下は、canvasを二つ重ねる方法についての解説。
http://www.mikechambers.com/blog/2011/01/25/layering-multiple-canvas-elements-using-javascript-and-easeljs/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

cacheをすると、Shapeオブジェクトは、ちょっと輪郭がぼやける。
まあ、それほど気にならない程度であり、CPU負担は軽くなるのがわかるので、まあ良いですね。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

containerもcacheすると、いろいろベクター画像を描画したコンテナがかなり軽くなる。
CPUの荷重が目に見えて軽くなった。
cacheは素晴らしい。
単にsomeobject.cache()と書いて、領域を指定するだけですから、お手軽です。

特にTextをTweenさせる際には、cacheさせるとかなり処理が軽くなるのでオススメでした。