# 宝探しゲームのカスタマイズ方法
[動作例](../../../pages/GPS/index.html)

新規ステージ foo を作る場合:
1. [uMap](https://umap.openstreetmap.fr/ja/)で宝の位置をマーカーで作る
2. JSON形式でダウンロードして data/foo.geojson に保存
3. area.jsonを編集して新規のエントリを追加する:  
   name: にエリア名を入れる。
   geojson: 'data/foo.geojson' にする。  
   bounds: に地図のスクロール限界を入れる。  
   map: には "osm" (OpenStreetMapの場合)または、
   "gsi" (地理院地図の場合)を入れる。

boundsを求めるには
https://www.yatex.org/gitbucket/LeafletGo/2022-yuuji-TwinMapWithImage/pages/asahi.html
の左の地図でズームと境界を合わせ、右クリックする。

## uMapでのゴールの作成
1. マーカーを置く
2. 「名称」に短い名前をつけ、「概要」に発見したときの文章を書く。
3. 複数のエリアを作るときは別々のレイヤにするとよい
4. (複数レイヤにした場合は同じエリアのマーカーだけを表示し)  
   左側の共有ボタンから「GeoJSON形式」を選んでダウンロードする。

## オフライン地図の作成
area.jsonで map に、地図画像ファイルを指定してPWAにローカルキャッシュさせると
オフラインで遊べるようになる。

上記URL(boundsを求めるためのもの)を開き、上部の[B]ボタンを押すと
画像保存モードになるので、ズームと境界を合わせてから[P]ボタンを押す。
画像ファイルをPNGで保存して bounds= の値とともに
area.json ファイルに登録する。

## Tips
* マーカーを回転させるには divIcon の中にもう1つ別のclassの要素を作って
  そこだけで回転させる必要がある。
*
