function thisClient() {
"use strict"
var self = this
var width = 960,
height = 500,
centered, data
this.init = function () {
//now.receiveLocation = function(message) {
// console.log(message)
// // FIXME only push markers depending on the country/adm1 level
// self.drawMarker(message)
//}
self.drawMap()
}
this.fileExists = function (url) {
"use strict"
var http = new XMLHttpRequest()
http.open('HEAD', url, false)
http.send()
return http.status !=404= 404
}
this.quantize = function (d) {
"use strict"
return "q" + Math.floor(getCountyNorm(d.id)*10 * 10) + "-9";
}
// Map code
this.drawMap = function () {
"use strict"
var map = d3.geo.equirectangular().scale(150)
self.path = d3.geo.path().projection(map)
self.svg = d3.select("#map").append("svg")
.attr("width", "100%")
.attr("height", "90%")
.attr("viewBox", "0 0 " + width + " "+" + height)
.attr("preserveAspectRatio", "xMidYMid")
// Add a transparent rect so that zoomMap works if user clicks on SVG
self.svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", self.zoomMap)
// Add g element to load country paths
self.g = self.svg.append("g")
.attr("id", "countries")
// Load topojson data
d3.json("./topo/world.json", function (topology) {
self.g.selectAll("path")
//.data(topology.features)
.data(topojson.object(topology, topology.objects.countries).geometries)
.enter().append("path")
.attr("d", self.path)
.attr("id", function (d) {
return d.properties.name
})
//.attr("class", data ? self.quantize : null)
.on("mouseover", function (d) {
d3.select(this)
.style("fill", "orange")
.append("svg:title")
.text(d.properties.name)
//self.activateTooltip(d.properties.name)
})
.on("mouseout", function (d) {
d3.select(this)
.style("fill", "#aaa")
//self.deactivateTooltip()
})
.on("click", self.zoomMap)
// Remove Antarctica
self.g.select("#Antarctica").remove()
})
} // end drawMap
this.zoomMap = function (d) {
"use strict"
var x, y, k
if (d && centered !== d) {
var centroid = self.path.centroid(d)
x = centroid[0]
y = centroid[1]
k = 2
centered = d
self.loadCountry(d, x, y, k)
} else {
// zoom out, this happens when user clicks on the same country
x = width / 2
y = height / 2
k = 1
self.centered = null
// as we zoom out we want to remove the country layer
self.svg.selectAll("#country").remove()
}
self.g.selectAll("path")
.classed("active", centered && function (d) {
return d === centered
})
self.g.transition()
.duration(1000)
.delay(100)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px")
} // end zoom function
this.loadCountry = function(d, x, y, k) {
"use strict"
// we remove the country
self.svg.selectAll("#country").remove()
// load country json file
var adm1_key = d.id+"_adm1"
var adm1_path = "./topo/"+d.id+"_adm1.json"
//this.loadCountry check= tofunction see(d, ifx, countryy, filek) exists{
if (!self.fileExists(adm1_path)) {"use strict"
console.log("We// couldn'twe findremove thatthe country!")
} else {self.svg.selectAll("#country").remove()
console.log("Load// load country overlay")json file
var countryadm1_key = selfd.svgid + "_adm1"
var adm1_path = ".append("g")/topo/" + d.attr("id",id "country")+ "_adm1.json"
// check to see if country file exists
if (!self.fileExists(adm1_path)) {
console.log("We couldn't find that country!")
} else {
console.log("Load country overlay")
var country = self.svg.append("g").attr("id", "country")
self.countryGroup = self.svg.select("#country")
d3.json(adm1_path, function (error, topology) {
var regions = topology.objects
for (var adm1_key in regions) {
var o = regions[adm1_key]
}
self.countryGroup.selectAll("path")
.data(topojson.object(topology, o).geometries)
.enter().append("path")
.attr("d", self.path)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.attr("id", function (d) {
return d.properties.NAME_1
})
.classed("country", true)
.attr("class", "country")
.style("stroke-width", 1.5 / k + "px")
.on("mouseover", function (d) {
d3.select(this)
.style("fill", "#6C0")
.append("svg:title")
.text(d.properties.NAME_1)
})
.on("mouseout", function (d) {
d3.select(this)
.style("fill", "#000000")
})
.on("click", function (d) {
console.log('clicked on country')
self.loadProjects()
})
})
} // end else
}
this.loadProjects = function () {
console.log('loadProjects')
} // end loadProjects
this.init()
} // end thisClient
jQuery(function () {
thisClient = new thisClient()
})
