#Leaflet ライブラリを用いて #GeoJSON を描画するテスト

結果

GeoJSON & Leaflet

M5StickCPlusでGPSロガー的なものを試作しているのですが、そこで取得したGPSデータをWordpress上で表示するためにLeafletというOpenSourceな地図ライブラリを使ってみました。

自作したGPSデータを簡単に読み込ませるのに何が良いのかも調査し、一先ずM5StickCPlusで吐き出したgpsデータをgeojsonに変換し、leafletに読み込んで使ってみる事に。で、ここで問題が発生。地図に対してレイヤーで歩いた部分のポリゴン表示をしてみたかったのですが一向にポリゴンが描画されない。小一時間悩んだ末、緯度経度を指定する順番が、geojson(経度・緯度)とleaflet(緯度・経度)で違うという事に気がつきました。思い込みは良くないですね。

下のソースコードに加えて初期化などのHTML側の設定については公式ドキュメントを参考ください。

GeoJson

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
        "properties": {
          "popupContent": "Tokyo Disney Sea"
        },
        "geometry":{
          "type": "Polygon",
          "coordinates": [
            [
              [
                139.890216,
                35.627036
              ],
              [
                139.886940,
                35.625489
              ],
              [
                139.887106,
                35.623635                
              ],
              [
                139.883258,
                35.624767
              ],
              [
                139.881992,
                35.626714
              ],
              [
                139.881450,
                35.628433
              ]
            ]
          ]
        }
      }    
  ]
}

Script

<div id="map">
<script>

var map = L.map('map').setView([139.885482, 35.626146], 16);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 20,
	attribution: '<a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>'
}).addTo(map);

fetch('./leaflet/data/sample.geojson')
.then((res) => res.json())
.then((json) => {
  L.geoJSON(json, 
    {
      onEachFeature: function onEachFeature(
        feature,
        layer
      ){
        if(feature.properties && feature.properties.popupContent){
          layer.bindPopup(feature.properties.popupContent);
        }
      }
    }
  ).addTo(map);
});

</script>
</div>

余談

余談ですが、ディズニシーに家族で行くことになり、せっかくなのでついでにデータ取ってみたんですが、自作M5StickCPlusロガーの電池が即切れてしまった・・・省電力設定として液晶の輝度を下げたり、CPUクロック下げたりとやってはいたのですが、流石に外付け電池使わないと1日中使うとかは無理そうです。

Max for Liveのデバイス内でトラック番号を取得 : #maxforlive

スクリーンショット 2014-05-11 2.35.33

目的

Max for Live のデバイス .amxd 内で自信 が挿入されているトラック番号を、jsオブジェクトで取得してみます。

jsオブジェクトコード

[javascript]
//init
"use strict";
inlets = 1;
outlets = 1;
autowatch = 1;

function bang(){
var api = new LiveAPI(this.patcher);
api.path = "this_device";
var pathStr = api.path;
var paths = pathStr.split(" ");
outlet(0,parseInt(paths[2]));
}
[/javascript]

解説

LiveAPIのインスタンスへ”this_device”を指定する事で、api.pathはLive Object Modelにおける自信が挿入されている箇所の絶対パスを返します (例えば “live_set tracks 2 devices 1” になり、.amxdのパスが2番めのトラックの1番目のデバイスと分かる)。pathをスプリットしてトラック番号をゲットできました!

Max6 jsuiオブジェクト mgraphicsクラスを用いた描画メモ

スクリーンショット 2014-02-28 18.24.06

Max6のjsuiオブジェクトで背景透過のUIをつくるときに使えるmgraphicsの使い方をメモしておきます。

クラスリファレンス

http://max-javascript-reference.tim-schenk.de/symbols/#gsc.tab=0

初期化

[javascript]
//mgraphics initialize
mgraphics.init();
mgraphics.relative_coords = 1;
mgraphics.autofill = 0;
[/javascript]

描画

[javascript]
function paint(){
mgraphics.set_source_rgba(1,0.5,0.5,1);
mgraphics.ellipse(0, 0, 10, 10); // y座標は、上向きが正の方向なので注意
mgraphics.fill();
}
[/javascript]

