|
<!DOCTYPE html> |
|
<html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<meta http-equiv="Content-Language" content="en" /> |
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"> |
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> |
|
<style> |
|
#map { |
|
height:500px; |
|
} |
|
.plates { |
|
fill: #fff; |
|
stroke:#000; |
|
stroke-width:1px; |
|
} |
|
.leaflet-container { |
|
background: #000; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<p>GeoJSON</p> |
|
<div id="svgMap"></div> |
|
<p>Topojson</p> |
|
<div id="topoMap"></div> |
|
<p>GeoJSON rendered by Leaflet</p> |
|
<div id="map"></div> |
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
<script src="http://d3js.org/topojson.v1.min.js"></script> |
|
<script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script> |
|
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> |
|
|
|
<script type="text/javascript"> |
|
var height = 500, |
|
width = 960; |
|
|
|
var projection = d3.geo.hammer() |
|
.scale(165) |
|
.translate([width / 2, height / 2]) |
|
.precision(.3); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("#svgMap") |
|
.append("svg") |
|
.attr("height", height) |
|
.attr("width", width); |
|
|
|
svg.append("defs").append("path") |
|
.datum({type: "Sphere"}) |
|
.attr("id", "sphere") |
|
.attr("d", path); |
|
|
|
svg.append("use") |
|
.attr("class", "stroke") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
svg.append("use") |
|
.attr("class", "fill") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
// Build the topojson map |
|
var topoSvg = d3.select("#topoMap") |
|
.append("svg") |
|
.attr("height", height) |
|
.attr("width", width); |
|
|
|
topoSvg.append("defs").append("path") |
|
.datum({type: "Sphere"}) |
|
.attr("id", "sphere") |
|
.attr("d", path); |
|
|
|
topoSvg.append("use") |
|
.attr("class", "stroke") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
topoSvg.append("use") |
|
.attr("class", "fill") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
d3.json("plates.topojson", function(er, data) { |
|
topoSvg.selectAll(".plates") |
|
.data(topojson.feature(data, data.objects.plates).features) |
|
.enter().append("path") |
|
.attr("class", "plates") |
|
.attr("id", function(d) { return d.properties.FEATURE_ID}) |
|
.attr("d", path); |
|
}); |
|
|
|
|
|
var map = new L.map("map", { |
|
maxZoom: 2, |
|
scrollWheelZoom: false |
|
}); |
|
|
|
d3.json("plates.geojson", function(er, result) { |
|
|
|
svg.selectAll("lines") |
|
.data(result.features) |
|
.enter().append("path") |
|
.attr("class", "plates") |
|
.attr("d", path); |
|
|
|
L.geoJson(result, { |
|
style: { |
|
"color": "#000", |
|
"fillColor": "#FEFBFB", |
|
"weight": 1, |
|
"fillOpacity": 1 |
|
} |
|
}).addTo(map); |
|
|
|
map.fitWorld(); |
|
|
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |
