Maplat を使ってみた。（作業メモ）

1. Maplat を使ってみた。

Maplatは、不正確に描かれた古地図や絵地図の上に正確なGPS現在位置を表示したり、正確な地図と重ね合わりするWebサイトを作ることができるオープンソースライブラリです。実際に使って見ようと思うと、CODEが？な非エンジニアには？なことが多いです。しかし、CODEをよく見ると、パズルを解く感じでいじれます。

2. Maplatのインストール

⑴ IIS(ローカルサーバ）立ち上げ

WINDOWS系を使っている方は、ローカルサーバを使うと、公開前に実際の作動状況が分かるので便利です。
IISのインストール方法は、検索してみてください。
インストールに成功すると、http://localhost で何か出ます。

⑵ Maplatのダウンロード

から、example.zip　をダウンロードします。

⑶ Maplatのインストール

先ほどダウンロードしたexample.zipを展開して、公開するホルダに貼り付ければ、サンプルは動きます。

⑷ Maplatのインストールの参考とする場所

3. 背景地図の追加

⑴ 背景地図を追加したいとき

地理院地図のオルソ画像を追加する例を記載します。

➀ apps/sample.jsonの編集　

　appsフォルダのsample.jsonに次の内容を追加します。

sample.json

        {
            "mapID": "ort",
            "label" : "オルソ",
            "setting_file" : "maps/ort.json"  
        },

➁ maps/ort.json　の追加

"maptype": "base",とすることで、ベースマップになります。

ort.json

{
    "title" : "電子国土基本図（オルソ画像）",
    "maptype": "base",
    "url": "https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg",
    "maxZoom": 18,
    "attr":"国土地理院",
    "description":"<a href=\"https://maps.gsi.go.jp/development/ichiran.html\">https://maps.gsi.go.jp/development/ichiran.html</a><br>国土地理院の「電子国土基本図（オルソ画像）」"
}

➂ tmbs/ort.jpg　の追加

tmbsフォルダにort.jpgに追加します。
画像のサイズは、52×52ピクセル　にします。

---

これで、ベースマップにオルソ追加することができました。
お試しください