in src/js/modules/choropleth.js [18:315]
constructor(data, boundaries, overlay, basemap, places, modal, key, codes, place) {
//console.log(overlay, basemap)
var self = this
this.database = data
this.boundaries = boundaries
this.overlay = overlay
this.basemap = basemap
this.places = places
this.place = place
// Add CSS style for highlighted paths if it doesn't exist
if (!document.querySelector('#choropleth-highlight-style')) {
const style = document.createElement('style');
style.id = 'choropleth-highlight-style';
style.textContent = `
.mapArea.highlighted {
opacity: 0.5;
}
`;
document.head.appendChild(style);
}
if (this.database.settings[0].filter!="") {
let filters = this.database.settings[0].filter.split(",")
filters = filters.map(item => item.trim())
if (filters.length == 2) {
let features = places.features.filter(item => {
return item.properties[filters[0]] == filters[1]
})
this.places.features = features
}
}
if (this.database.settings[0].search!="") {
if (this.database.settings[0].search.toLowerCase() == 'true') {
this.database.displaySearch = true
} else {
this.database.displaySearch = false
}
} else {
this.database.displaySearch = false
}
this.database.currentIndex = 0
this.database.locationIndex = 0
this.zoomLevel = 1
this.database.showKey = true
// Remove this when we can do a settings.json merge like in superyacht
if ("showKey" in self.database.mapping[0]) {
if (self.database.mapping[0]['showKey'] != "") {
this.database.showKey = self.database.mapping[0]['showKey'] == "TRUE" ? true : false;
}
}
this.database.showLabels = true
if ("showLabels" in self.database.mapping[0]) {
if (self.database.mapping[0]['showLabels'] != "") {
this.database.showLabels = self.database.mapping[0]['showLabels'] == "TRUE" ? true : false;
}
}
console.log("showLabels", this.database.showLabels)
//this.toolbelt = new Toolbelt()
/*
Create a set of keys based on the JSON from the Googledoc data table
*/
this.database.keys = Object.keys( this.database.data[0] )
// console.log(this.database.keys)
this.id = this.database.keys[0]
// console.log(this.id)
/*
Remove the ID column which is going to be used to map
items to their corresponding
boundaries in the topojson
*/
this.database.keys = this.database.keys.filter(key => key !== this.id)
/*
Specify if the graphic requires a dropdown menu
based on whether the Google doc contains more
than one column (excluding the noew delted ID column)
*/
this.database.dropdown = (self.database.mapping.map( (item) => item.data).length > 1) ? true : false ;
if (self.database.mapping[0].scale === 'swing') {
this.database.dropdown = false
}
this.database.relocate = (self.database.locations.map( (item) => item.data).length > 1) ? true : false ;
/*
Convert all the datum that looks like a number in the data columns to intergers
*/
this.database.data.forEach( item => {
for (let i = 0; i < self.database.keys.length; i++) {
if (!isNaN(item[self.database.keys[i]])) {
if (item[self.database.keys[i]] === "") {
item[self.database.keys[i]] = null
}
else if (typeof item[self.database.keys[i]] === 'string' || item[self.database.keys[i]] instanceof String) {
item[self.database.keys[i]] = +item[self.database.keys[i]]
}
// item[self.database.keys[i]] = (item[self.database.keys[i]]!="") ? +item[self.database.keys[i]] : null ;
}
}
});
// this.hasLabels = (self.database.labels.length > 0) ? true : false ;
/*
Get the name of the topojson object
*/
console.log("data",this.database.data)
this.database.topoKey = Object.keys( this.boundaries.objects )[0]
console.log("topokey",this.database.topoKey)
this.boundaryID = Object.keys( this.boundaries.objects[this.database.topoKey].geometries[0].properties)[0]
//console.log(this.database.settings[0])
if ("boundaryID" in this.database.settings[0]) {
if (this.database.settings[0].boundaryID!="") {
this.boundaryID = this.database.settings[0].boundaryID
}
}
//console.log(this.boundaryID)
if (overlay) {
this.overlayTopoKey = Object.keys( this.overlay.objects )[0]
this.overlayID = Object.keys( this.overlay.objects[this.overlayTopoKey].geometries[0].properties)[0]
}
if (basemap) {
this.basemapTopoKey = Object.keys( this.basemap.objects )[0]
}
/*
Merge the row data from the Googledoc data table to its corresponding boundary
*/
this.boundaries.objects[this.database.topoKey].geometries.forEach( item => {
item.properties = {...item.properties, ...self.database.data.find((datum) => datum[self.id] === item.properties[self.boundaryID])}
});
console.log(boundaries)
/*
Specify the current key
*/
this.database.currentKey = self.database.mapping[0].data;
// Centre Lat, Lon, Zoom
// Defaults to center of Australia, otherwise use set values
this.database.centreLat = -28
this.database.centreLon = 135
this.database.zoomScale = 0
try {
if (self.database.mapping.length > 0) {
let mapArray = Object.keys(self.database.mapping[0])
if (contains(mapArray, 'centreLat') && contains(mapArray, 'centreLon') && contains(mapArray, 'zoomScale')) {
this.database.centreLat = +self.database.mapping[0].centreLat;
this.database.centreLon = +self.database.mapping[0].centreLon;
this.database.zoomScale = +self.database.mapping[0].zoomScale;
}
}
if (self.database.locations.length > 0) {
let locArray = Object.keys(self.database.locations[0])
if (contains(locArray, 'centreLat') && contains(locArray, 'centreLon') && contains(locArray, 'zoomScale')) {
this.database.centreLat = +self.database.locations[0].centreLat;
this.database.centreLon = +self.database.locations[0].centreLon;
this.database.zoomScale = +self.database.locations[0].zoomScale;
}
}
} catch (error) {
console.log("Add location lat and lng")
// Expected output: ReferenceError: nonExistentFunction is not defined
// (Note: the exact output may be browser-dependent)
}
// rename this to zoomLevel later
/*
Check to see if user is on a mobile.
If the user is on a mobile lock the map by default
*/
this.database.zoomOn = true
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isAndroidApp = (window.location.origin === "file://" && isAndroid || window.location.origin === null && isAndroid || window.location.origin === "https://mobile.guardianapis.com" && isAndroid ) ? true : false ;
this.database.isAndroidApp = (isAndroid && !modal) ? true : false ;
this.database.searchBlock = ""
this.database.autocompleteArray = []
this.database.key = key
this.database.codes = codes
this.database.displayOverlay = false
this.database.version = "" //`${window.location.origin}`
this.ractivate()
}