bperel/Map_of_Ancient_Rome_271_AD.svg

## index.html
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="map.css">

<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>

    </head>
    <body>
        <div id="projectionSelectionContainer">
            <label for="projectionSelection">Projection : <br></label>
            <select id="projectionSelection"><option>mercator</option><option>equirectangular</option><option>orthographic</option></select>
        </div>

        <script src="map.js"></script>
        <script src="ui.js"></script>
        <script type="text/javascript">
            showMap("background", "ne_110m_coastline.json");
        </script>
    </body>
</html>

## map.css
body {
    white-space: nowrap;
}

#map, #externalSvg {
    left: 200px;
    float: left;
}

.subunit-label {
    fill: #777;
    fill-opacity: .5;
    font-size: 14px;
    font-weight: 300;
    text-anchor: middle;
}

.subunit-boundary {
    fill: none;
    stroke: #777;
    stroke-dasharray: 2,2;
    stroke-linejoin: round;
}

#externalSvg {
    opacity: 0.5;
}

## map.js
var width = 480;
var mapHeight = 440;

var projection;
var path;
var zoom;

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", mapHeight)
	.attr("name", "German_Empire_1914")
	.attr("id", "externalSvg")
	.attr("viewBox", "0 0 2050 1213")
	.attr("preserveAspectRatio", "xMaxYMax meet");

var backgroundSvg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", mapHeight)
	.attr("id", "bgMap")
	.datum({x: 0, y: 0});

var projectionSelection = d3.select('#projectionSelection');

projectionSelection.on('change', function() {
	applyProjection(getSelectedProjection());
});

function getSelectedProjection() {
	return d3.select(projectionSelection.node().options[projectionSelection.node().selectedIndex]).html();
}

d3.xml("Map_of_Ancient_Rome_271_AD.svg", "image/svg+xml", function(xml) {
	d3.select(
		svg
			.append("g")
			.node()
			.appendChild(document.importNode(xml.documentElement, true)));
});

function showMap(id, filePath) {
	d3.json(filePath, function(error, world) {

		backgroundSvg.append("g")
			.attr("id", id)
			.selectAll(".subunit")
			.data(world.features)
			.enter().append("path")
			.attr("class", function(d) {
				return "subunit-boundary subunit " + d.properties.adm0_a3;
			});

		applyProjection('mercator');

	});
}

function applyProjection(name) {
	projection = d3.geo[name]()
		.scale(width *2 / Math.PI)
		.precision(.01)
		.center([40, 10]);

	path = d3.geo.path()
		.projection(projection);

	zoom = d3.behavior.zoom()
		.translate(projection.translate())
		.scale(projection.scale())
		.on("zoom", function() {
			projection.scale(d3.event.scale);
			backgroundSvg.selectAll("path").attr("d", path);
		});


	backgroundSvg
		.call(bgSvgmap_drag)
		.call(zoom)
		.selectAll('path.subunit').attr("d", path);
}

## Map_of_Ancient_Rome_271_AD.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              Map_of_Ancient_Rome_271_AD.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## ne_110m_coastline.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_110m_coastline.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## ui.js
var bgMapDragState;

var bgSvgmap_drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", bgMapDragStarted)
    .on("drag", bgMapDragMove);

var lambda = d3.scale.linear()
    .domain([0, width])
    .range([-180, 180]);

var phi = d3.scale.linear()
    .domain([0, mapHeight])
    .range([90, -90]);


function bgMapDragStarted() {
    bgMapDragState = 'inactive';
}

