以前に作成したRID受信機のマップを、自分なりの詳細地図に変更する方法を説明します。

国土地理院のマップをダウンロードする

国土地理院のマップページに移動します。
まずブラウザの表示倍率のズームを100％にします。

作りたい地図の位置と倍率で、マップを表示させます。
次に、下図のように[共有]と[山]アイコンをクリックしてください。

大きさを固定にチェック。

大きさを、例えば[ 1000 x 1000 ]にします。
江の島周辺なら下図のような表示なります。赤枠の部分がダウンロードの対象となります。
この時の緯度と経度をメモって置いて下さい。プログラムで使用します。

位置が決まったらOKボタンを押してください。「画像を保存」をクリックします。
名前を[map.png]にします。

これで地図画像がダウンロードされました。

[map.png]を[data]フォルダに、ドラッグ＆ドロップしてコピーします。

プログラムを書き換えます

index.html の下記の部分でwidthとheightの大きさをダウンロードしたmap.pngの大きさに合わせます。
＜img＞と＜canvas＞の両方です。

index.html

	<div style="position:relative;">
 		<img src="map" width="1000" height="1000" alt="map.png">
		<div style="position:absolute; left: 0px; top:0px;">
			<canvas id="cvs" width="1000" height="1000"></canvas>
		</div>
		<div id="mark" style="position:absolute;">
		 <img src="mark" alt="mark.png">
		</div>
	</div>
</body>

index.html内のスクリプトの部分を下記のように書き替えて下さい。
幅と高さをマップの大きさに合わせ、緯度と経度は先ほど記録した値を代入して下さい。
(lng0,lat0)が左下で、(lng1,lat1)が右上です。

index.html

<script>
//:
//:
			document.getElementById('pw').innerHTML = JSONobj.pw;

			var w = 1000;
			var h = 1000;
			var lng0 = 139.430666;
			var lat0 = 35.284934;
			var lng1 = 139.516497;
			var lat1 = 35.354966;
			let x = Math.trunc((parseFloat(JSONobj.lng) - lng0) * w/(lng1-lng0) );		// 経度をx座標に変換
			let y = h - (Math.trunc((parseFloat(JSONobj.lat) - lat0) * h/(lat1-lat0)));	// 緯度をy座標に変換
    		mk.style.left = x - 13 + 'px';	            							// マークの位置を変更(マークの左上角座標)	
			mk.style.top = y - 42 + 'px';
			drawLine(x, y);															// 軌跡を描画(マークの先端)
		}
	}
</script>
</html>

あとは、index.htmlとmap.pngをSPIFFS領域にアップロードして下さい。

これで、自分だけのマップが表示されるはずです。

注意事項

[data]フォルダ内の合計容量は2Mバイト以下になる様にして下さい。それ以上になるとエラーで書き込めなくなります。
マップデータをあまり大きくすると、書き込めなく恐れがあるので注意して下さい。

pngデータをjpgに変換し、圧縮率を高くすれば、データサイズを小さくすることが出来ます。
jpgに変換した場合は、プログラムの方もちょっと変更する必要があります。

main.cpp

  server.on("/map", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "map.jpg", "image/jpg");
  });