Alex-Devoid/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.tract {
  fill: none;

}

.lay {
  fill: blue;
  opacity: .59;
}

.lay:hover {
  fill: red;
  opacity: .05;
}

.tract-border {
  fill: none;
  stroke: #777;
  pointer-events: none;
}

</style>
<svg width="1062px" height="836px"></svg>
<button type="button" name="button" id="pop" >pop</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

console.log('hi');

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var points = [];

svg.selectAll("img").data([0]).enter().append("svg:image")
.attr('x', 0)
.attr('y', 0)
.attr("xlink:href", "https://user-images.githubusercontent.com/39149715/62840007-188ad480-bc83-11e9-8f6a-60b7a5140d43.png");

var g = svg.append("g").attr("class", "mineLayout");


d3.json("https://raw.githubusercontent.com/Alex-Devoid/RosemontMineSiteLayout/master/rosemontMineSiteLayoutPlan.geojson", function(error, land) {
  if (error) throw error;
  console.log(error);
console.log(land)

console.log('hi');

d3.json("RosemontLayout.geojson", function(error, layout) {
if (error) throw error;


var projection = d3.geoTransverseMercator()
    .rotate([111 , 0])
    .fitExtent([[167, 151], [878, 625]], land);

  var path = d3.geoPath()
      .projection(projection);

  svg.selectAll("path")
    .data(land.features)
    .enter().append("path")
      .attr("class", "tract")
      .attr("stroke","black")
      .attr("stroke-width",2)
      .attr("d", path);

  g.selectAll(".mineLayout")
    .data(layout.features)
    .enter().append("path")
    .attr("class", "lay")
      .attr("opacity", .4)

      .attr("stroke","black")
      .attr("stroke-width",1)
      .attr("fill", '#eee')
      .attr("d", path);


      d3.select("svg").on("click", function() {

        console.log(d3.mouse(this));
        var p = projection.invert(d3.mouse(this));
        console.log(p);


        svg.append("circle").attr("r", 1).attr("fill", 'red').attr("transform", "translate(" + d3.mouse(this) + ")");
        points.push(p);
        console.log(points);
        console.log(points.length);


      });

      d3.select("#pop").on("click", function() {


        points.pop();
        console.log(points);
        console.log(points.length);


      });


});

});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.tract {
	fill: none;

	}

	.lay {
	fill: blue;
	opacity: .59;
	}

	.lay:hover {
	fill: red;
	opacity: .05;
	}

	.tract-border {
	fill: none;
	stroke: #777;
	pointer-events: none;
	}

	</style>
	<svg width="1062px" height="836px"></svg>
	<button type="button" name="button" id="pop" >pop</button>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script>

	console.log('hi');

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var points = [];

	svg.selectAll("img").data([0]).enter().append("svg:image")
	.attr('x', 0)
	.attr('y', 0)
	.attr("xlink:href", "https://user-images.githubusercontent.com/39149715/62840007-188ad480-bc83-11e9-8f6a-60b7a5140d43.png");

	var g = svg.append("g").attr("class", "mineLayout");


	d3.json("https://raw.githubusercontent.com/Alex-Devoid/RosemontMineSiteLayout/master/rosemontMineSiteLayoutPlan.geojson", function(error, land) {
	if (error) throw error;
	console.log(error);
	console.log(land)

	console.log('hi');

	d3.json("RosemontLayout.geojson", function(error, layout) {
	if (error) throw error;


	var projection = d3.geoTransverseMercator()
	.rotate([111 , 0])
	.fitExtent([[167, 151], [878, 625]], land);

	var path = d3.geoPath()
	.projection(projection);

	svg.selectAll("path")
	.data(land.features)
	.enter().append("path")
	.attr("class", "tract")
	.attr("stroke","black")
	.attr("stroke-width",2)
	.attr("d", path);

	g.selectAll(".mineLayout")
	.data(layout.features)
	.enter().append("path")
	.attr("class", "lay")
	.attr("opacity", .4)

	.attr("stroke","black")
	.attr("stroke-width",1)
	.attr("fill", '#eee')
	.attr("d", path);




	d3.select("svg").on("click", function() {

	console.log(d3.mouse(this));
	var p = projection.invert(d3.mouse(this));
	console.log(p);


	svg.append("circle").attr("r", 1).attr("fill", 'red').attr("transform", "translate(" + d3.mouse(this) + ")");
	points.push(p);
	console.log(points);
	console.log(points.length);


	});

	d3.select("#pop").on("click", function() {


	points.pop();
	console.log(points);
	console.log(points.length);


	});


	});

	});

	</script>