function bgMapDragMove(d) {
    if (d3.event && d3.event.dx && d3.event.dy) {
        bgMapDragState = 'drag';
    }
    d.x = (d.x || d3.event.sourceEvent.pageX) + (d3.event ? d3.event.dx : 0);
    d.y = (d.y || d3.event.sourceEvent.pageY) + (d3.event ? d3.event.dy : 0);
    projection.rotate([lambda(d.x), phi(d.y)]);
}
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="map.css">

	<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>

	</head>
	<body>
	<div id="projectionSelectionContainer">
	<label for="projectionSelection">Projection : <br></label>
	<select id="projectionSelection"><option>mercator</option><option>equirectangular</option><option>orthographic</option></select>
	</div>

	<script src="map.js"></script>
	<script src="ui.js"></script>
	<script type="text/javascript">
	showMap("background", "ne_110m_coastline.json");
	</script>
	</body>
	</html>
	body {
	white-space: nowrap;
	}

	#map, #externalSvg {
	left: 200px;
	float: left;
	}

	.subunit-label {
	fill: #777;
	fill-opacity: .5;
	font-size: 14px;
	font-weight: 300;
	text-anchor: middle;
	}

	.subunit-boundary {
	fill: none;
	stroke: #777;
	stroke-dasharray: 2,2;
	stroke-linejoin: round;
	}

	#externalSvg {
	opacity: 0.5;
	}
	var width = 480;
	var mapHeight = 440;

	var projection;
	var path;
	var zoom;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", mapHeight)
	.attr("name", "German_Empire_1914")
	.attr("id", "externalSvg")
	.attr("viewBox", "0 0 2050 1213")
	.attr("preserveAspectRatio", "xMaxYMax meet");

	var backgroundSvg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", mapHeight)
	.attr("id", "bgMap")
	.datum({x: 0, y: 0});

	var projectionSelection = d3.select('#projectionSelection');

	projectionSelection.on('change', function() {
	applyProjection(getSelectedProjection());
	});

	function getSelectedProjection() {
	return d3.select(projectionSelection.node().options[projectionSelection.node().selectedIndex]).html();
	}

	d3.xml("Map_of_Ancient_Rome_271_AD.svg", "image/svg+xml", function(xml) {
	d3.select(
	svg
	.append("g")
	.node()
	.appendChild(document.importNode(xml.documentElement, true)));
	});

	function showMap(id, filePath) {
	d3.json(filePath, function(error, world) {

	backgroundSvg.append("g")
	.attr("id", id)
	.selectAll(".subunit")
	.data(world.features)
	.enter().append("path")
	.attr("class", function(d) {
	return "subunit-boundary subunit " + d.properties.adm0_a3;
	});

	applyProjection('mercator');

	});
	}

	function applyProjection(name) {
	projection = d3.geo[name]()
	.scale(width *2 / Math.PI)
	.precision(.01)
	.center([40, 10]);

	path = d3.geo.path()
	.projection(projection);

	zoom = d3.behavior.zoom()
	.translate(projection.translate())
	.scale(projection.scale())
	.on("zoom", function() {
	projection.scale(d3.event.scale);
	backgroundSvg.selectAll("path").attr("d", path);
	});


	backgroundSvg
	.call(bgSvgmap_drag)
	.call(zoom)
	.selectAll('path.subunit').attr("d", path);
	}
	var bgMapDragState;

	var bgSvgmap_drag = d3.behavior.drag()
	.origin(function(d) { return d; })
	.on("dragstart", bgMapDragStarted)
	.on("drag", bgMapDragMove);

	var lambda = d3.scale.linear()
	.domain([0, width])
	.range([-180, 180]);

	var phi = d3.scale.linear()
	.domain([0, mapHeight])
	.range([90, -90]);


	function bgMapDragStarted() {
	bgMapDragState = 'inactive';
	}

	function bgMapDragMove(d) {
	if (d3.event && d3.event.dx && d3.event.dy) {
	bgMapDragState = 'drag';
	}
	d.x = (d.x \|\| d3.event.sourceEvent.pageX) + (d3.event ? d3.event.dx : 0);
	d.y = (d.y \|\| d3.event.sourceEvent.pageY) + (d3.event ? d3.event.dy : 0);
	projection.rotate([lambda(d.x), phi(d.y)]);
	}