Canada and USA Map

Trying to combine two maps with Datamaps.

by mram888

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
<body>
	<!-- CANADA -->
	<h1>CANADA</h1>
	<div id="canada"></div>
	<!-- USA -->
	<h1>USA</h1>
	<div id="usa"></div>
</body>

CSS

#canada {
	border: 1px solid #000000;
	height: 450px;
	width: 400px;
}

#usa {
	border: 2px solid #EDA552;
	height: 400px;
	width: 500px;
}

JavaScript

$(function() {
	var canadaMap = new Datamap({
		element: document.getElementById('canada'),
		geographyConfig: {
			dataUrl: 'https://raw.githubusercontent.com/deldersveld/topojson/master/countries/spain/spain-province.json'
		},
		scope: 'spain',
		fills: {
			defaultFill: '#bada55'
		},
	});
	var USAmap = new Datamap({
		element: document.getElementById('usa'),
		geographyConfig: {
			dataUrl: 'https://raw.githubusercontent.com/ReiAyame/Combining-Two-Countries-in-Datamaps/master/usa.topo.json'
		},
		scope: 'usa',
		fills: {
			defaultFill: '#bada55'
		},
		setProjection: function(element) {
			var projection = d3.geo.mercator()
				.center([-120, 54])
				.scale(250)
				.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
			var path = d3.geo.path().projection(projection);
			return {path: path, projection: projection};
		}
	});
});