wslでelixir その184

概要

wsl(wsl2じゃない)で、elixirやってみた。
Livebookで、kino.leaflet見つけたのでやってみた。

参考にしたページ

写真

サンプルコード

defmodule Kino.Leaflet do
  use Kino.JS
  use Kino.JS.Live

  def new(center, zoom) do
    Kino.JS.Live.new(__MODULE__, {normalize_location(center), zoom})
  end

  def add_marker(kino, location) do
    Kino.JS.Live.cast(kino, {:add_marker, normalize_location(location)})
  end

  def add_polygon(kino, polygon) do
    IO.inspect(polygon)
    Kino.JS.Live.cast(kino, {:add_polygon, polygon})
  end

  def add_polygon(kino, polygon, colour) do
    IO.inspect(polygon)
    Kino.JS.Live.cast(kino, {:add_polygon, polygon, colour})
  end

  @impl true
  def init({center, zoom}, ctx) do
    {:ok, assign(ctx, center: center, zoom: zoom, locations: [], polypoints: [])}
  end

  @impl true
  def handle_connect(ctx) do
    data = %{
      center: ctx.assigns.center,
      zoom: ctx.assigns.zoom,
      locations: ctx.assigns.locations,
      polypoints: ctx.assigns.polypoints
    }
    {:ok, data, ctx}
  end

  @impl true
  def handle_cast({:add_marker, location}, ctx) do
    broadcast_event(ctx, "add_marker", location)
    ctx = update(ctx, :locations, &[location | &1])
    {:noreply, ctx}
  end

  def handle_cast({:add_polygon, polygon}, ctx) do
    broadcast_event(ctx, "add_polygon", polygon)
    ctx = update(ctx, :polypoints, &[polygon | &1])
    {:noreply, ctx}
  end

  def handle_cast({:add_polygon, polygon, colour}, ctx) do
    broadcast_event(ctx, "add_polygon_colour", %{"polygon" => polygon, "colour" => colour})
    ctx = update(ctx, :polypoints, &[polygon | &1])
    {:noreply, ctx}
  end

  defp normalize_location({lag, lng}), do: [lag, lng]

  asset "main.js" do
    """
    import * as L from "https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet-src.esm.js";

    export async function init(ctx, data) {
      ctx.root.style.height = "400px";
      await ctx.importCSS("https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css");
      const { center, zoom, locations } = data;
      const map = L.map(ctx.root, { center, zoom });

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      locations.forEach((location) => {
        L.marker(location).addTo(map);
      });

      ctx.handleEvent("add_marker", (location) => {
        L.marker(location).addTo(map);
      })

      ctx.handleEvent("add_polygon", (polygon) => {
        L.polygon(polygon, {color: 'green'}).addTo(map);
      });

      ctx.handleEvent("add_polygon_colour", (data) => {
        L.polygon(data["polygon"], {color: data["colour"]}).addTo(map);
      });
      
    }
    """
  end
end



bp = {35.65858645,  139.74544005796224}
map = Kino.Leaflet.new(bp, 16)
Kino.Leaflet.add_marker(map, bp)
map

以上。