6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Elixir Livebook で地図にポイントと一緒にデータを描画出来ないものだろうか

Last updated at Posted at 2023-02-28

はじめに

位置と紐づいたデータをゴニョるのに、場所と一緒に文字データを表示したいのです。
そこで「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!()

image.png

描画します。

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]
)

image.png

プロパティデータも一緒に描画する

さて、一体どうやるのでしょうか。
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()

image.png

これがしたかった!
と思ったけど、一つのレイアウトで複数のデータをフォーマットして描けないかな、と思いました。
どうやるのだろう。

まとめ

Elixir Livebook でマップにプロパティの値も描画出来ました。
本当にこれでいいんだろうか?

6
3
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?