var meta_map;
var meta_map_current_selects;
var monocle_host = "http://monqcle-mark-dev.50status.com/"; global_site_host;
function populateQueryButtons() {
id = getMetaId();
$.ajax({
url: monocle_host + 'metaquery/' + id + '/get',
method: 'GET',
// dataType: 'json',
//data: JSON.stringify(queryJson),
//contentType: "charset=utf-8",
success: function (result) {
metaquery = JSON.parse(result);
//console.log(metaquery);
$("#title").html(metaquery.title);
//query_form
$.each(metaquery.children, function(m, mc){
//console.log(mc);
$("#query_form").append('
');
});
$("#btnLoadForm").hide();
$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
}
});
}
function populateQueryMap(meta_id) {
year = $("#SliderVal").text();
//console.log("lookup year");
//console.log(year);
$.ajax({
url: monocle_host + 'metaquery/' + meta_id + '/csv?interactive=true&year='+year,
method: 'GET',
// dataType: 'json',
//data: JSON.stringify(queryJson),
//contentType: "charset=utf-8",
success: function (result) {
metaquery = JSON.parse(result);
//console.log(metaquery);
//console.log(url);
highlightStates(metaquery.states, meta_map);
$(".num-of-states").html(metaquery.states.length + " jurisdiction(s)");
//related files
$("#related_files").addClass("hide");
$("#related_files").empty();
$.each(metaquery.related_files, function(f, file){
file_link = ''+file.title+'';
$("#related_files").append(file_link);
});
$("#related_files").removeClass("hide");
}
});
}
function getMetaId()
{
//var dataset_name = location.pathname.match(/\/dataset\/overview\/(.*)/)[1];
var pathArray = window.location.pathname.split( '/' );
//console.log(pathArray);
//console.log(pathArray[2]);
return pathArray[2];
//console.log(pathArray[3]);
/*
dataset_id = pathArray[4];
if(dataset_id !== undefined)
{
return dataset_id;
} else {
return false;
}
*/
}
function highlightStates(states, usmap){
clearHighlightStates(usmap);
$("#us_federal").addClass("hide");
states.forEach(function(stateId){
if(stateId == ''){
$("#us_federal").removeClass("hide");
} else {
if(usmap !== undefined)
{
////console.log("Working with the map");
var state = usmap.svg.selectAll('path.datamaps-subunit.' + stateId);
} else {
////console.log("Can't find a map, so I'll shoot for the moon.");
var state = d3.selectAll('path.datamaps-subunit.' + stateId);
}
state.style('fill', '#ffb400')
}
});
}
function clearHighlightStates(usmap){
$('.stateHeading').html( '');
$('.stateContent').empty();
if(usmap !== undefined){
usmap.svg.selectAll('path.datamaps-subunit')
.style('fill', '#FFFFFF')
.style('stroke', '#000000')
.attr('data-click', 0);
} else {
d3.selectAll('path.datamaps-subunit')
.style('fill', '#FFFFFF')
.style('stroke', '#000000')
.attr('data-click', 0);
}
}
function mapClick(d) {
$('.stateHeading').html(d.properties.name);
currentState = d.properties.name;
map_current_select = currentState;
////console.log(d.id);
//loadStateSideBar(d.id);
runQuery(d, getDatasetName());
if(haslog){
// && $(".timeline-tab").hasClass("hide")){
$(".timeline-tab").removeClass("hide");
}
//any clicks show first tab
if( !$("#home").hasClass("active")){
////console.log("Select 1st Tab");
$('#myTabs li:eq(0) a').tab('show');
highlightStates([map_current_select], map);
//scrollToTable();
setTimeout(scrollToTable, 1000);
} else {
////console.log("1st Tab Already Selected.");
}
}
$(document).ready(function () {
populateQueryButtons();
//Load Map & Affix
meta_map = new Datamap({
element: document.getElementById('query_map'),
scope: 'usa',
fills: {
defaultFill: '#FFFFFF' //any hex, color name or rgb/rgba value
},
geographyConfig: {
highlightFillColor: '#C5CAE9',
highlightBorderColor: '#000000',
borderColor: '#000000',
/*popupTemplate: function (geography, data) {
return '' + geography.properties.name + '
';
}*/
},
done: function (datamap) {
//console.log("datamap done.");
}
});
// ============================= CLICKABLE LABELS PLUGIN ===========================
meta_map.addPlugin('clickLabels', function (layer, options) {
var options = options;
var d3div = d3.select('#query_map');
function stateClick(d, self) {
self.svg.selectAll('.datamaps-subunit').attr('data-click', 0);
//alert('cliked on ' + d.properties.name)
self.svg.selectAll('path.datamaps-subunit')
.style('fill', '#FFFFFF')
.style('stroke', '#000000')
.attr('data-click', 0);
var $this = self.svg.select('path.datamaps-subunit.' + d.id);
$this.style('fill', options.clickedColor || '#00FF00'); // clicked fill color
//////console.log($this.attr('data-click'));
$this.attr('data-click', 1);
//////console.log($this.attr('data-click'));
//////console.log(d.properties.name);
options.click(d) || null;
};
var self = this;
options = options || {};
var labelStartCoodinates = this.projection([-67.707617, 42.722131]);
self.svg.selectAll('.datamaps-subunit').attr('data-click', 0); // set all to unclicked
self.svg.selectAll('.datamaps-subunit')
.on('click', function (geography) {
//stateClick(geography, self);
})
.on('mouseout', function (geography) {
var $this = self.svg.select('path.datamaps-subunit.' + geography.id); // select the path for this current hover over state label
//reapply previous attributes
var previousAttributes = JSON.parse($this.attr('data-previousAttributes'));
for (var attr in previousAttributes) {
$this.style(attr, previousAttributes[attr]);
}
if ($this.attr('data-click') == 1) {
$this.style('fill', options.clickedColor || '#00FF00')
.style("stroke-width", 1)
}
//self.svg.selectAll('.datamaps-hoverover').style('display', 'none');
});
self.svg.selectAll(".datamaps-subunit")
.attr("data-foo", function (d) {
var center = self.path.centroid(d);
var xOffset = 7.5,
yOffset = 5;
if (["FL", "KY", "MI"].indexOf(d.id) > -1) xOffset = -2.5;
if (d.id === "NY") xOffset = -1;
if (d.id === "MI") yOffset = 18;
if (d.id === "LA") xOffset = 13;
var x, y;
x = center[0] - xOffset;
y = center[1] + yOffset;
var smallStateIndex = ["VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC"].indexOf(d.id);
if (smallStateIndex > -1) {
var yStart = labelStartCoodinates[1];
x = labelStartCoodinates[0];
y = yStart + (smallStateIndex * (2 + (options.fontSize || 12)));
layer.append("line")
.attr("x1", x - 3)
.attr("y1", y - 5)
.attr("x2", center[0])
.attr("y2", center[1])
.style("stroke", options.labelColor || "#000")
.style("stroke-width", options.lineWidth || 1)
}
layer.append("text")
.attr("x", x)
.attr("y", y)
.style("font-size", options.fontSize || 8)
.style("font-family", options.fontFamily || "Verdana")
.style("fill", options.labelColor || "#000")
.text(d.id).on("mouseover", function () {
var $this = self.svg.select('path.datamaps-subunit.' + d.id); // select the path for this current hover over state label
// ////console.log($this);
// ////console.log(d);
var previousAttributes = {
'fill': $this.style('fill'),
'stroke': $this.style('stroke'),
'stroke-width': $this.style('stroke-width'),
'fill-opacity': $this.style('fill-opacity')
};
$this
.style('fill', self.options.geographyConfig.highlightFillColor)
.style('stroke', self.options.geographyConfig.highlightBorderColor)
.attr('data-previousAttributes', JSON.stringify(previousAttributes))
.attr('data-click', 0);
})
.on("click", function () {
//////console.log(self.options);
//stateClick(d, self);
//console.log("state click");
})
.on('mouseout', function () {
var $this = self.svg.select('path.datamaps-subunit.' + d.id); // select the path for this current hover over state label
//reapply previous attributes
//////console.log($this.attr('data-click'));
if ($this.attr('data-click') != 1) {
//////console.log($this.attr('data-click'));
var previousAttributes = JSON.parse($this.attr('data-previousAttributes'));
for (var attr in previousAttributes) {
$this.style(attr, previousAttributes[attr]);
}
}
$this.on('mousemove', null);
//self.svg.selectAll('.datamaps-hoverover').style('display', 'none');
})
.on('mousemove', function () {
d3.select("body").style("cursor", "default");
var element = self.svg.select('path.datamaps-subunit.' + d.id);
var options = self.options.geographyConfig;
var position = d3.mouse(this);
var svg = self.svg;
/*
d3.select(svg[0][0].parentNode).select('.datamaps-hoverover')
.style('top', ((position[1] + 30)) + "px")
.html(function () {
var data = JSON.parse(element.attr('data-info'));
//if ( !data ) return '';
return options.popupTemplate(d, data);
})
.style('left', (position[0]) + "px")
.style('display', 'block');
*/
})
});
});
meta_map.clickLabels({
clickedColor: '#A3C2C2',
click: mapClick
});
$('#query_map_wrapper').affix({
offset: {
top: 245,
bottom: 480
}
});
var $body = $(document.body);
var navHeight = $('.navbar-collapse').outerHeight(true) + 80;
$body.scrollspy({
target: '#affix_wrapper',
offset: navHeight
});
//END - Load Map & Affix
//slider
/*
var d = new Date();
var year = d.getFullYear();
*/
year = 2015;
$("#SliderInput").slider({
min: 1990,
max : year,
value : year
});
$("#SliderVal").text(year);
$("#StartYear").val($("#SliderInput").val());
$("#SliderInput").on("slideStop", function(slideEvt) {
$("#SliderVal").text(slideEvt.value);
$("#StartYear").val(slideEvt.value);
//startedQuerying = true;
//submitQueryForm($("#filter-map-form"));
});
$(document).on('click', '.btn-metaquery', function () {
meta_id = $(this).data('id');
//console.log(meta_id);
populateQueryMap(meta_id);
});
});