64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
var MapChart = {
|
|
init: function(svg, html_tag_attr, projection, map){
|
|
var wSvg = $(html_tag_attr).width(),
|
|
hSvg = $(html_tag_attr).height();
|
|
|
|
var path = d3.geoPath().projection(projection);
|
|
|
|
Promise.all([map]).then(values => {
|
|
createMap(values[0]);
|
|
});
|
|
|
|
// Code for map zooming
|
|
var zoomSettings = d3.zoomIdentity
|
|
.translate(wSvg / 2, hSvg / 2)
|
|
.scale(hSvg / 2);
|
|
|
|
var mapZoom = d3.zoom().on("zoom", zoomed);
|
|
function zoomed(){
|
|
var e = d3.event;
|
|
projection.translate([e.transform.x, e.transform.y]).scale(e.transform.k);
|
|
d3.selectAll("path.countries").attr("d", path);
|
|
}
|
|
|
|
function zoomButton(zoomDirection) {
|
|
var width = 500;
|
|
var height = 500;
|
|
if (zoomDirection == "in") {
|
|
var newZoom = projection.scale() * 1.5;
|
|
var newX =
|
|
((projection.translate()[0] - (width / 2)) * 1.5) + width / 2;
|
|
var newY =
|
|
((projection.translate()[1] - (height / 2)) * 1.5) + height / 2;
|
|
}
|
|
else if (zoomDirection == "out") {
|
|
var newZoom = projection.scale() * .75;
|
|
var newX = ((projection.translate()[0] - (width / 2)) * .75) + width / 2;
|
|
var newY = ((projection.translate()[1] - (height / 2)) * .75) + height / 2;
|
|
}
|
|
|
|
var newZoomSettings = d3.zoomIdentity.translate(newX, newY).scale(newZoom);
|
|
|
|
svg.transition().duration(500).call(mapZoom.transform, newZoomSettings);
|
|
|
|
}
|
|
|
|
d3.select(html_tag_attr).select(html_tag_attr+"_controls").append("button").attr("classed", "btn btn-success").on("click", () => {
|
|
zoomButton("in")}).html("Zoom In");
|
|
d3.select(html_tag_attr).select(".controls").append("button").on("click", () => {
|
|
zoomButton("out")}).html("Zoom Out");
|
|
|
|
function createMap(countries){
|
|
svg.selectAll("path")
|
|
.data(countries.features)
|
|
.enter()
|
|
.append("path")
|
|
.attr("d", path)
|
|
.attr("class", "countries");
|
|
|
|
svg.call(mapZoom).call(mapZoom.transform, zoomSettings);
|
|
}
|
|
|
|
}
|
|
};
|