paint関数の中じゃないと、mgraphics: no jgraphics context というエラーが出て描画できないようです。

描画命令

[javascript]
refresh();
[/javascript]

枠線を消したい

cmd + i で出てくるインスペクタのborder を 0 に設定

Max6 jsuiオブジェクトで Task / MGraphics を用いて長押しボタンを実装してみた

スクリーンショット 2014-02-02 02.08.25某試作の開発にどうしても長押しボタンが必要だったのですが、MaxのUIには長押しに対応したtoggleのUIオブジェクト(長押しでON / OFF を切り替え)が無いようだったので、jsuiで実装してみました。

ポイント

  • jsオブジェクトに標準でついてくるTaskクラスのrepeat間隔(ms単位)の指定とコールバック関数を用いることで、長押しの判定を行う
  • 背景透過で描画するために、MGraphicsクラスで描画
  • MGraphicsクラスは、Quartz や Flash の Graphics に近いAPIなので取っ付きやすい
  • MGraphics Reference を見ながらpaintの部分を書き換えれば、見た目を変更可能
  • Sketchクラスを用いた描画では背景透過は非対応 → Forum

jsui – javascript

[javascript]

"use_strict";

outlets = 1;
setoutletassist(0,’"OFF":0,"OFF_DOWN":1,"ON":2,"ON_DOWN":3′);

//mgraphics initialize
mgraphics.init( );
mgraphics.relative_coords = 1;
mgraphics.autofill = 0;

//Color
var offColor = [220/256,220/256,220/256,1.0];
var downColor = [0.7,0.7,0.7,1];
var onColor = [.99, .99, .99, 1.];

//State
var state = "OFF";
var states = {"OFF":0,"OFF_DOWN":1,"ON":2,"ON_DOWN":3};
var isSelected = false;

//Task
var tsk = new Task(longPressedHandler,this);
tsk.interval = 1000;

function longPressedHandler()
{
if(arguments.callee.task.iterations > 1)
{
arguments.callee.task.cancel();
isSelected = (isSelected) ? false : true ;
out();
}
}
longPressedHandler.local = 1;

function paint(){

if(states[state] == states["OFF"]){

mgraphics.set_source_rgba(offColor);

}else if(states[state] == states["ON"]){

mgraphics.set_source_rgba(onColor);

}else{
mgraphics.set_source_rgba(downColor);
}

with(mgraphics){

ellipse(-1.0,1.0,2,2);
fill()
stroke();
}
}
paint.local = 1;

function out(){

outlet(0,states[state]);
}
out.local = 1;

//Mouse Event
function onclick(x,y,but,cmd,shift,capslock,option,ctrl)
{
ondrag(x,y,but,cmd,shift,capslock,option,ctrl);
}
onclick.local = 1; //private

function ondrag(x,y,but,cmd,shift,capslock,option,ctrl)
{
if(but == 1){

if(isSelected == true){
state = "ON_DOWN";
}else{
state = "OFF_DOWN";
}

tsk.repeat(2);

}else{

if(isSelected == true){

state = "ON";
}else{
state = "OFF";
}

tsk.cancel();
}

mgraphics.redraw()
out();
}
ondrag.local = 1; //private

[/javascript]

wordpressにコード貼るとインデントや改行が総崩れするのどうにかしたい!WEB系のコーディングをしたことない独学javascriptすぎるので、もうちょっとお作法を勉強したい。あとWordpressレイアウトもう少しまともにしたいんだけど、どうしたらいいものか

値の差分を出力するMax6のjsオブジェクト

[javascript]

"use_strict"

autowatch = 1;
inlets = 1;
autowatch = 1;

var _preValue = null;

function msg_int(value){

msg_float(value);
}

function msg_float(value){

if(_preValue != null){

var outValue = value – _preValue;
outlet(0,outValue);
}

_preValue = value;

}

function clear(){

_preValue = null;
}

[/javascript]

どんどん入力される値と値の差分を取得できます。たとえば速度を計算したりする時に有効です。clearで区切れるのもポイントです。