はじめに
位置と紐づいたデータをゴニョるのに、場所と一緒に文字データを表示したいのです。
そこで「Elixir Livebook で地図にポイントと一緒にデータを描画出来ないものだろうか」です。
実行環境
- Mac Ventura 13.1
- Livebook app
Livebookはデスクトップアプリを使ってます。
ポイントを地図に描画する
過去1週間で起こった地震のデータらしい?ものを使って試してみたいと思います。
セッティング。
Mix.install([
{:explorer, "~> 0.5"},
{:geo, "~> 3.4"},
{:kino, "~> 0.8"},
{:kino_maplibre, "~> 0.1.3"},
{:download, "~> 0.0.4"},
{:jason, "~> 1.4"} # これがないとエラーになることがあるらしいです
])
エリアス設定。
alias MapLibre, as: Ml
データを読み込んでGeoJSONデータにします。
geo_json =
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
|> HTTPoison.get!()
|> Map.get(:body)
|> Jason.decode!()
|> Geo.JSON.decode!()
描画します。
Ml.new(
zoom: 5,
style: :street,
center: {-117.6981659, 35.873333, 9.22}
)
|> Ml.add_geo_source("data", geo_json)
|> Ml.add_layer(
id: "stop",
source: "data",
type: :circle,
paint: [circle_color: "#aa00ff", circle_radius: 5]
)
プロパティデータも一緒に描画する
さて、一体どうやるのでしょうか。
hexdocs見ても全くわかりません。
:symbolが「An icon or a text label」とあるのでこの線でググります。
いきなり高度すぎて咀嚼できない!
大元に行ってしまってElixirから遠い!
ググる力も最弱なのか、Elixir初心者に優しいものどころか、全く望むものにヒットしません。
仕方がないので色々とヒントにさせてもらいながらゴニョゴニョします。
その結果、プロパティの値を適当に引っ捕まえて表示できるようになりました。
Ml.new(
zoom: 4,
style: :street,
center: {141.154484, 39.702053}
)
|> Ml.add_geo_source("data", geo_json)
|> Ml.add_layer(
id: "stop",
source: "data",
type: :circle,
paint: [circle_color: "#aa00ff", circle_radius: 5]
)
|> Ml.add_layer_below_labels(
id: "mag",
type: :symbol,
source: "data",
layout: %{
text_field: [:get, "mag"],
text_offset: [0, 1.0],
text_size: 12,
text_font: ["Open Sans Bold"]
},
paint: [text_color: "#aa0055"]
)
|> Ml.add_layer_below_labels(
id: "sig",
type: :symbol,
source: "data",
layout: %{
text_field: [:get, "sig"],
text_offset: [0, -1.0],
text_size: 12,
text_font: ["Open Sans Bold"]
},
paint: [text_color: "#0033bf"]
)
|> Kino.MapLibre.new()
これがしたかった!
と思ったけど、一つのレイアウトで複数のデータをフォーマットして描けないかな、と思いました。
どうやるのだろう。
まとめ
Elixir Livebook でマップにプロパティの値も描画出来ました。
本当にこれでいいんだろうか?