Maplat Coreでラインを地図上に表示する

何を書くか悩んだMaplat Advent Calendar 10日目ですが、Maplat Coreでラインを地図上に表示する方法にいたしました。
今日の動くものはここで確認できます。 => CodeSandBox Maplat Advent Calendar day 10

どうせならば地図上に加えたラインが正確な地図と古地図上でどう違って見えるかが見えたほうがおもしろいので、地図切り替えがついている5日目のコードをベースにして、改造を加えていきます。
変更を加えるのは、JavaScriptファイルだけで大丈夫でしょう。

app.js

import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";

var option = {
  appid: "maplat_ac_day10"
};

var app = new MaplatApp(option);
app.waitReady.then(function() {
  var ring = [
    [139.53184, 36.251013],
    [139.534322, 36.249581],
    [139.533853, 36.24814],
    [139.530729, 36.248649],
    [139.53184, 36.251013]
  ];
  app.addLine({
    lnglats: ring,
    stroke: {
      color: "#ffcc33",
      width: 2
    }
  });
  document.getElementById("gsi").addEventListener("click", function(e) {
    app.changeMap("gsi");
  });
  document.getElementById("osm").addEventListener("click", function(e) {
    app.changeMap("osm");
  });
  document.getElementById("ojo").addEventListener("click", function(e) {
    app.changeMap("tatebayashi_ojozu");
  });
  document.getElementById("aki").addEventListener("click", function(e) {
    app.changeMap("tatebayashi_castle_akimoto");
  });
});

5日目の切り替えボタン押し下げ時の処理部分の前に、線の定義と線を描画する処理を加えています。
ring変数に経緯度の羅列を設定し、それをaddLineメソッドを使って、描画する線分の見た目などもstrokeで指定しながら、描画しています。

実行した感じの見た目は、下のような感じになります。

明日は、この描画したラインの上に、バスを走らせてみましょう。