TWSNMP MW開発9日目：TWSNMP FCのマップを手抜きで作って地図画面に取りかかる

今朝は２時に一度目が覚めましたが、さすがに早すぎるので寝ながらTWSNMP FCのマップを表示する方法を考えました。ふと、手抜きして表示する方法を思いつきました。
２度寝して、４時半から開発開始です。

wails v3で新規Windowsを表示する時に外部のURLを指定すれば、そのままWebViewで表示してくれます。つまり、TWSNMP FCのURLを指定すれば表示されるはずです。試してみるとできました。

TWSNMP FCからノードの情報を読み込んでマップに表示するような処理を作らなくても複数のTWSNMP FCの画面を表示するという目的を達成できそうです。できれば設定したユーザー名、パスワードを使って自動でログインしたいところですが、後で考えることにします。

マップの表示ができたので、地図表示の画面を作ることにしました。
これは、

Introduction | Solid Map GL

でできそうなので、試してみました。

import { Component, createSignal } from "solid-js";
import MapGL, { Viewport,Marker } from "solid-map-gl";
import * as maplibre from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'

const Map: Component = () => {
  const [viewport, setViewport] = createSignal({
    center: [139.75,35.68],
    zoom: 2,
  } as Viewport);


  return (
    <MapGL
      mapLib={maplibre} // <- Pass MapLibre package here
      options={{ 
        style: "https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json" 
      }}
      viewport={viewport()}
      onViewportChange={(evt: Viewport) => setViewport(evt)}
    >
      <Marker lngLat={[139.75,35.68]} options={{ color: '#F00' }}>
        Hi there! 👋
      </Marker>
    </MapGL>
  );
};

export default Map;

ぐらいのソースコードで

のように表示できました。３Dの地球儀とかも表示できそうで楽しくなってきました。
この後、TWSNMP FCの位置や状態を反映させる部分を作ろうと思います。

明日に続く