Mystara---Unprojected_Map

This is an unprojected representation of the Mystara World. Mystara is a campaign setting for the Dungeons & Dragons fantasy role playing game. It was the default setting for the "Basic" version of the game throughout the 1980s and 1990s.

Inspiration from:

Tait Thorfinn for issue and data,

and for code :

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="map.css">
<title>Mystara - unprojected map with d3.js-v4</title>
</head>
<body>
   <div id="map"></div>
   <div>
	<input id="showChkBx" type="checkbox">Cover with Outer World map (from Hollow World Set)</input>
   </div>

function update(){
	var width = 800, height = 400;
    
	var projection = d3.geoEquirectangular()
		.scale(height/ Math.PI)
		.translate([width/2, height/2])
		
	var path = d3.geoPath().projection(projection);  
	
	d3.select("svg").remove();
	
	var svg = d3.select("#map").append("svg")   
		.attr("width", width)
		.attr("height", height)
		.attr("style", "border:1px dashed #ccc");
		
	   svg.append("path")
		.datum({type: "Sphere"})
		.attr("class", "background")
		.attr("d", path);
		
	   svg.append("path")    
		.datum(d3.geoGraticule())
		.attr("class", "graticule")
		.attr("d", path);
		
	   svg.append("path")
		.datum({type: "Sphere"})
		.attr("class", "outline")
		.attr("d", path);

d3.json("Mystara_2017.topojson", function(error, mystara) {
		if (error) return console.error(error);
		   
		svg.append("path", ".graticule")
			.datum(topojson.feature(mystara, mystara.objects.Mystara_2017_unprojected))
			.attr("class", "land")
			.attr("id", "contour")
			.attr("d", path);
		   
		svg.append("clipPath")
			.attr("id", "clip")
			.append("use")
			.attr("xlink:href", "#contour");
			
		if(d3.select("#showChkBx").property("checked")){
			svg.append("image")
				.attr("clip-path", "url(#clip)")
				.attr("xlink:href", "OW_color.tif")
				.attr("width", width)
				.attr("height", height);
		};	
	});				
};

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://d3js.org/d3-geo-projection.v2.min.js