Maplat Coreで古地図の上に明滅するバスを走らせてみる

Maplat Advent Calendar 12日目ですが、Maplat Coreで古地図の上に明滅するバスを走らせてみます。
もう何が言いたいのか自分でもよくわかりませんが、今日の動くものはここで確認できます。 => CodeSandBox Maplat Advent Calendar day 12

要するに、app.updateMarkerで情報アップデートできるのは経緯度だけじゃないよ、アイコン画像情報をアップデートすると画像も切り替わるよ、というサンプルなわけですね。

昨日からの変更は、赤いバスのアイコン画像parts/red_bus.png¹の追加と、ループのインデックス値が奇数か偶数かで赤と青のアイコン画像を切り替えて、icon属性としてapp.updateMarkerの更新内容に加えているというだけですね。

app.js

import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";
import { lineString } from "@turf/helpers";
import length from "@turf/length";
import lineChunk from "@turf/line-chunk";
import explode from "@turf/explode";

var option = {
  appid: "maplat_ac_day12"
};

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");
  });

  var ringFeature = lineString(ring);
  var ringLength = length(ringFeature, { units: "meters" });
  var divLength = ringLength / 20;
  var chunk = lineChunk(ringFeature, divLength, { units: "meters" });
  var points = chunk.features.map(function(line) {
    var nodes = explode(line);
    return nodes.features[0].geometry.coordinates;
  });
  app.addMarker({
    id: "moveMarker",
    lat: points[0][1],
    lng: points[0][0],
    icon: "parts/blue_bus.png"
  });
  console.log(points);
  var index = 0;
  var regularRun = function() {
    var point = points[index];
    var icon = index % 2 ? "parts/red_bus.png" : "parts/blue_bus.png";
    app.updateMarker("moveMarker", {
      lat: point[1],
      lng: point[0],
      icon: icon
    });
    index = index + 1;
    if (index > 19) index = 0;
    setTimeout(regularRun, 1000);
  };
  regularRun();
});

それで、以下のように赤と青で明滅するバスが古地図の上を走るようになります。

ちなみに、app.updateMarkerの動作ですが、第一引数は更新するPOIピンのID、第二引数は更新するデータですが、第三引数にデータを上書きするかどうかがbooleanで指定できます。
第三引数がデフォルト（false）の場合、第二引数で指定されたオブジェクトが持つ属性だけが差し替えられますが（削除したいときは、値に'____delete____'を指定します）、trueを指定した場合は、第二引数で指定されたオブジェクトでPOIピンのデータが上書きされます。

明日は、ピンではなく地図の視点を経路に合わせて動かしてみましょう。
中心点だけではなく、地図の角度も進行方向に合わせて回転させてみます。
いわゆるヘッドアップビューというやつですね。

1. (c) Font Awesome ↩