Map-with-Latitude-Longitude

forked from lokesh005's block: Map-with-Latitude-Longitude

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<script src="https://colorbrewer2.org/export/colorbrewer.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

.canton-boundary {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  text-anchor: middle;
}

.d3-tip {
			  line-height: 1;
			  font-weight: bold;
			  padding: 12px;
			  background: black;
			  color: #fff;
			  border-radius: 2px;
			  opacity: 0.001%;
			}
			.d3-tip:after {
			  box-sizing: border-box;
			  display: inline;
			  font-size: 10px;
			  width: 100%;
			  line-height: 1;
			  color: black;
			  content: "\25BC";
			  position: absolute;
			  text-align: center;
			  opacity: 0.001%;
			}

.d3-tip.n:after {
			  margin: -1px 0 0 0;
			  top: 100%;
			  left: 0;
			  opacity: 0.001%;
			}
			.area:hover {
				fill: brown;
			}
			
</style>
<body>

</script>

/*var projection = d3.geo.mercator()
    .scale(800)
    .translate([-500,600]);*/

var projection = d3.geo.mercator().scale(1100).translate([-1000,800]);
var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("#map").append("svg")
    .attr("viewBox", "0 0 900 800")
	 .attr("preserveAspectRatio", "xMidYMid meet");
var data;
d3.json("test.json", function(error, swiss) {
  if (error) throw error;

var cantons = topojson.feature(swiss, swiss.objects.india);
  
  			//svg.call(tip);
			var group=svg.selectAll("g")
				.data(cantons.features)
				.enter()
				.append("g");
				//.on('mouseover', tip.show)
      			//.on('mouseout', tip.hide)
					
					
					var tip = d3.tip()
							.attr('class', 'd3-tip')
							.offset([-5, 0])
							.style("left", "300px")
							.style("top", "400px")
							.html(function(d) {
								return ("<a href="+d.nam+" target='_blank'>"+d.name +"</a>");
							})
							
						svg.call(tip);

svg.selectAll(".pin")
						  .data(places)
						  .enter().append("circle", ".pin")
						  .attr("r", 5)
						  .attr("transform", function(d) {
							return "translate(" + projection([
							  d.location.longitude,
							  d.location.latitude
							]) + ")";
						  })
						  .on('mouseover', tip.show)
							.on('click', tip.hide);		
					
				//var projection = d3.geo.mercator().scale(900).translate([-600,700]);
				var path= d3.geo.path().projection(projection);

var areas= group.append("path")
					.attr("d", path)
					.attr("class", "area")
				 .attr("fill","steelblue");
						
});
</script>

Modified http://colorbrewer2.org/export/colorbrewer.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://colorbrewer2.org/export/colorbrewer.js

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

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js