/*! exact-canvas v1.0.0 | MIT License | github.com/k7ubb/exact-canvas */
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="exact-canvas.js"></script>
<script type="text/javascript">
addEventListener("load", async () => {
	const mapdata = await (await fetch("map.json")).json();
	const geojson = new geojsonCanvas(document.getElementById("canvas"));

	geojson.backgroundColor = "#EEF9F9";
	geojson.scale = 0.00256;
	geojson.moveCenter(138.3, 35);
	
	geojson.onupdate = () => {
		for (let feature of mapdata.features) {
			geojson.drawGeometry(feature.geometry, 1, "#999", "#fff");
		}
	};
	geojson.update();
	
	geojson.draggable = true;
	geojson.clickable = true;

	geojson.onclickstatechange = () => {
		geojson.update();
		for (let feature of mapdata.features) {
			if (geojson.isGeometryClicked(feature.geometry)) {
				geojson.drawGeometry(feature.geometry, 1, "#999", "#f00")
				break;
			}
		}
	};
});
</script><div id="canvas"></head><iframe src="https://iannmiui-png.github.io/porneia.neocities/" width="520px" height="898.7px"></iframe>