" + object.object.properties.value + ""
}
},
onHover: (object) => {
if (object.object !== undefined) {
document.getElementById("hovercounty").innerHTML = "
" + object.object.properties.value + ""
}
}
});
// choropleth layer
const countyPlethLayer1 = new deck.MapboxLayer({
id: 'countydata1',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_cn_shp.the_geom_webmercator, supermap_cn_shp.cartodb_id, currentgeos_09212021.population, supermap_cn_shp.area_name, currentcostofliv.aggr, currentcostofliv.house_median_value as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_cn_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_cn_shp.onecode inner join currentcostofliv on supermap_cn_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cn_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cn_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const countyPlethLayer2 = new deck.MapboxLayer({
id: 'countydata2',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_cn_shp.the_geom_webmercator, supermap_cn_shp.cartodb_id, currentgeos_09212021.population, supermap_cn_shp.area_name, currentcostofliv.aggr, currentcrimclimmisc_09212021.crimeviolent as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_cn_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_cn_shp.onecode inner join currentcostofliv on supermap_cn_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cn_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cn_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const countyPlethLayer3 = new deck.MapboxLayer({
id: 'countydata3',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_cn_shp.the_geom_webmercator, supermap_cn_shp.cartodb_id, currentgeos_09212021.population, supermap_cn_shp.area_name, currentcostofliv.aggr, currentcrimclimmisc_09212021.crimeproperty as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_cn_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_cn_shp.onecode inner join currentcostofliv on supermap_cn_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cn_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cn_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const countyPlethLayer4 = new deck.MapboxLayer({
id: 'countydata4',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_cn_shp.the_geom_webmercator, supermap_cn_shp.cartodb_id, currentgeos_09212021.population, supermap_cn_shp.area_name, currentcostofliv.aggr, currentcostofliv.aggr as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_cn_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_cn_shp.onecode inner join currentcostofliv on supermap_cn_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cn_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cn_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
/* METROS DATA LAYERS */
// choropleth layer
const metroPlethLayer1 = new deck.MapboxLayer({
id: 'metrodata1',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_ms_shp.the_geom_webmercator, supermap_ms_shp.cartodb_id, currentgeos_09212021.population, supermap_ms_shp.area_name, currentcostofliv.aggr, currenthousing_09212021.housemedianvalue as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_ms_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_ms_shp.onecode inner join currenthousing_09212021 on currenthousing_09212021.onecode = supermap_ms_shp.onecode inner join currentcostofliv on supermap_ms_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_ms_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_ms_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const metroPlethLayer2 = new deck.MapboxLayer({
id: 'metrodata2',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_ms_shp.the_geom_webmercator, supermap_ms_shp.cartodb_id, currentgeos_09212021.population, supermap_ms_shp.area_name, currentcostofliv.aggr, currentcrimclimmisc_09212021.crimeviolent as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_ms_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_ms_shp.onecode inner join currentcostofliv on supermap_ms_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_ms_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_ms_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const metroPlethLayer3 = new deck.MapboxLayer({
id: 'metrodata3',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_ms_shp.the_geom_webmercator, supermap_ms_shp.cartodb_id, currentgeos_09212021.population, supermap_ms_shp.area_name, currentcostofliv.aggr, currentcrimclimmisc_09212021.crimeproperty as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_ms_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_ms_shp.onecode inner join currentcostofliv on supermap_ms_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_ms_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_ms_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const metroPlethLayer4 = new deck.MapboxLayer({
id: 'metrodata4',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_ms_shp.the_geom_webmercator, supermap_ms_shp.cartodb_id, currentgeos_09212021.population, supermap_ms_shp.area_name, currentcostofliv.aggr, currentcostofliv.aggr as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_ms_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_ms_shp.onecode inner join currentcostofliv on supermap_ms_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_ms_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_ms_shp.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// zipcodePleth layer
const zipcodePlethLayer1 = new deck.MapboxLayer({
id: 'zipcodedata1',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_simp_zi_2021.the_geom_webmercator, supermap_simp_zi_2021.cartodb_id, currentgeos_09212021.population, supermap_simp_zi_2021.area_name, currentcostofliv.aggr, currentcostofliv.house_median_value as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_simp_zi_2021 inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_simp_zi_2021.onecode inner join currentcostofliv on supermap_simp_zi_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_zi_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_zi_2021.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const zipcodePlethLayer2 = new deck.MapboxLayer({
id: 'zipcodedata2',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_simp_zi_2021.the_geom_webmercator, supermap_simp_zi_2021.cartodb_id, currentgeos_09212021.population, supermap_simp_zi_2021.area_name, currentcostofliv.aggr, currentcrimclimmisc_09212021.crimeviolent as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_simp_zi_2021 inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_simp_zi_2021.onecode inner join currentcostofliv on supermap_simp_zi_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_zi_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_zi_2021.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
//console.log(cityvalue)
}
}
});
// choropleth layer
const zipcodePlethLayer3 = new deck.MapboxLayer({
id: 'zipcodedata3',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_simp_zi_2021.the_geom_webmercator, supermap_simp_zi_2021.cartodb_id, currentgeos_09212021.population, supermap_simp_zi_2021.area_name, currentcostofliv.aggr, currentcrimclimmisc_09212021.crimeproperty as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_simp_zi_2021 inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_simp_zi_2021.onecode inner join currentcostofliv on supermap_simp_zi_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_zi_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_zi_2021.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
console.log(cityvalue)
}
}
});
// choropleth layer
const zipcodePlethLayer4 = new deck.MapboxLayer({
id: 'zipcodedata4',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT supermap_simp_zi_2021.the_geom_webmercator, supermap_simp_zi_2021.cartodb_id, currentgeos_09212021.population, supermap_simp_zi_2021.area_name, currentcostofliv.aggr, currentcostofliv.aggr as value, currentcrimclimmisc_09212021.crimeproperty FROM fastforward.supermap_simp_zi_2021 inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_simp_zi_2021.onecode inner join currentcostofliv on supermap_simp_zi_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_zi_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_zi_2021.onecode = currentcomfortindex.onecode',
opacity: 0.25,
getFillColor: (object) => {
if (object.properties.value <= 50000) {
return [254,217,118];
} else if (object.properties.value <= 100000) {
return [254,178,76];
} else if (object.properties.value <= 250000) {
return [253,141,60];
} else if (object.properties.value <= 500000) {
return [252,78,42];
} else if (object.properties.value <= 1000000) {
return [227,26,28];
} else {
return [177,0,38];
}
},
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
onDataLoad: () => {
},
onClick: (object) => {
},
onHover: (object) => {
if (object.object !== undefined) {
var cityvalue = object.object.properties.value
console.log(cityvalue)
}
}
});
// Start States
const stateLayer = new deck.MapboxLayer({
id: 'state',
type: deck.carto.CartoSQLLayer,
//CartoLayer with type=MAP_TYPES.QUERY and apiVersion=API_VERSIONS.V2
// supermap_simp_st_2021
data: "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, housemedianvalue as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currenthousing_09212021 on supermap_simp_st_2021.onecode = currenthousing_09212021.onecode inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode",
// supermap_st_2021
//data: "SELECT supermap_st_2021.the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_st_2021.cartodb_id, supermap_st_2021.onecode, currentgeos_09212021.population, aggr as col, house_median_value as homeval, crimeviolent as criviol, crimeproperty as criprop, FROM fastforward.supermap_st_2021 inner join fastforward.currentgeos_09212021 on supermap_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_st_2021.onecode = currentcomfortindex.onecode",
getLineColor: [116,135,115,255],
getFillColor: [255,255,255,1],
getLineWidth: 4000,
lineJointRounded: true,
extruded: false,
lineWidthMinPixels: 1,
lineWidthMaxPixels: 1,
filled: true,
stroked: true,
visible:true,
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY},
depthTest:false,
pickable: true,
highlightColor: [255,0,0,50],
autoHighlight: true,
onHover: (object) => {
if (object.object !== undefined) {
//console.log(object.object)
var criViol = object.object.properties['criviol']
var criProp = object.object.properties['criprop']
var homeVal = object.object.properties['homeval']
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = object.object.properties['col']
var stateLabel = object.object.properties['areaname']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(object.object.properties.population) / 1000000).toFixed(1) + "M " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
}
var ciLayer = map.getLayer('cities-ST-class1-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class1-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class2-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class2-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class3-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class3-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class4-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class4-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class5-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class5-hover', 'visibility', 'none');
}
},
onClick: (object) => {
clicked_place = object.object.properties.areaname;
var st = abbrState(clicked_place,"abbr");
var clicked_cartoID = object.object.properties.cartodb_id;
var bbox = turf.extent(object.object.geometry);
// change state layer query first
var newSQL = "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, currenthousing_09212021.housemedianvalue as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join fastforward.currenthousing_09212021 on supermap_simp_st_2021.onecode = currenthousing_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where state_abbr != '" + st + "'"
stateLayer.setProps({data: newSQL})
// ADD STATE BOUNDARY HIGHLIGHT
var theSQL = "select ST_asGeoJSON(st_simplifypreservetopology(supermap_simp_st_2021.the_geom, 0.01)) as geom, supermap_simp_st_2021.area_name as areaname, supermap_simp_st_2021.state_abbr as state_abbrev from supermap_simp_st_2021 where cartodb_id = '" + clicked_cartoID + "'"
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
map.addSource('state_bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'state_bnd',
'type': 'line',
'source': 'state_bnd',
'layout': {
'line-join': 'round'
},
'paint': {
'line-color': '#088',
'line-width': 3
}
});
});
document.getElementById("reset_maps").style = 'display:inline-block;';
// reset data window
if (object.object !== undefined) {
var criViol = object.object.properties['criviol']
var criProp = object.object.properties['criprop']
var homeVal = object.object.properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
//var placeLabel = object.object.properties['label_field']
var costLiv = object.object.properties['col']
var stateLabel = object.object.properties['areaname']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(object.object.properties.population) / 1000000).toFixed(1) + "M " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
}
// CITY DATA LAYER
var cityDataBtn1 = document.getElementById("CityData1");
var cityDataBtn2 = document.getElementById("CityData2");
var cityDataBtn3 = document.getElementById("CityData3");
var cityDataBtn4 = document.getElementById("CityData4");
// QUERY ONLY CITIES LABELED ON MAP
//var newSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcostofliv.house_median_value as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
if (clicked_place.length > 2) {
}
// IF LAYERS EXIST, REMOVE THEM
var ciLayer = map.getLayer('county-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('county-labels');
map.removeLayer('county-click');
map.removeLayer('county-hover');
map.removeSource('county-labels')
}
var ciLayer = map.getLayer('zipcode-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('zipcode-labels');
map.removeLayer('zipcode-hover');
map.removeLayer('zipcode-click');
map.removeSource('zipcode-labels')
}
var ciLayer = map.getLayer('cities-ST-class1-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class1-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class2-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class2-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class3-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class3-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class4-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class4-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class5-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class5-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class1-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class1-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class2-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class2-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class3-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class3-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class4-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class4-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class5-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class5-click', 'visibility', 'none');
}
// get click location
var click_loc = object.coordinate;
var click_lat = object.coordinate[1];
var click_lng = object.coordinate[0];
document.getElementById("hovercounty").innerHTML = clicked_place
// IF State Boundary Exists, Remove It.
var ciLayer = map.getLayer('state_bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('state_bnd');
map.removeSource('state_bnd');
}
// if city bnd exists
var ciLayer = map.getLayer('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('city-bnd');
map.removeSource('city-bnd');
} else {
}
var ciLayer = map.getLayer('cities-ST-class1-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class1-labels');
map.removeLayer('cities-ST-class1-hover');
map.removeLayer('cities-ST-class1-click');
map.removeSource('citiesSTClass1LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class2-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class2-labels');
map.removeLayer('cities-ST-class2-hover');
map.removeLayer('cities-ST-class2-click');
map.removeSource('citiesSTClass2LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class3-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class3-labels');
map.removeLayer('cities-ST-class3-hover');
map.removeLayer('cities-ST-class3-click');
map.removeSource('citiesSTClass3LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class4-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class4-labels');
map.removeLayer('cities-ST-class4-hover');
map.removeLayer('cities-ST-class4-click');
map.removeSource('citiesSTClass4LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class5-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class5-labels');
map.removeLayer('cities-ST-class5-hover');
map.removeLayer('cities-ST-class5-click');
map.removeSource('citiesSTClass5LabelSrc')
}
//credentials: { username: 'fastforward', apiKey: , serverUrlTemplate: 'https://fastforward.carto.com'}
// CITY CLASSES
//var theSQL = "select the_geom_webmercator, _current_p as curr_popul, cartodb_id, name, _cbsa_code as cbsacode, _onecode as onecode, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat, _state as state from allcities order by curr_popul desc"
//var theSQL = "select the_geom_webmercator, _current_p as curr_popul, cartodb_id, name, _cbsa_code as cbsacode, _onecode as onecode, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat, _state as state from allcities where _state = '" + abbrev + "'" + " order by curr_popul desc"
//var theSQL = "select allcities.the_geom_webmercator, _current_p as curr_popul, allcities.cartodb_id, name, _onecode as onecode, ST_X(ST_AsText(allcities.the_geom)) as lng, ST_Y(ST_AsText(allcities.the_geom)) as lat, _state as state, housmedval_label, cstlivng, criviol, criprop from allcities left join ci_2016update on allcities._onecode = ci_2016update.onecode_1 where _state = '" + abbrev + "' order by curr_popul desc"
var theSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population as population, ST_X(ST_AsText(supermap_cities_cds_bert.the_geom)) as lng, ST_Y(ST_AsText(supermap_cities_cds_bert.the_geom)) as lat, currentcostofliv.aggr as cstlivng, currenthousing_09212021.housemedianvalue as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currenthousing_09212021 on supermap_cities_cds_bert.onecode = currenthousing_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr = '" + st + "' order by population desc"
//console.log(theSQL);
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
// GET Class Breaks for City Classes
var jenksBreaks = getClassBreaks(st)[0]
var result = data.rows;
//console.log(data);
var class1 = [];
var class2 = [];
var class3 = [];
var class4 = [];
var class5 = [];
// Use jenksBreaks to split the Cities GeoJSON into separate classes
for (var i = 0; i < result.length; i++) {
var population = data.rows[i].population;
if (population < jenksBreaks[0]) { // Class 5
//console.log("class 5");
class5.push(data.rows[i]);
} else if (population >= jenksBreaks[0] && population < jenksBreaks[1]) { // Class 4
//console.log("class 2");
class4.push(data.rows[i]);
} else if (population >= jenksBreaks[1] && population < jenksBreaks[2]) { // Class 3
//console.log("class 3")
class3.push(data.rows[i]);
} else if (population >= jenksBreaks[2] && population < jenksBreaks[3]) { // Class 2
//console.log("class 4")
class2.push(data.rows[i]);
} else if (population >= jenksBreaks[3]) { // Class 1
//console.log("class 1")
class1.push(data.rows[i]);
} else {
//console.log("somehow not in jenks classification. " + population + " : " + jenksBreaks)
}
}
const class1_geoJsonFeatures = class1.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class2_geoJsonFeatures = class2.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class3_geoJsonFeatures = class3.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class4_geoJsonFeatures = class4.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class5_geoJsonFeatures = class5.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//CLASS 5
map.addSource('citiesSTClass5LabelSrc', { type: 'geojson', data: null });
const class5Source = map.getSource('citiesSTClass5LabelSrc');
class5Source.setData({type: 'FeatureCollection',features: class5_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class5-labels","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class5-hover","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class5-click","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 4
map.addSource('citiesSTClass4LabelSrc', { type: 'geojson', data: null });
const class4Source = map.getSource('citiesSTClass4LabelSrc');
class4Source.setData({type: 'FeatureCollection',features: class4_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class4-labels","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class4-hover","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class4-click","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 3
map.addSource('citiesSTClass3LabelSrc', { type: 'geojson', data: null });
const class3Source = map.getSource('citiesSTClass3LabelSrc');
class3Source.setData({type: 'FeatureCollection',features: class3_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class3-labels","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class3-hover","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class3-click","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 2
map.addSource('citiesSTClass2LabelSrc', { type: 'geojson', data: null });
const class2Source = map.getSource('citiesSTClass2LabelSrc');
class2Source.setData({type: 'FeatureCollection',features: class2_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class2-labels","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class2-hover","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class2-click","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 1
map.addSource('citiesSTClass1LabelSrc', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSTClass1LabelSrc');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class1-labels","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class1-hover","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class1-click","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
var toggleCities = document.getElementById("toggleCities");
var hasClass = toggleCities.classList.contains('active');
//console.log(state_click_count);
if (state_click_count > 0) {
if (hasClass) {
//console.log("btn is active");
// setting the cities layers visibility definiively so they can be turned off with toggle
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'visible');
} else {
//console.log("btn not active");
// setting the cities layers visibility definiively so they can be turned off with toggle
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'none');
}
// this is the initial state click, so we show cities by default.
} else {
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'visible');
var toggleCities = document.getElementById("toggleCities");
toggleCities.classList.add('active');
}
state_click_count += 1
});
// Counties Layer
var cl_st = abbrState(clicked_place,"abbr");
var newSQL = "SELECT * FROM supermap_cn_shp where state_abbr = '" + cl_st + "'"
var countiesLayer = map.getLayer('counties');
if (typeof countiesLayer !== "undefined") {
var visibility = map.getLayoutProperty('counties', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
countyLayer.setProps({data: newSQL, visible:true})
map.setLayoutProperty('counties', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleCounties");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('county-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('county-labels', ["==","state",clicked_state]);
map.setLayoutProperty('county-labels', 'visibility', 'visible');
map.moveLayer('county-labels','cities-ST-class1-labels');
} else {
}
} else {
// handle layer visibility
countyLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('counties', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleCounties");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('county-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('county-labels', ["==","state",clicked_state]);
map.setLayoutProperty('county-labels', 'visibility', 'none');
} else {
}
}
} else {
countyLayer.setProps({data: newSQL, visible: false})
}
// ZipCodes Layer
var st = abbrState(clicked_place,"abbr");
var newSQL = "SELECT the_geom_webmercator, split_part(area_name,',',1) as areaname FROM supermap_simp_zi_2021 where state_abbr = '" + st + "'"
var countiesLayer = map.getLayer('zipcodes');
if (typeof countiesLayer !== "undefined") {
var visibility = map.getLayoutProperty('zipcodes', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
zipCodeLayer.setProps({data: newSQL, visible:true})
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleZips");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('zipcode-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('zipcode-labels', ["==","state",clicked_state]);
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
map.moveLayer('zipcode-labels');
} else {
}
} else {
// handle layer visibility
zipCodeLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('zipcodes', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleZips");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('zipcode-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('zipcode-labels', ["==","state",clicked_state]);
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
} else {
}
}
} else {
zipCodeLayer.setProps({data: newSQL, visible: false})
}
// Metros Layer
//var newSQL = "SELECT the_geom_webmercator FROM supermap_ms_shp where area_name LIKE '%" + abbrev + "%'"
var newSQL = "select the_geom_webmercator FROM supermap_ms_shp where supermap_ms_shp.area_name NOT LIKE '%Micro%' AND supermap_ms_shp.area_name LIKE '%" + st + "%'"
//console.log(newSQL)
var countiesLayer = map.getLayer('metros');
if (typeof countiesLayer !== "undefined") {
//console.log('metros exists')
var visibility = map.getLayoutProperty('metros', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
metrosLayer.setProps({data: newSQL, visible:true, pickable:true})
map.setLayoutProperty('metros', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleMetros");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('metro-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('metro-labels', ["==","state",clicked_state]);
map.setLayoutProperty('metro-labels', 'visibility', 'visible');
map.moveLayer('metro-labels');
} else {
}
} else {
// handle layer visibility
metrosLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('metros', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleMetros");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('metro-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('metro-labels', ["==","state",clicked_state]);
map.setLayoutProperty('metro-labels', 'visibility', 'none');
} else {
}
}
} else {
metrosLayer.setProps({data: newSQL, visible: false})
}
//src & id 'refCities-labels'
var ciLayer = map.getLayer('refCities-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('refCities-labels');
}
var ciLayer = map.getSource('refCities-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('refCities-labels')
}
loadRefCities();
var zoom = map.getZoom();
var zoom_threshold = getZoomLevelByState(st);
//console.log(features);
if (zoom >= zoom_threshold) {
setTimeout(function(){
map.flyTo({center: [click_lng,click_lat]})
//stateLayer.setProps({data: newSQL})
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// THIS IS FOR MOBILE!!
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;bottom:0px!important;background-color:rgba(255,255,255,1.0);width:100%;height:25%;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
} else {
// THIS IS FOR DESKTOP
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;right:10px;top:80px;margin-bottom:5px;background-color:rgba(255,255,255,1.0);width:30%;border-radius:7px;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
}
},700);
} else {
setTimeout(function(){
//stateLayer.setProps({data: newSQL})
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// THIS IS FOR MOBILE
map.fitBounds(bbox, {
padding: {top: 0, bottom:350, left: 25, right: 25}
});
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;bottom:0px!important;background-color:rgba(255,255,255,1.0);width:100%;height:25%;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
} else {
map.fitBounds(bbox, {
padding: {top: 25, bottom:50, left: 25, right: 400}
});
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;right:10px;top:80px;margin-bottom:5px;background-color:rgba(255,255,255,1.0);width:30%;border-radius:7px;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
}
},700);
}
var zipcodesLayer = map.getLayer('zipcodes');
if (typeof zipcodesLayer !== "undefined") {
// button is on, layer is found
//console.log("btn on, layer found");
//map.setLayoutProperty('zipcodes', 'visibility', 'visible');
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
//console.log("btn not on, layer found")
map.removeLayer("zipcodes");
var ciLayer = map.getLayer('zipcode-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('zipcode-labels');
map.removeLayer('zipcode-hover');
map.removeLayer('zipcode-click');
}
ciLayer = map.getSource('zipcode-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('zipcode-labels')
}
//console.log("btn not on, layer not found")
var st = abbrState(clicked_place,"abbr");
var theSQL = "select supermap_zi_shp.the_geom, ST_X(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lng, ST_Y(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lat, split_part(supermap_zi_shp.area_name,',',1) as areaname, split_part(supermap_zi_shp.area_name,',',2) as zipname, population, supermap_zi_shp.state_abbr as state_abbrev, supermap_zi_shp.onecode, currentcostofliv.aggr as cstlivng, currenthousing_09212021.housemedianvalue as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_zi_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_zi_shp.onecode inner join currenthousing_09212021 on currenthousing_09212021.onecode = supermap_zi_shp.onecode inner join currentcostofliv on supermap_zi_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_zi_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_zi_shp.onecode = currentcomfortindex.onecode where state_abbr = '" + st + "'"
//console.log(theSQL);
var sql = new cartodb.SQL({ user: 'fastforward', api_key: CARTO_DEV_API_KEY, format: 'geojson' });
sql.execute(theSQL).done(function(geojson) {
//console.log("here is the geojson", geojson);
const zipslayer = new deck.MapboxLayer({
id: 'zipcodes',
data: geojson,
type: deck.GeoJsonLayer,
opacity: 1,
stroked: true,
filled: true,
extruded: false,
wireframe: false,
getLineColor: [116,135,115,255],
lineWidthMinPixels: 1,
lineWidthMaxPixels: 1,
lineJointRounded: true,
getFillColor: [255,255,255,1],
getLineWidth: 1,
pickable: true
});
map.addLayer(zipslayer);
map.moveLayer('zipcodes');
//map.moveLayer('zipcodes');
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
map.addSource('zipcode-labels', { type: 'geojson', data: null });
const ZIlabelSource = map.getSource('zipcode-labels');
const state_geoJsonFeatures = geojson.features.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.properties.lng, feature.properties.lat]},"properties":{"label_field": feature.properties.areaname,"state": feature.properties.state_abbrev, "onecode": feature.properties.onecode,"population": feature.properties.population,"homeval": feature.properties.homeval,"cstlivng": feature.properties.cstlivng,"criviol": feature.properties.criviol,"criprop": feature.properties.criprop, "zipname": feature.properties.zipname}}});
//console.log(state_geoJsonFeatures);
ZIlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "zipcode-labels","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-offset": [0, 0],"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgb(139,69,19)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
map.addLayer({
"id": "zipcode-hover","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
map.addLayer({
"id": "zipcode-click","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
var dataBtn = document.getElementById("toggleZips")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
} else {
map.setLayoutProperty('zipcodes', 'visibility', 'none');
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
}
addZipPleth(geojson,'cstlivng',"YlOrRd");
addZipPleth(geojson,'homeval',"PuRd");
addZipPleth(geojson,'criprop',"YlGnBu");
addZipPleth(geojson,'criviol',"YlGn");
var dataBtn = document.getElementById("ZipCodeData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'none');
}
var citytrue = $("#toggleZips").hasClass("active");
if (citytrue == true) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
} else {
// button is not active. map probably being loaded the first time
map.setLayoutProperty('zipcodes', 'visibility', 'none');
}
});
//map.moveLayer('cities-ST-class1-labels');
//map.moveLayer('cities-ST-class2-labels');
//map.moveLayer('cities-ST-class3-labels');
//map.moveLayer('cities-ST-class4-labels');
//map.moveLayer('cities-ST-class5-labels');
} else {
// button is on, layer is not found
//console.log("btn on, layer NOT found")
//console.log("btn not on, layer not found")
var st = abbrState(clicked_place,"abbr");
var theSQL = "select supermap_zi_shp.the_geom, ST_X(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lng, ST_Y(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lat, split_part(supermap_zi_shp.area_name,',',1) as areaname, split_part(supermap_zi_shp.area_name,',',2) as zipname, population, supermap_zi_shp.state_abbr as state_abbrev, supermap_zi_shp.onecode, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_zi_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_zi_shp.onecode inner join currentcostofliv on supermap_zi_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_zi_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_zi_shp.onecode = currentcomfortindex.onecode where state_abbr = '" + st + "'"
//console.log(theSQL);
var sql = new cartodb.SQL({ user: 'fastforward', api_key: CARTO_DEV_API_KEY, format: 'geojson' });
sql.execute(theSQL).done(function(geojson) {
//console.log("here is the geojson", geojson);
const zipslayer = new deck.MapboxLayer({
id: 'zipcodes',
data: geojson,
type: deck.GeoJsonLayer,
opacity: 1,
stroked: true,
filled: true,
extruded: false,
wireframe: false,
getLineColor: [116,135,115,255],
lineWidthMinPixels: 1,
lineWidthMaxPixels: 1,
lineJointRounded: true,
getFillColor: [255,255,255,1],
getLineWidth: 1,
pickable: true
});
map.addLayer(zipslayer);
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
map.addSource('zipcode-labels', { type: 'geojson', data: null });
const ZIlabelSource = map.getSource('zipcode-labels');
const state_geoJsonFeatures = geojson.features.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.properties.lng, feature.properties.lat]},"properties":{"label_field": feature.properties.areaname,"state": feature.properties.state_abbrev, "onecode": feature.properties.onecode,"population": feature.properties.population,"homeval": feature.properties.homeval,"cstlivng": feature.properties.cstlivng,"criviol": feature.properties.criviol,"criprop": feature.properties.criprop, "zipname": feature.properties.zipname}}});
//console.log(state_geoJsonFeatures);
ZIlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "zipcode-labels","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-offset": [0, 0],"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgb(139,69,19)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
map.addLayer({
"id": "zipcode-hover","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
map.addLayer({
"id": "zipcode-click","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
addZipPleth(geojson,'cstlivng',"YlOrRd");
addZipPleth(geojson,'homeval',"PuRd");
addZipPleth(geojson,'criprop',"YlGnBu");
addZipPleth(geojson,'criviol',"YlGn");
var dataBtn = document.getElementById("toggleZips")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
} else {
map.setLayoutProperty('zipcodes', 'visibility', 'none');
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
}
var dataBtn = document.getElementById("ZipCodeData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'none');
}
var citytrue = $("#toggleZips").hasClass("active");
if (citytrue == true) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
} else {
// button is not active. map probably being loaded the first time
map.setLayoutProperty('zipcodes', 'visibility', 'none');
}
//map.moveLayer('cities-ST-class1-labels');
//map.moveLayer('cities-ST-class2-labels');
//map.moveLayer('cities-ST-class3-labels');
//map.moveLayer('cities-ST-class4-labels');
//map.moveLayer('cities-ST-class5-labels');
});
}
},
onDataLoad: (value) => {
//console.log(map.getStyle().layers);
//console.log(clicked_place);
if (clicked_place != "") {
//console.log("state clicked, so now can adjust state clickability");
// var clicked_state_abbr = abbrState(clicked_place,"abbr").toUpperCase();
// stateLayer.setProps({
// data: "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, housemedianvalue as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join fastforward.currenthousing_09212021 on supermap_simp_st_2021.onecode = currenthousing_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where state_abbr != '" + clicked_state_abbr + "'",
// });
// console.log(clicked_state_abbr);
var toggleCities = document.getElementById("toggleCities");
toggleCities.classList.add('active');
} else {
}
}
});
// End States
// Start Metro
const zipCodeLayer = new deck.MapboxLayer({
id: 'zipcodes',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT the_geom_webmercator, cartodb_id, area_name FROM supermap_zi_shp',
getLineColor: [139,69,19],
getFillColor: [139, 69, 19, 20],
getLineWidth: 250,
lineJointRounded: true,
lineWidthMinPixels: 1,
lineWidthMaxPixels: 2,
filled: false,
stroked: true,
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
highlightColor: [255,0,0],
onDataLoad: () => {
//console.log("zips loaded");
// only want this to occur if Counties btn is selected
var countyBtn = document.getElementById("toggleZips")
var hasClass = countyBtn.classList.contains('active');
if (hasClass) {
//loadZipCodeLabels(clicked_place);
/*
var zoom = map.getZoom();
if (zoom >= 8.5) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
} else {
map.setLayoutProperty('zipcodes', 'visibility', 'none');
map.flyTo({zoom:8.5});
}
*/
//console.log("metros loaded. btn state is active");
//loadMetroLabels(clicked_place);
//stateLayer.setProps({pickable:false});
} else {
}
},
onClick: (object) => {
}
});
// End Metro
// Start Metro
const metrosLayer = new deck.MapboxLayer({
id: 'metros',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT the_geom_webmercator FROM supermap_ms_shp',
getLineColor: [115,92,9],
getFillColor: [200, 160, 8,20],
getLineWidth: 2000,
lineJointRounded: true,
lineWidthMinPixels: 1,
lineWidthMaxPixels: 2,
filled: true,
stroked: true,
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
highlightColor: [255,0,0],
onDataLoad: () => {
// only want this to occur if Counties btn is selected
var countyBtn = document.getElementById("toggleMetros")
var hasClass = countyBtn.classList.contains('active');
if (hasClass) {
//console.log("metros loaded. btn state is active");
loadMetroLabels(clicked_place);
//stateLayer.setProps({pickable:false});
}
},
onClick: (object) => {
}
});
// End Metro
// Start County
const countyLayer = new deck.MapboxLayer({
id: 'counties',
type: deck.carto.CartoSQLLayer,
uniqueIdProperty: 'cartodb_id',
data: 'SELECT the_geom_webmercator FROM supermap_cn_shp',
opacity: 0.1,
getLineColor: [150,150,150],
getFillColor: [255,255,255,1],
getLineWidth: 10,
lineJointRounded: true,
lineWidthMinPixels: 1,
filled: true,
stroked: true,
credentials: { username: 'fastforward', apiKey: CARTO_DEV_API_KEY, serverUrlTemplate: 'https://fastforward.carto.com'},
depthTest:false,
highlightColor: [255,0,0],
onDataLoad: () => {
// only want this to occur if Counties btn is selected
var countyBtn = document.getElementById("toggleCounties")
var hasClass = countyBtn.classList.contains('active');
if (hasClass) {
//console.log("counties loaded. btn state is active");
loadCountyLabels(clicked_place);
}
},
onClick: (object) => {
}
});
// End County
function loadZipCodeLabels(clicked_place) {
var ciLayer = map.getLayer('zipcode-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('zipcode-labels');
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.removeLayer('zipcode-hover');
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('zipcode-click');
}
var ciLayer = map.getSource('zipcode-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('zipcode-labels')
}
var st = abbrState(clicked_place,"abbr");
var theSQL = "select split_part(supermap_zi_labels_2021.area_name,',',1) as areaname, split_part(supermap_zi_labels_2021.area_name,',',2) as zipname, population, supermap_zi_labels_2021.state_abbr as state_abbrev, ST_X(ST_AsText(supermap_zi_labels_2021.the_geom)) as lng, ST_Y(ST_AsText(supermap_zi_labels_2021.the_geom)) as lat, supermap_zi_labels_2021.onecode, currentcostofliv.aggr as cstlivng, currenthousing_09212021.housemedianvalue as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_zi_labels_2021 inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_zi_labels_2021.onecode inner join currenthousing_09212021 on currenthousing_09212021.onecode = supermap_zi_labels_2021.onecode inner join currentcostofliv on supermap_zi_labels_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_zi_labels_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_zi_labels_2021.onecode = currentcomfortindex.onecode where state_abbr = '" + st + "'"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
//console.log(theSQL)
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
map.addSource('zipcode-labels', { type: 'geojson', data: null });
const ZIlabelSource = map.getSource('zipcode-labels');
const state_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"label_field": feature.areaname,"state": feature.state_abbrev, "onecode": feature.onecode,"population": feature.population,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop, "zipname": feature.zipname}}});
ZIlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "zipcode-labels","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-offset": [0, 0],"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgb(139,69,19)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
},'cities-ST-class5-click');
map.addLayer({
"id": "zipcode-hover","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
},'cities-ST-class5-click');
map.addLayer({
"id": "zipcode-click","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
});
}
function loadMetroLabels(clicked_place) {
// abbrev
var st = abbrState(clicked_place,"abbr");
var theSQL = "select ST_X(ST_AsText(ST_Centroid(supermap_ms_shp.the_geom))) as lng, ST_Y(ST_AsText(ST_Centroid(supermap_ms_shp.the_geom))) as lat, supermap_ms_shp.area_name, currentgeos_09212021.population, supermap_ms_shp.state_abbr as state_abbrev, supermap_ms_shp.msjoined_3 as onecode, currentcostofliv.aggr as cstlivng, currenthousing_09212021.housemedianvalue as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_ms_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_ms_shp.msjoined_3 inner join currentcostofliv on supermap_ms_shp.msjoined_3 = currentcostofliv.onecode inner join currenthousing_09212021 on supermap_ms_shp.msjoined_3 = currenthousing_09212021.onecode inner join currentcrimclimmisc_09212021 on supermap_ms_shp.msjoined_3 = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_ms_shp.msjoined_3 = currentcomfortindex.onecode where supermap_ms_shp.area_name NOT LIKE '"+ encodeURIComponent("%") + "Micro" + encodeURIComponent("%") +"' AND supermap_ms_shp.area_name LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "' order by currentgeos_09212021.population desc"
//console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
//console.log(data);
var ciLayer = map.getLayer('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-labels');
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-hover');
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-click');
}
var ciLayer = map.getSource('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('metro-labels');
}
map.addSource('metro-labels', { type: 'geojson', data: null });
const metrolabelSource = map.getSource('metro-labels');
const metros_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"label_field": feature.area_name,"state": feature.state_abbrev, "onecode": feature.onecode,"population": feature.population,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//console.log(metros_geoJsonFeatures);
metrolabelSource.setData({
type: 'FeatureCollection',
features: metros_geoJsonFeatures
});
map.addLayer({
"id": "metro-labels","type": "symbol","source": "metro-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-variable-anchor": ['center'],"text-justify": "center",},
"paint": {"text-color": "rgba(115,92,9,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},
});
map.addLayer({
"id": "metro-hover","type": "symbol","source": "metro-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-variable-anchor": ['center'],"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
map.addLayer({
"id": "metro-click","type": "symbol","source": "metro-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-variable-anchor": ['center'],"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
});
}
function loadCountyLabels(clicked_place) {
var ciLayer = map.getLayer('county-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('county-labels');
map.removeLayer('county-hover');
map.removeLayer('county-click');
}
var srcLayer = map.getSource('county-labels');
if (typeof srcLayer !== "undefined") {
map.removeSource('county-labels')
}
var st = abbrState(clicked_place,"abbr");
var theSQL = "select supermap_simp_cn_2021.onecode, replace(supermap_simp_cn_2021.area_name,concat(' ', reverse(split_part(reverse(supermap_simp_cn_2021.area_name),' ', 1)) ),concat(chr(10), reverse(split_part(reverse(supermap_simp_cn_2021.area_name),' ', 1)) )) as areaname, state_abbr as state_abbrev, ST_X(ST_AsText(ST_Centroid(supermap_simp_cn_2021.the_geom))) as lng, ST_Y(ST_AsText(ST_Centroid(supermap_simp_cn_2021.the_geom))) as lat, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currenthousing_09212021.housemedianvalue as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_simp_cn_2021 inner join currentgeos_09212021 on supermap_simp_cn_2021.onecode = currentgeos_09212021.onecode inner join currenthousing_09212021 on supermap_simp_cn_2021.onecode = currenthousing_09212021.onecode inner join currentcostofliv on supermap_simp_cn_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_cn_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_cn_2021.onecode = currentcomfortindex.onecode where supermap_simp_cn_2021.state_abbr = '" + st + "' order by population desc"
//console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
var ciLayer = map.getLayer('county-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('county-labels');
map.removeLayer('county-hover');
map.removeLayer('county-click');
}
var srcLayer = map.getSource('county-labels');
if (typeof srcLayer !== "undefined") {
map.removeSource('county-labels')
}
map.addSource('county-labels', { type: 'geojson', data: null });
const CNlabelSource = map.getSource('county-labels');
const state_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"label_field": feature.areaname,"state": feature.state_abbrev,"onecode":feature.onecode,"population": feature.population,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
CNlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "county-labels","type": "symbol","source": "county-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 9,"text-offset": [0, 0],'text-anchor': 'center',"text-justify": "center",},
"paint": {"text-color": "#748773","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "county-hover","type": "symbol","source": "county-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 9,"text-offset": [0, 0],'text-anchor': 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "county-click","type": "symbol","source": "county-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 9,"text-offset": [0, 0],'text-anchor': 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
var ciLayer = map.getLayer('cities-ST-class5-labels');
if (typeof ciLayer !== "undefined") {
map.moveLayer('county-labels','cities-ST-class5-labels');
} else {
return
}
});
}
function loadRefCities() {
var theSQL = "select ST_asGeoJSON(the_geom) as geom, name as areaname, _state as state_abbrev, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat from referencecities_2020 order by _current_p desc"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
map.addSource('refCities-labels', { type: 'geojson', data: null });
const labelSource = map.getSource('refCities-labels');
const state_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"label_field": feature.areaname,"state": feature.state_abbrev}}});
labelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "refCities-labels",
"type": "symbol",
"source": "refCities-labels",
"minzoom": 7,
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Italic"],
"text-size": 12,
"text-offset": [0, 0],
"text-anchor": "center",
//"text-variable-anchor": ["top-right","bottom-right","top-left","bottom-left","right","left","top"],
"text-max-width": 8,
"text-justify": "center",
"text-padding": 5
},
"paint": {
"text-color": "#363636",
"text-halo-color": "white",
"text-halo-width": 1.0,
"text-halo-blur": 0.5
},
}, 'my-labels');
});
// Load state labels once reference cities are added to map. This ensures the state names are displayed over ref cities
//loadStateLabels();
}
function loadStateLabels() {
var theSQL = "select area_name as areaname, state_abbr as state_abbrev, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat from supermap_st_labels_2021"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
map.addSource('state-labels', { type: 'geojson', data: null });
const labelSource = map.getSource('state-labels');
const state_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"label_field": feature.areaname,"state": feature.state_abbrev}}});
labelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "state-labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Bold"],
"text-size": 12,
"text-offset": [0, 0],
"text-anchor": "top",
"text-max-width": 8,
"text-justify": "center",
},
"paint": {
"text-color": "#748773",
"text-halo-color": "white",
"text-halo-width": 0.0,
"text-halo-blur": 0.5
},
});
});
}
function applyMouseMove() {
map.__deck.props.getCursor = () => map.getCanvas().style.cursor;
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
//x.addListener(myFunction) // Attach listener function on state changes
if (size === "less") {
}
else {
map.on('mousemove', function (e) {
var bbox = [
[e.point.x - 3, e.point.y - 3],
[e.point.x + 3, e.point.y + 3]
];
var ciLayer = map.getLayer('cities-ST-class5-labels');
if (typeof ciLayer !== "undefined") {
/* GATHER QUERYABLE LAYERS FOR MOUSEMOVE QUERY */
var layers = map.getStyle().layers;
var i;
query_layers = []
for (i = 0; i < layers.length; i++) {
if (layers[i].id !== "simple-tiles" &&
layers[i].id != "state_bnd" &&
layers[i].id != "city-bnd") {
/*
'background',
'landcover',
'park_national_park',
'park_nature_reserve',
'landuse_residential',
'landuse',
'waterway',
'boundary_county',
'boundary_state',
'water',
'water_shadow',
'aeroway-runway',
'aeroway-taxiway',
'tunnel_service_case',
'tunnel_minor_case',
'tunnel_sec_case',
'tunnel_pri_case',
'tunnel_trunk_case',
'tunnel_mot_case',
'tunnel_path',
'tunnel_service_fill',
'tunnel_minor_fill',
'tunnel_sec_fill',
'tunnel_pri_fill',
'tunnel_trunk_fill',
'tunnel_mot_fill',
'tunnel_rail',
'tunnel_rail_dash',
'road_service_case',
'road_minor_case',
'road_pri_case_ramp',
'road_trunk_case_ramp',
'road_mot_case_ramp',
'road_sec_case_noramp',
'road_pri_case_noramp',
'road_trunk_case_noramp',
'road_mot_case_noramp',
'road_path',
'road_service_fill',
'road_minor_fill',
'road_pri_fill_ramp',
'road_trunk_fill_ramp',
'road_mot_fill_ramp',
'road_sec_fill_noramp',
'road_pri_fill_noramp',
'road_trunk_fill_noramp',
'road_mot_fill_noramp',
'rail',
'rail_dash',
'bridge_service_case',
'bridge_minor_case',
'bridge_sec_case',
'bridge_pri_case',
'bridge_trunk_case',
'bridge_mot_case',
'bridge_path',
'bridge_service_fill',
'bridge_minor_fill',
'bridge_sec_fill',
'bridge_pri_fill',
'bridge_trunk_fill',
'bridge_mot_fill',
'building',
'building-top',
'boundary_country_outline',
'boundary_country_inner'
*/
query_layers.push(layers[i].id);
}
}
//console.log(query_layers);
//query_layers = [/*"refCities-labels",*/ "my-labels", "cities-ST-class5-labels", "cities-ST-class5-hover", "cities-ST-class5-click", "cities-ST-class4-labels", "cities-ST-class4-hover", "cities-ST-class4-click", "cities-ST-class3-labels", "cities-ST-class3-hover", "cities-ST-class3-click", "cities-ST-class2-labels", "cities-ST-class2-hover", "cities-ST-class2-click", "cities-ST-class1-labels", "cities-ST-class1-hover", "cities-ST-class1-click", "zipcode-labels", "zipcode-hover", "zipcode-click"]
var features = map.queryRenderedFeatures(bbox, {
layers: query_layers
});
const mapboxGLCanvas = document.querySelector('.mapboxgl-canvas');
if (features.length > 0) {
//console.log(features);
// apply cursor pointer on feature hover
mapboxGLCanvas.style.cursor = 'pointer';
//console.log(features[0].source);
// label source for feature filter
var source = features[0].source
if (source == "citiesSTClass1LabelSrc") {
console.log("class 1")
//apply hover effects
map.setFilter('cities-ST-class1-hover', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class1-hover', 'visibility', 'visible');
// remove hover effects
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
} else if (source == "citiesSTClass2LabelSrc") {
//apply hover to selection
map.setFilter('cities-ST-class2-hover', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class2-hover', 'visibility', 'visible');
// remove hover effects
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
} else if (source == "citiesSTClass3LabelSrc") {
//apply hover to selection
map.setFilter('cities-ST-class3-hover', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class3-hover', 'visibility', 'visible');
// remove hover effects
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
} else if (source == "citiesSTClass4LabelSrc") {
//apply hover to selection
map.setFilter('cities-ST-class4-hover', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class4-hover', 'visibility', 'visible');
// remove hover effects
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
} else if (source == "citiesSTClass5LabelSrc") {
// apply hover to selection
map.setFilter('cities-ST-class5-hover', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class5-hover', 'visibility', 'visible');
// remove hover effects
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
} else if (source == "county-labels") {
//console.log(features[0].properties);
document.getElementById("hovercounty").innerHTML = "" + features[0].properties.label_field + ""
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
//console.log(features[0])
map.setFilter('county-hover', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('county-hover', 'visibility', 'visible');
// remove hover effects
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
var theSQL = "select ST_asGeoJSON(the_geom) as geom from ci_2016update where ci_2016update.onecode_1 = cast(" + features[0].properties['onecode'] + " as text)"
//console.log(theSQL);
/*
$.getJSON('https://fastforward.carto.com/api/v2/sql/?q='+ theSQL, function(data) {
});
*/
return
} else if (source == "state-labels") {
//console.log(features[0].properties)
document.getElementById("hovercounty").innerHTML = "" + features[0].properties.label_field + ""
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
return
} else if (source == "metro-labels") {
//console.log(features[0].properties)
document.getElementById("hovercounty").innerHTML = "" + features[0].properties.label_field + ""
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
map.setFilter('metro-hover', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('metro-hover', 'visibility', 'visible');
// remove hover effects
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
return
} else if (source == "zipcode-labels") {
//console.log(features[0].properties)
document.getElementById("hovercounty").innerHTML = "Zip " + features[0].properties.label_field + ""
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var zipName = features[0].properties['zipname']
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + zipName + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
map.setFilter('zipcode-hover', ["==","onecode",features[0].properties.onecode]);
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
return
} else if (source == "state_bnd") {
//console.log("state line");
//console.log(features[0])
document.getElementById("population").innerHTML = "";
document.getElementById("criviol").innerHTML = "";
document.getElementById("criprop").innerHTML = "";
document.getElementById("homeval").innerHTML = "";
document.getElementById("cstlivng").innerHTML = "";
//document.getElementById("hovercounty").innerHTML = features[0].properties;
} else {
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
//var criViol = features[0].properties['criviol']
//var criProp = features[0].properties['criprop']
//var homeVal = features[0].properties['homeval']
//var newHomeVal = parseInt(homeVal) / 1000;
//var costLiv = features[0].properties['cstlivng']
//var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
//var placeLabel = features[0].properties['label_field']
//var stateLabel = features[0].properties['state']
//var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
//document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
//document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
//document.getElementById("criprop").innerHTML = "Prop Crime: " + criProp + "";
//document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
//document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
//console.log(features[0]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
//document.getElementById("population").innerHTML = "";
//document.getElementById("criviol").innerHTML = "";
//document.getElementById("criprop").innerHTML = "";
//document.getElementById("homeval").innerHTML = "";
//document.getElementById("cstlivng").innerHTML = "";
//document.getElementById("hovercounty").innerHTML = "";
}
} else {
map.setFilter('cities-ST-class1-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-hover', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-hover', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-hover', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-hover');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-hover', ["==","onecode",""]);
}
mapboxGLCanvas.style.cursor = 'default';
}
}
});
}
}
map.on('load', function() {
//console.log('map loaded');
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
//console.log(size)
if (size === "less") {
// small device
document.getElementById("nationdata_menu").style = 'display:none;'
document.getElementById("mobile_search").style = 'display:block;'
document.getElementById("desktop_search").style = 'display:none;'
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;bottom:0px!important;background-color:rgba(255,255,255,1.0);width:100%;height:15%;";
} else {
// large screen
document.getElementById("nationdata_menu").style = 'display:none;'
document.getElementById("mobile_search").style = 'display:none;'
document.getElementById("desktop_search").style = 'display:block;'
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;overflow-x:hidden;position:absolute;right:10px;top:80px;margin-bottom:5px;background-color:rgba(255,255,255,1.0);width:30%;border-radius:7px;";
}
const url = window.location.href;
const split_url = url.split("/");
const geo_type = split_url[4];
const param1 = split_url[5];
const param2 = split_url[6];
var zip_param;
console.log(split_url)
if (split_url.length == 9) {
zip_param = split_url[7];
//console.log(zip_param)
}
if (geo_type == "schools") {
console.log("schools in url");
var lat = parseFloat(param1);
var lng = parseFloat(param2);
const marker1 = new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(map);
/* GEOGRAPHIC QUERY TO GET STATE VIA LAT/LNG */
map.flyTo({
center: [lng,lat],
zoom: 7
});
/*
var popup = new mapboxgl.Popup({ offset: 0, closeOnClick: true, closeButton: true })
.setLngLat([lng,lat])
.setHTML("" + "School here" + "")
.addTo(map);
*/
} else {
if (split_url.length > 5) {
//const param3 = param2.split("?");
//console.log(split_url)
if (param1.indexOf('_') > -1) {
var decodedURI = param1.replace("_"," ");
} else {
var decodedURI = decodeURI(param1);
}
if (param2.indexOf('_') > -1) {
var decodedURI2 = param2.replace("_"," ");
} else {
var decodedURI2 = decodeURI(param2);
}
console.log(decodedURI2);
state_param = abbrState(decodedURI,"abbr");
console.log(decodedURI)
clicked_state = abbrState(state_param,"name");
const selectedStateDataQuery = "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, housemedianvalue as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currenthousing_09212021 on supermap_simp_st_2021.onecode = currenthousing_09212021.onecode inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where supermap_simp_st_2021.state_abbr != '" + state_param + "'";
//const noselectedStateDataQuery = "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, housemedianvalue as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currenthousing_09212021 on supermap_simp_st_2021.onecode = currenthousing_09212021.onecode inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode";
/* if state selected then change query */
if (clicked_state.length > 1) {
//console.log("state is " + clicked_state);
stateLayer.setProps({
data: selectedStateDataQuery,
});
map.addLayer(stateLayer);
zoomToDemo(state_param,geo_type,decodedURI2,zip_param);
} else {
//console.log("state is " + clicked_state + ". nothing clicked!")
map.addLayer(stateLayer);
}
} else {
//console.log("state is " + clicked_state + ". nothing clicked!")
map.addLayer(stateLayer);
}
loadStateLabels();
applyMouseMove();
}
var state_param = ""
//console.log(split_url);
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
var onecode = params['oc']
});
function highlightCity(geotype,placename,state_abbrev,zipcode) {
console.log(geotype);
/* The Layer Style depends on the place type */
//console.log(place_code);
// startswith
// 1 = US
// 2 = State
// 3 = Metro
// 4 = County
// 5 = Cities
// 6 = Townships/Cosubs
// 7 = Zip codes
var ciLayer = map.getLayer('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('city-bnd');
}
// if city bnd exists
var ciLayer = map.getSource('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeSource('city-bnd');
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-click');
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-hover');
}
var ciLayer = map.getLayer('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-labels')
}
var ciLayer = map.getSource('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('metro-labels')
}
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
var placetype;
if (geotype == 'city') {
console.log("city")
placetype = "5";
} else if (geotype == 'state') {
console.log("state")
placetype = "2";
} else if (geotype == "zip-code") {
console.log("zip")
placetype = "7";
} else if (geotype == "county") {
console.log("county");
placetype = "4";
} else {
console.log("metro")
placetype = "3";
}
//var place_type = place_code.toString()
if (placetype == "1") {
//console.log("US");
resetMap();
map.flyTo({zoom:3, center:[-96,40] })
} else if (placetype =="2") {
//console.log("State");
var state_name = abbrState(state_abbrev,"name");
//console.log(state_name)
var theSQL = "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, st_y(st_centroid(supermap_simp_st_2021.the_geom)) as center_lat, st_x(st_centroid(supermap_simp_st_2021.the_geom)) as center_lng, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, house_median_value as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where supermap_simp_st_2021.area_name = '" + state_name + "' "
//console.log(theSQL)
console.log(theSQL)//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
//console.log(data.rows[0]);
// APPLY Place name to Infopane
clicked_place = data.rows[0].areaname;
var clicked_cartoID = data.rows[0].cartodb_id;
var click_lat = data.rows[0].center_lat;
var click_lng = data.rows[0].center_lng;
//console.log(click_lat)
//map.setFilter('my-labels', ["!=","areaname",clicked_place]);
// reset data window
if (data.rows[0] !== undefined) {
var criViol = data.rows[0].criviol
var criProp = data.rows[0].criprop
var homeVal = data.rows[0].homeval
var newHomeVal = parseInt(homeVal) / 1000;
//var placeLabel = object.object.properties['label_field']
var costLiv = data.rows[0].col
var stateLabel = data.rows[0].areaname
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(data.rows[0].population) / 1000000).toFixed(1) + "M " + "";
document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
}
// CITY DATA LAYER
var st = abbrState(clicked_place,"abbr");
var cityDataBtn1 = document.getElementById("CityData1");
var cityDataBtn2 = document.getElementById("CityData2");
var cityDataBtn3 = document.getElementById("CityData3");
var cityDataBtn4 = document.getElementById("CityData4");
// QUERY ONLY CITIES LABELED ON MAP
//var newSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcostofliv.house_median_value as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
if (clicked_place.length > 2) {
// QUERY ONLY CITIES LABELED ON MAP
var cityDataSQL = ""
var cityBreaksSQL = ""
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
// ADJUST QUERY OF WHATEVER DATA IS SHOWN ON TOP - MUST CHECK IF BUTTON.hasClass
var cityData1HasClass = cityDataBtn1.classList.contains('active');
var cityData2HasClass = cityDataBtn2.classList.contains('active');
var cityData3HasClass = cityDataBtn3.classList.contains('active');
var cityData4HasClass = cityDataBtn4.classList.contains('active');
if (cityData1HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcostofliv.house_median_value as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcostofliv.house_median_value as integer)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
//console.log("data 1 visible")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [212,185,218];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [201,148,199];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [223,101,176];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [231,41,138];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [206,18,86];
} else {
return [145,0,63];
}
}, visible:true})
cityPlethLayer2.setProps({visible:false});
cityPlethLayer3.setProps({visible:false});
cityPlethLayer4.setProps({visible:false});
});
} else if (cityData2HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcrimclimmisc_09212021.crimeviolent as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcrimclimmisc_09212021.crimeviolent as numeric)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
console.log("data 2 visisble")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer2.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [254,217,118];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [254,178,76];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [253,141,60];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [252,78,42];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [227,26,28];
} else {
return [177,0,38];
}
}, visible:true})
cityPlethLayer.setProps({visible:false});
cityPlethLayer3.setProps({visible:false});
cityPlethLayer4.setProps({visible:false});
});
} else if (cityData3HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcrimclimmisc_09212021.crimeproperty as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcrimclimmisc_09212021.crimeproperty as numeric)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
console.log("data 3 visisble")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer3.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [254,217,118];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [254,178,76];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [253,141,60];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [252,78,42];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [227,26,28];
} else {
return [177,0,38];
}
}, visible:true})
cityPlethLayer.setProps({visible:false});
cityPlethLayer2.setProps({visible:false});
cityPlethLayer4.setProps({visible:false});
});
} else if (cityData4HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcostofliv.aggr as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcostofliv.aggr as numeric)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
console.log("data 4 visisble")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer4.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [254,217,118];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [254,178,76];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [253,141,60];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [252,78,42];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [227,26,28];
} else {
return [177,0,38];
}
}, visible:true})
cityPlethLayer.setProps({visible:false});
cityPlethLayer2.setProps({visible:false});
cityPlethLayer3.setProps({visible:false});
});
console.log("citydata4 now")
}
}
/*
var cityDataLayer = map.getLayer('citydata1');
if (typeof cityDataLayer !== "undefined") {
// LAYER EXISTS
var visibility = map.getLayoutProperty('citydata1', 'visibility');
if (visibility == 'visible') {
// LAYER IS VISIBLE
cityPlethLayer.setProps({visible:true})
cityPlethLayer2.setProps({visible:false});
cityDataBtn1.className = "dropdown-item active";
} else {
// LAYER IS NOT VISIBLE
cityDataBtn1.className = "dropdown-item";
cityPlethLayer.setProps({visible:false});
cityPlethLayer2.setProps({visible:true})
}
} else {
}
var cityDataLayer = map.getLayer('citydata2');
if (typeof cityDataLayer !== "undefined") {
// LAYER EXISTS
var visibility = map.getLayoutProperty('citydata2', 'visibility');
if (visibility == 'visible') {
// LAYER IS VISIBLE
cityPlethLayer2.setProps({visible:true})
cityPlethLayer.setProps({visible:false});
cityDataBtn2.className = "dropdown-item active";
} else {
// LAYER IS NOT VISIBLE
cityDataBtn2.className = "dropdown-item";
cityPlethLayer2.setProps({visible:false});
cityPlethLayer.setProps({visible:true})
}
} else {
}
*/
// Choropleth Layer
var newSQL = "SELECT * FROM tpjson_counties_subset where stname = '" + clicked_place + "'"
var countiesLayer = map.getLayer('choropleth');
if (typeof countiesLayer !== "undefined") {
//console.log('choropleth exists')
var visibility = map.getLayoutProperty('choropleth', 'visibility');
if (visibility === 'visible') {
//console.log('visible');
choroLayer.setProps({data: newSQL, visible:true})
var countyBtn = document.getElementById("toggleChoropleth");
countyBtn.className = "dropdown-item active";
} else {
//console.log('not visible')
choroLayer.setProps({data: newSQL, visible:false})
var countyBtn = document.getElementById("toggleChoropleth");
countyBtn.className = "dropdown-item";
//console.log(countyBtn);
}
} else {
}
// IF LAYERS EXIST, REMOVE THEM
var ciLayer = map.getLayer('county-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('county-labels');
map.removeLayer('county-click');
map.removeLayer('county-hover');
map.removeSource('county-labels')
}
var ciLayer = map.getLayer('zipcode-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('zipcode-labels');
map.removeLayer('zipcode-hover');
map.removeLayer('zipcode-click');
map.removeSource('zipcode-labels')
}
var ciLayer = map.getLayer('cities-ST-class1-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class1-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class2-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class2-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class3-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class3-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class4-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class4-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class5-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class5-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class1-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class1-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class2-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class2-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class3-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class3-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class4-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class4-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class5-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class5-click', 'visibility', 'none');
}
// get click location
//var click_loc = object.coordinate;
//var click_lat = object.coordinate[1];
//var click_lng = object.coordinate[0];
document.getElementById("hovercounty").innerHTML = clicked_place
// IF State Boundary Exists, Remove It.
var ciLayer = map.getLayer('state_bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('state_bnd');
map.removeSource('state_bnd');
}
// if city bnd exists
var ciLayer = map.getLayer('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('city-bnd');
map.removeSource('city-bnd');
} else {
}
// QUERY State Boundary
var theSQL = "select ST_asGeoJSON(st_simplifypreservetopology(supermap_simp_st_2021.the_geom, 0.01)) as geom, supermap_simp_st_2021.area_name as areaname, supermap_simp_st_2021.state_abbr as state_abbrev from supermap_simp_st_2021 where cartodb_id = '" + clicked_cartoID + "'"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
//console.log(theSQL);
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
//var areaname = data.rows[0].areaname
//clicked_state = areaname;
abbrev = data.rows[0].state_abbrev;
//var lng = data.rows[0].lng
//var lat = data.rows[0].lat
var bbox = turf.extent(parsedGeom);
//console.log(bbox)
map.addSource('state_bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'state_bnd',
'type': 'line',
'source': 'state_bnd',
'layout': {
'line-join': 'round'
},
'paint': {
'line-color': '#088',
'line-width': 3
}
});
var ciLayer = map.getLayer('cities-ST-class1-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class1-labels');
map.removeLayer('cities-ST-class1-hover');
map.removeLayer('cities-ST-class1-click');
map.removeSource('citiesSTClass1LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class2-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class2-labels');
map.removeLayer('cities-ST-class2-hover');
map.removeLayer('cities-ST-class2-click');
map.removeSource('citiesSTClass2LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class3-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class3-labels');
map.removeLayer('cities-ST-class3-hover');
map.removeLayer('cities-ST-class3-click');
map.removeSource('citiesSTClass3LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class4-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class4-labels');
map.removeLayer('cities-ST-class4-hover');
map.removeLayer('cities-ST-class4-click');
map.removeSource('citiesSTClass4LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class5-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class5-labels');
map.removeLayer('cities-ST-class5-hover');
map.removeLayer('cities-ST-class5-click');
map.removeSource('citiesSTClass5LabelSrc')
}
//credentials: { username: 'fastforward', apiKey: , serverUrlTemplate: 'https://fastforward.carto.com'}
// CITY CLASSES
//var theSQL = "select the_geom_webmercator, _current_p as curr_popul, cartodb_id, name, _cbsa_code as cbsacode, _onecode as onecode, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat, _state as state from allcities order by curr_popul desc"
//var theSQL = "select the_geom_webmercator, _current_p as curr_popul, cartodb_id, name, _cbsa_code as cbsacode, _onecode as onecode, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat, _state as state from allcities where _state = '" + abbrev + "'" + " order by curr_popul desc"
//var theSQL = "select allcities.the_geom_webmercator, _current_p as curr_popul, allcities.cartodb_id, name, _onecode as onecode, ST_X(ST_AsText(allcities.the_geom)) as lng, ST_Y(ST_AsText(allcities.the_geom)) as lat, _state as state, housmedval_label, cstlivng, criviol, criprop from allcities left join ci_2016update on allcities._onecode = ci_2016update.onecode_1 where _state = '" + abbrev + "' order by curr_popul desc"
var theSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population as population, ST_X(ST_AsText(supermap_cities_cds_bert.the_geom)) as lng, ST_Y(ST_AsText(supermap_cities_cds_bert.the_geom)) as lat, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr = '" + abbrev + "' order by population desc"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
// GET Class Breaks for City Classes
var jenksBreaks = getClassBreaks(abbrev)[0]
var result = data.rows;
//console.log(data);
var class1 = [];
var class2 = [];
var class3 = [];
var class4 = [];
var class5 = [];
// Use jenksBreaks to split the Cities GeoJSON into separate classes
for (var i = 0; i < result.length; i++) {
var population = data.rows[i].population;
if (population < jenksBreaks[0]) { // Class 5
//console.log("class 5");
class5.push(data.rows[i]);
} else if (population >= jenksBreaks[0] && population < jenksBreaks[1]) { // Class 4
//console.log("class 2");
class4.push(data.rows[i]);
} else if (population >= jenksBreaks[1] && population < jenksBreaks[2]) { // Class 3
//console.log("class 3")
class3.push(data.rows[i]);
} else if (population >= jenksBreaks[2] && population < jenksBreaks[3]) { // Class 2
//console.log("class 4")
class2.push(data.rows[i]);
} else if (population >= jenksBreaks[3]) { // Class 1
//console.log("class 1")
class1.push(data.rows[i]);
} else {
//console.log("somehow not in jenks classification. " + population + " : " + jenksBreaks)
}
}
const class1_geoJsonFeatures = class1.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class2_geoJsonFeatures = class2.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class3_geoJsonFeatures = class3.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class4_geoJsonFeatures = class4.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class5_geoJsonFeatures = class5.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//CLASS 5
map.addSource('citiesSTClass5LabelSrc', { type: 'geojson', data: null });
const class5Source = map.getSource('citiesSTClass5LabelSrc');
class5Source.setData({type: 'FeatureCollection',features: class5_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class5-labels","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class5-hover","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class5-click","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 4
map.addSource('citiesSTClass4LabelSrc', { type: 'geojson', data: null });
const class4Source = map.getSource('citiesSTClass4LabelSrc');
class4Source.setData({type: 'FeatureCollection',features: class4_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class4-labels","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class4-hover","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class4-click","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 3
map.addSource('citiesSTClass3LabelSrc', { type: 'geojson', data: null });
const class3Source = map.getSource('citiesSTClass3LabelSrc');
class3Source.setData({type: 'FeatureCollection',features: class3_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class3-labels","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class3-hover","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class3-click","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 2
map.addSource('citiesSTClass2LabelSrc', { type: 'geojson', data: null });
const class2Source = map.getSource('citiesSTClass2LabelSrc');
class2Source.setData({type: 'FeatureCollection',features: class2_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class2-labels","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class2-hover","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class2-click","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 1
map.addSource('citiesSTClass1LabelSrc', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSTClass1LabelSrc');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class1-labels","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class1-hover","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class1-click","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
var toggleCities = document.getElementById("toggleCities");
var hasClass = toggleCities.classList.contains('active');
//console.log(state_click_count);
if (state_click_count > 0) {
if (hasClass) {
//console.log("btn is active");
// setting the cities layers visibility definiively so they can be turned off with toggle
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'visible');
} else {
//console.log("btn not active");
// setting the cities layers visibility definiively so they can be turned off with toggle
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'none');
}
// this is the initial state click, so we show cities by default.
} else {
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'visible');
var toggleCities = document.getElementById("toggleCities");
toggleCities.classList.add('active');
}
state_click_count += 1
});
// Counties Layer
var cl_st = abbrState(clicked_place,"abbr");
var newSQL = "SELECT * FROM supermap_cn_shp where state_abbr = '" + cl_st + "'"
var countiesLayer = map.getLayer('counties');
if (typeof countiesLayer !== "undefined") {
var visibility = map.getLayoutProperty('counties', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
countyLayer.setProps({data: newSQL, visible:true})
map.setLayoutProperty('counties', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleCounties");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('county-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('county-labels', ["==","state",clicked_state]);
map.setLayoutProperty('county-labels', 'visibility', 'visible');
map.moveLayer('county-labels','cities-ST-class1-labels');
} else {
}
} else {
// handle layer visibility
countyLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('counties', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleCounties");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('county-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('county-labels', ["==","state",clicked_state]);
map.setLayoutProperty('county-labels', 'visibility', 'none');
} else {
}
}
} else {
countyLayer.setProps({data: newSQL, visible: false})
}
// ZipCodes Layer
var st = abbrState(clicked_place,"abbr");
var newSQL = "SELECT the_geom_webmercator, split_part(area_name,',',1) as areaname FROM supermap_simp_zi_2021 where state_abbr = '" + st + "'"
var countiesLayer = map.getLayer('zipcodes');
if (typeof countiesLayer !== "undefined") {
var visibility = map.getLayoutProperty('zipcodes', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
zipCodeLayer.setProps({data: newSQL, visible:true})
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleZips");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('zipcode-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('zipcode-labels', ["==","state",clicked_state]);
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
map.moveLayer('zipcode-labels');
} else {
}
} else {
// handle layer visibility
zipCodeLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('zipcodes', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleZips");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('zipcode-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('zipcode-labels', ["==","state",clicked_state]);
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
} else {
}
}
} else {
zipCodeLayer.setProps({data: newSQL, visible: false})
}
// Metros Layer
//var newSQL = "SELECT the_geom_webmercator FROM supermap_ms_shp where area_name LIKE '%" + abbrev + "%'"
var newSQL = "select the_geom_webmercator FROM supermap_ms_shp where supermap_ms_shp.area_name NOT LIKE '%Micro%' AND supermap_ms_shp.area_name LIKE '%" + abbrev + "%'"
//console.log(newSQL)
var countiesLayer = map.getLayer('metros');
if (typeof countiesLayer !== "undefined") {
//console.log('metros exists')
var visibility = map.getLayoutProperty('metros', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
metrosLayer.setProps({data: newSQL, visible:true, pickable:true})
map.setLayoutProperty('metros', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleMetros");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('metro-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('metro-labels', ["==","state",clicked_state]);
map.setLayoutProperty('metro-labels', 'visibility', 'visible');
map.moveLayer('metro-labels');
} else {
}
} else {
// handle layer visibility
metrosLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('metros', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleMetros");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('metro-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('metro-labels', ["==","state",clicked_state]);
map.setLayoutProperty('metro-labels', 'visibility', 'none');
} else {
}
}
} else {
metrosLayer.setProps({data: newSQL, visible: false})
}
//src & id 'refCities-labels'
var ciLayer = map.getLayer('refCities-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('refCities-labels');
}
var ciLayer = map.getSource('refCities-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('refCities-labels')
}
loadRefCities();
//var newSQL = "select the_geom_webmercator, areaname, cartodb_id from st_2016update where state = 'ind'"
//var newSQL = "select ST_SimplifyPreserveTopology(the_geom_webmercator,2000) as the_geom_webmercator, areaname, cartodb_id from st_2016update where state != '" + abbrev + "'"
//var newSQL = "SELECT supermap_simp_st_2021.the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode where state != '" + abbrev + "'"
var newSQL = "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, housemedianvalue as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join fastforward.currenthousing_09212021 on supermap_simp_st_2021.onecode = currenthousing_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where state_abbr != '" + abbrev + "'"
var zoom = map.getZoom();
var zoom_threshold = getZoomLevelByState(abbrev);
//console.log(features);
setTimeout(function(){
stateLayer.setProps({data: newSQL})
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// THIS IS FOR MOBILE
map.fitBounds(bbox, {
padding: {top: 0, bottom:350, left: 25, right: 25}
});
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;bottom:0px!important;background-color:rgba(255,255,255,1.0);width:100%;height:25%;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
} else {
map.fitBounds(bbox, {
padding: {top: 25, bottom:50, left: 25, right: 400}
});
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;right:10px;top:80px;margin-bottom:5px;background-color:rgba(255,255,255,1.0);width:30%;border-radius:7px;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
}
},700);
});
var zipcodesLayer = map.getLayer('zipcodes');
if (typeof zipcodesLayer !== "undefined") {
// button is on, layer is found
//console.log("btn on, layer found");
//map.setLayoutProperty('zipcodes', 'visibility', 'visible');
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
//console.log("btn not on, layer found")
map.removeLayer("zipcodes");
//console.log("btn not on, layer not found")
var st = abbrState(clicked_place,"abbr");
var theSQL = "select supermap_zi_shp.the_geom, ST_X(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lng, ST_Y(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lat, split_part(supermap_zi_shp.area_name,',',1) as areaname, split_part(supermap_zi_shp.area_name,',',2) as zipname, population, supermap_zi_shp.state_abbr as state_abbrev, supermap_zi_shp.onecode, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_zi_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_zi_shp.onecode inner join currentcostofliv on supermap_zi_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_zi_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_zi_shp.onecode = currentcomfortindex.onecode where state_abbr = '" + st + "'"
//console.log(theSQL);
var sql = new cartodb.SQL({ user: 'fastforward', api_key: CARTO_DEV_API_KEY, format: 'geojson' });
sql.execute(theSQL).done(function(geojson) {
//console.log("here is the geojson", geojson);
const zipslayer = new deck.MapboxLayer({
id: 'zipcodes',
data: geojson,
type: deck.GeoJsonLayer,
opacity: 1,
stroked: true,
filled: true,
extruded: false,
wireframe: false,
getLineColor: [116,135,115,255],
lineWidthMinPixels: 1,
lineWidthMaxPixels: 1,
lineJointRounded: true,
getFillColor: [255,255,255,1],
getLineWidth: 1,
pickable: true
});
map.addLayer(zipslayer);
map.moveLayer('zipcodes');
//map.moveLayer('zipcodes');
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
map.addSource('zipcode-labels', { type: 'geojson', data: null });
const ZIlabelSource = map.getSource('zipcode-labels');
const state_geoJsonFeatures = geojson.features.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.properties.lng, feature.properties.lat]},"properties":{"label_field": feature.properties.areaname,"state": feature.properties.state_abbrev, "onecode": feature.properties.onecode,"population": feature.properties.population,"homeval": feature.properties.homeval,"cstlivng": feature.properties.cstlivng,"criviol": feature.properties.criviol,"criprop": feature.properties.criprop, "zipname": feature.properties.zipname}}});
//console.log(state_geoJsonFeatures);
ZIlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "zipcode-labels","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-offset": [0, 0],"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgb(139,69,19)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
map.addLayer({
"id": "zipcode-hover","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
map.addLayer({
"id": "zipcode-click","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
var dataBtn = document.getElementById("toggleZips")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
} else {
map.setLayoutProperty('zipcodes', 'visibility', 'none');
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
}
addZipPleth(geojson,'cstlivng',"YlOrRd");
addZipPleth(geojson,'homeval',"PuRd");
addZipPleth(geojson,'criprop',"YlGnBu");
addZipPleth(geojson,'criviol',"YlGn");
var dataBtn = document.getElementById("ZipCodeData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'none');
}
var citytrue = $("#toggleZips").hasClass("active");
if (citytrue == true) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
} else {
// button is not active. map probably being loaded the first time
map.setLayoutProperty('zipcodes', 'visibility', 'none');
}
});
//map.moveLayer('cities-ST-class1-labels');
//map.moveLayer('cities-ST-class2-labels');
//map.moveLayer('cities-ST-class3-labels');
//map.moveLayer('cities-ST-class4-labels');
//map.moveLayer('cities-ST-class5-labels');
} else {
// button is on, layer is not found
//console.log("btn on, layer NOT found")
//console.log("btn not on, layer not found")
var st = abbrState(clicked_place,"abbr");
var theSQL = "select supermap_zi_shp.the_geom, ST_X(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lng, ST_Y(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lat, split_part(supermap_zi_shp.area_name,',',1) as areaname, split_part(supermap_zi_shp.area_name,',',2) as zipname, population, supermap_zi_shp.state_abbr as state_abbrev, supermap_zi_shp.onecode, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_zi_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_zi_shp.onecode inner join currentcostofliv on supermap_zi_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_zi_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_zi_shp.onecode = currentcomfortindex.onecode where state_abbr = '" + st + "'"
//console.log(theSQL);
var sql = new cartodb.SQL({ user: 'fastforward', api_key: CARTO_DEV_API_KEY, format: 'geojson' });
sql.execute(theSQL).done(function(geojson) {
//console.log("here is the geojson", geojson);
const zipslayer = new deck.MapboxLayer({
id: 'zipcodes',
data: geojson,
type: deck.GeoJsonLayer,
opacity: 1,
stroked: true,
filled: true,
extruded: false,
wireframe: false,
getLineColor: [116,135,115,255],
lineWidthMinPixels: 1,
lineWidthMaxPixels: 1,
lineJointRounded: true,
getFillColor: [255,255,255,1],
getLineWidth: 1,
pickable: true
});
map.addLayer(zipslayer);
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
map.addSource('zipcode-labels', { type: 'geojson', data: null });
const ZIlabelSource = map.getSource('zipcode-labels');
const state_geoJsonFeatures = geojson.features.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.properties.lng, feature.properties.lat]},"properties":{"label_field": feature.properties.areaname,"state": feature.properties.state_abbrev, "onecode": feature.properties.onecode,"population": feature.properties.population,"homeval": feature.properties.homeval,"cstlivng": feature.properties.cstlivng,"criviol": feature.properties.criviol,"criprop": feature.properties.criprop, "zipname": feature.properties.zipname}}});
//console.log(state_geoJsonFeatures);
ZIlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "zipcode-labels","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-offset": [0, 0],"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgb(139,69,19)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
map.addLayer({
"id": "zipcode-hover","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
map.addLayer({
"id": "zipcode-click","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
addZipPleth(geojson,'cstlivng',"YlOrRd");
addZipPleth(geojson,'homeval',"PuRd");
addZipPleth(geojson,'criprop',"YlGnBu");
addZipPleth(geojson,'criviol',"YlGn");
var dataBtn = document.getElementById("toggleZips")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
} else {
map.setLayoutProperty('zipcodes', 'visibility', 'none');
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
}
var dataBtn = document.getElementById("ZipCodeData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'none');
}
var citytrue = $("#toggleZips").hasClass("active");
if (citytrue == true) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
} else {
// button is not active. map probably being loaded the first time
map.setLayoutProperty('zipcodes', 'visibility', 'none');
}
//map.moveLayer('cities-ST-class1-labels');
//map.moveLayer('cities-ST-class2-labels');
//map.moveLayer('cities-ST-class3-labels');
//map.moveLayer('cities-ST-class4-labels');
//map.moveLayer('cities-ST-class5-labels');
});
}
});
} else if (placetype == "3") {
//console.log("Metro");
var decodedURI = decodeURI(placename);
console.log(placename);
var theSQL = "select ST_asGeoJSON(the_geom) as geom, msjoined_5 as state_abbr, area_name, msjoined_3 as onecode from supermap_simp_ms_2021 where LOWER(supermap_simp_ms_2021.area_name) = '" + decodedURI + "'"
console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var state_abbr = data.rows[0].state_abbr;
var area_name = data.rows[0].area_name
area_name = area_name.split(",")[0];
var centroid = turf.centroid(parsedGeom);
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'line',
'source': 'city-bnd',
'layout': {},
'paint': {
'line-color': 'rgba(200,0,0,1.0)',
'line-width': 3
},
});
var ciLayer = map.getSource('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('metro-labels')
}
map.addSource('metro-labels', { type: 'geojson', data: null });
const metrolabelSource = map.getSource('metro-labels');
const metros_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"label_field": feature.area_name,"state": feature.state_abbr, "onecode": feature.onecode,"population": feature.population,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//console.log(metros_geoJsonFeatures);
metrolabelSource.setData({
type: 'FeatureCollection',
features: metros_geoJsonFeatures
});
map.addLayer({
"id": "metro-click","type": "symbol","source": "metro-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-variable-anchor": ['center'],"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
//var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng.coordinates[0] + "," + cityLatLng.coordinates[1] + "&onecode=" + placeOneCode
//history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
}, 500);
}
}
});
} else if (placetype == "4") {
//console.log("County");
var decodedURI = decodeURI(placename);
//console.log(decodedURI);
var theSQL = "select ST_asGeoJSON(the_geom) as geom, state_abbr, area_name, onecode from supermap_simp_cn_2021 where LOWER(supermap_simp_cn_2021.area_name) = '" + decodedURI + " county' and LOWER(supermap_simp_cn_2021.state_abbr) = LOWER('" + state_abbrev + "')"
//console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var state_abbr = data.rows[0].state_abbr;
var area_name = data.rows[0].area_name
area_name = area_name.split(",")[0];
var centroid = turf.centroid(parsedGeom);
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'line',
'source': 'city-bnd',
'layout': {},
'paint': {
'line-color': 'rgba(200,0,0,1.0)',
'line-width': 3
},
});
var ciLayer = map.getSource('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('metro-labels')
}
map.addSource('metro-labels', { type: 'geojson', data: null });
const metrolabelSource = map.getSource('metro-labels');
const metros_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"label_field": feature.area_name,"state": feature.state_abbr, "onecode": feature.onecode,"population": feature.population,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//console.log(metros_geoJsonFeatures);
metrolabelSource.setData({
type: 'FeatureCollection',
features: metros_geoJsonFeatures
});
map.addLayer({
"id": "metro-click","type": "symbol","source": "metro-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-variable-anchor": ['center'],"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
//var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng.coordinates[0] + "," + cityLatLng.coordinates[1] + "&onecode=" + placeOneCode
//history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
}, 500);
}
}
});
} else if (placetype == "5") {
//console.log("Cities");
var decodedURI = decodeURI(placename);
//console.log(decodedURI);
var theSQL = "select ST_asGeoJSON(the_geom) as geom, onecode, area_name, state_abbr as state from supermap_ci_cd_2021 where LOWER(supermap_ci_cd_2021.area_name) = '" + decodedURI + "' and LOWER(supermap_ci_cd_2021.state_abbr) = LOWER('" + state_abbrev + "')"
//console.log(theSQL);
var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var centroid = turf.centroid(parsedGeom);
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'fill',
'source': 'city-bnd',
'layout': {},
'paint': {
'fill-color': 'rgba(200,0,0,0.2)'
},
});
const class1_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"onecode": feature.onecode,"label_field": feature.area_name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
map.addSource('citiesSearch', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSearch');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-click","type": "symbol","source": "citiesSearch",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 100, bottom:100, left: 100, right: 100}
});
}, 500);
}
} else {
map.addSource('city-bnd', {
'type': 'geojson',
'data': cityLatLng,
});
map.addLayer({
'id': 'city-bnd',
'type': 'circle',
'source': 'city-bnd',
'layout': {},
'paint': {
'circle-radius': 15,
'circle-color': 'rgba(200,0,0,0.2)'
}
},'cities-ST-class5-labels');
var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng[0] + "," + cityLatLng[1]
//history.pushState({id:'map'}, 'Map App', newURL);
setTimeout(function() {
map.flyTo({center:cityLatLng.coordinates, zoom: 9})
}, 500);
}
});
} else if (placetype == "6") {
//console.log("Twp/CoSubs");
var theSQL = "select ST_asGeoJSON(the_geom) as geom, onecode, area_name, state_abbr as state from supermap_ci_cd_2021 where supermap_ci_cd_2021.onecode = cast(" + place_code + " as text)"
//console.log(theSQL);
var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var centroid = turf.centroid(parsedGeom);
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'fill',
'source': 'city-bnd',
'layout': {},
'paint': {
'fill-color': 'rgba(200,0,0,0.2)'
},
});
const class1_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"onecode": feature.onecode,"label_field": feature.area_name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
map.addSource('citiesSearch', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSearch');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-click","type": "symbol","source": "citiesSearch",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 100, bottom:100, left: 100, right: 100}
});
}, 500);
}
} else {
map.addSource('city-bnd', {
'type': 'geojson',
'data': cityLatLng,
});
map.addLayer({
'id': 'city-bnd',
'type': 'circle',
'source': 'city-bnd',
'layout': {},
'paint': {
'circle-radius': 15,
'circle-color': 'rgba(200,0,0,0.2)'
}
},'cities-ST-class5-labels');
var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng[0] + "," + cityLatLng[1]
//history.pushState({id:'map'}, 'Map App', newURL);
setTimeout(function() {
map.flyTo({center:cityLatLng.coordinates, zoom: 9})
}, 500);
}
});
} else {
// 7
//console.log("Zip codes");
var theSQL = "select ST_asGeoJSON(the_geom) as geom, onecode, area_name, state_abbr as state from supermap_simp_zi_2021 where split_part(supermap_simp_zi_2021.area_name,',',1) = '" + zipcode + "'"
//console.log(theSQL);
var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var centroid = turf.centroid(parsedGeom);
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'fill',
'source': 'city-bnd',
'layout': {},
'paint': {
'fill-color': 'rgba(200,0,0,0.2)'
},
});
const class1_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"onecode": feature.onecode,"label_field": feature.area_name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
map.addSource('citiesSearch', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSearch');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-click","type": "symbol","source": "citiesSearch",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 100, bottom:100, left: 100, right: 100}
});
}, 500);
}
} else {
map.addSource('city-bnd', {
'type': 'geojson',
'data': cityLatLng,
});
map.addLayer({
'id': 'city-bnd',
'type': 'circle',
'source': 'city-bnd',
'layout': {},
'paint': {
'circle-radius': 15,
'circle-color': 'rgba(200,0,0,0.2)'
}
},'cities-ST-class5-labels');
var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng[0] + "," + cityLatLng[1]
//history.pushState({id:'map'}, 'Map App', newURL);
setTimeout(function() {
map.flyTo({center:cityLatLng.coordinates, zoom: 9})
}, 500);
}
});
}
}
function highlightCityByOneCode(place_code) {
/* The Layer Style depends on the place type */
//console.log(place_code);
// startswith
// 1 = US
// 2 = State
// 3 = Metro
// 4 = County
// 5 = Cities
// 6 = Townships/Cosubs
// 7 = Zip codes
var ciLayer = map.getLayer('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('city-bnd');
}
// if city bnd exists
var ciLayer = map.getSource('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeSource('city-bnd');
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-click');
}
var ciLayer = map.getLayer('metro-hover');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-hover');
}
var ciLayer = map.getLayer('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('metro-labels')
}
var ciLayer = map.getSource('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('metro-labels')
}
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
var place_type = place_code.toString()
if (place_type.startsWith("1")) {
//console.log("US");
resetMap();
map.flyTo({zoom:3, center:[-96,40] })
} else if (place_type.startsWith("2")) {
//console.log("State");
var theSQL = "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, st_y(st_centroid(supermap_simp_st_2021.the_geom)) as center_lat, st_x(st_centroid(supermap_simp_st_2021.the_geom)) as center_lng, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, house_median_value as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where supermap_simp_st_2021.onecode = cast(" + place_code + " as text)"
//console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
//console.log(data.rows[0]);
// APPLY Place name to Infopane
clicked_place = data.rows[0].areaname;
var clicked_cartoID = data.rows[0].cartodb_id;
var click_lat = data.rows[0].center_lat;
var click_lng = data.rows[0].center_lng;
//console.log(click_lat)
//map.setFilter('my-labels', ["!=","areaname",clicked_place]);
// reset data window
if (data.rows[0] !== undefined) {
var criViol = data.rows[0].criviol
var criProp = data.rows[0].criprop
var homeVal = data.rows[0].homeval
var newHomeVal = parseInt(homeVal) / 1000;
//var placeLabel = object.object.properties['label_field']
var costLiv = data.rows[0].col
var stateLabel = data.rows[0].areaname
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(data.rows[0].population) / 1000000).toFixed(1) + "M " + "";
document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Values
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
}
// CITY DATA LAYER
var st = abbrState(clicked_place,"abbr");
var cityDataBtn1 = document.getElementById("CityData1");
var cityDataBtn2 = document.getElementById("CityData2");
var cityDataBtn3 = document.getElementById("CityData3");
var cityDataBtn4 = document.getElementById("CityData4");
// QUERY ONLY CITIES LABELED ON MAP
//var newSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcostofliv.house_median_value as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
if (clicked_place.length > 2) {
// QUERY ONLY CITIES LABELED ON MAP
var cityDataSQL = ""
var cityBreaksSQL = ""
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
// ADJUST QUERY OF WHATEVER DATA IS SHOWN ON TOP - MUST CHECK IF BUTTON.hasClass
var cityData1HasClass = cityDataBtn1.classList.contains('active');
var cityData2HasClass = cityDataBtn2.classList.contains('active');
var cityData3HasClass = cityDataBtn3.classList.contains('active');
var cityData4HasClass = cityDataBtn4.classList.contains('active');
if (cityData1HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcostofliv.house_median_value as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcostofliv.house_median_value as integer)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
//console.log("data 1 visible")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [212,185,218];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [201,148,199];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [223,101,176];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [231,41,138];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [206,18,86];
} else {
return [145,0,63];
}
}, visible:true})
cityPlethLayer2.setProps({visible:false});
cityPlethLayer3.setProps({visible:false});
cityPlethLayer4.setProps({visible:false});
});
} else if (cityData2HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcrimclimmisc_09212021.crimeviolent as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcrimclimmisc_09212021.crimeviolent as numeric)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
console.log("data 2 visisble")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer2.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [254,217,118];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [254,178,76];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [253,141,60];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [252,78,42];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [227,26,28];
} else {
return [177,0,38];
}
}, visible:true})
cityPlethLayer.setProps({visible:false});
cityPlethLayer3.setProps({visible:false});
cityPlethLayer4.setProps({visible:false});
});
} else if (cityData3HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcrimclimmisc_09212021.crimeproperty as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcrimclimmisc_09212021.crimeproperty as numeric)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
console.log("data 3 visisble")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer3.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [254,217,118];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [254,178,76];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [253,141,60];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [252,78,42];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [227,26,28];
} else {
return [177,0,38];
}
}, visible:true})
cityPlethLayer.setProps({visible:false});
cityPlethLayer2.setProps({visible:false});
cityPlethLayer4.setProps({visible:false});
});
} else if (cityData4HasClass) {
cityDataSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval,currentcostofliv.aggr as value, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr LIKE '%" + st + "%'";
cityBreaksSQL = "SELECT CDB_HeadsTailsBins(array_agg(CAST(currentcostofliv.aggr as numeric)), 5) as jenks_breaks FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode where supermap_cities_cds_bert.state_abbr LIKE '" + encodeURIComponent("%") + st + encodeURIComponent("%") + "'";
console.log("data 4 visisble")
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+cityBreaksSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
cityPlethLayer4.setProps({data: cityDataSQL, getFillColor: (object) => {
if (object.properties.value <= data.rows[0].jenks_breaks[0]) {
return [254,217,118];
} else if (object.properties.value <= data.rows[0].jenks_breaks[1]) {
return [254,178,76];
} else if (object.properties.value <= data.rows[0].jenks_breaks[2]) {
return [253,141,60];
} else if (object.properties.value <= data.rows[0].jenks_breaks[3]) {
return [252,78,42];
} else if (object.properties.value <= data.rows[0].jenks_breaks[4]) {
return [227,26,28];
} else {
return [177,0,38];
}
}, visible:true})
cityPlethLayer.setProps({visible:false});
cityPlethLayer2.setProps({visible:false});
cityPlethLayer3.setProps({visible:false});
});
console.log("citydata4 now")
}
}
/*
var cityDataLayer = map.getLayer('citydata1');
if (typeof cityDataLayer !== "undefined") {
// LAYER EXISTS
var visibility = map.getLayoutProperty('citydata1', 'visibility');
if (visibility == 'visible') {
// LAYER IS VISIBLE
cityPlethLayer.setProps({visible:true})
cityPlethLayer2.setProps({visible:false});
cityDataBtn1.className = "dropdown-item active";
} else {
// LAYER IS NOT VISIBLE
cityDataBtn1.className = "dropdown-item";
cityPlethLayer.setProps({visible:false});
cityPlethLayer2.setProps({visible:true})
}
} else {
}
var cityDataLayer = map.getLayer('citydata2');
if (typeof cityDataLayer !== "undefined") {
// LAYER EXISTS
var visibility = map.getLayoutProperty('citydata2', 'visibility');
if (visibility == 'visible') {
// LAYER IS VISIBLE
cityPlethLayer2.setProps({visible:true})
cityPlethLayer.setProps({visible:false});
cityDataBtn2.className = "dropdown-item active";
} else {
// LAYER IS NOT VISIBLE
cityDataBtn2.className = "dropdown-item";
cityPlethLayer2.setProps({visible:false});
cityPlethLayer.setProps({visible:true})
}
} else {
}
*/
// Choropleth Layer
var newSQL = "SELECT * FROM tpjson_counties_subset where stname = '" + clicked_place + "'"
var countiesLayer = map.getLayer('choropleth');
if (typeof countiesLayer !== "undefined") {
//console.log('choropleth exists')
var visibility = map.getLayoutProperty('choropleth', 'visibility');
if (visibility === 'visible') {
//console.log('visible');
choroLayer.setProps({data: newSQL, visible:true})
var countyBtn = document.getElementById("toggleChoropleth");
countyBtn.className = "dropdown-item active";
} else {
//console.log('not visible')
choroLayer.setProps({data: newSQL, visible:false})
var countyBtn = document.getElementById("toggleChoropleth");
countyBtn.className = "dropdown-item";
//console.log(countyBtn);
}
} else {
}
// IF LAYERS EXIST, REMOVE THEM
var ciLayer = map.getLayer('county-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('county-labels');
map.removeLayer('county-click');
map.removeLayer('county-hover');
map.removeSource('county-labels')
}
var ciLayer = map.getLayer('zipcode-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('zipcode-labels');
map.removeLayer('zipcode-hover');
map.removeLayer('zipcode-click');
map.removeSource('zipcode-labels')
}
var ciLayer = map.getLayer('cities-ST-class1-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class1-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class2-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class2-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class3-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class3-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class4-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class4-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class5-hover');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class5-hover', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class1-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class1-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class2-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class2-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class3-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class3-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class4-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class4-click', 'visibility', 'none');
}
var ciLayer = map.getLayer('cities-ST-class5-click');
if (typeof ciLayer !== "undefined") {
map.setLayoutProperty('cities-ST-class5-click', 'visibility', 'none');
}
// get click location
//var click_loc = object.coordinate;
//var click_lat = object.coordinate[1];
//var click_lng = object.coordinate[0];
document.getElementById("hovercounty").innerHTML = clicked_place
// IF State Boundary Exists, Remove It.
var ciLayer = map.getLayer('state_bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('state_bnd');
map.removeSource('state_bnd');
}
// if city bnd exists
var ciLayer = map.getLayer('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('city-bnd');
map.removeSource('city-bnd');
} else {
}
// QUERY State Boundary
var theSQL = "select ST_asGeoJSON(st_simplifypreservetopology(supermap_simp_st_2021.the_geom, 0.01)) as geom, supermap_simp_st_2021.area_name as areaname, supermap_simp_st_2021.state_abbr as state_abbrev from supermap_simp_st_2021 where cartodb_id = '" + clicked_cartoID + "'"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
//console.log(theSQL);
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
//var areaname = data.rows[0].areaname
//clicked_state = areaname;
abbrev = data.rows[0].state_abbrev;
//var lng = data.rows[0].lng
//var lat = data.rows[0].lat
var bbox = turf.extent(parsedGeom);
//console.log(bbox)
map.addSource('state_bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'state_bnd',
'type': 'line',
'source': 'state_bnd',
'layout': {
'line-join': 'round'
},
'paint': {
'line-color': '#088',
'line-width': 3
}
});
var ciLayer = map.getLayer('cities-ST-class1-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class1-labels');
map.removeLayer('cities-ST-class1-hover');
map.removeLayer('cities-ST-class1-click');
map.removeSource('citiesSTClass1LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class2-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class2-labels');
map.removeLayer('cities-ST-class2-hover');
map.removeLayer('cities-ST-class2-click');
map.removeSource('citiesSTClass2LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class3-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class3-labels');
map.removeLayer('cities-ST-class3-hover');
map.removeLayer('cities-ST-class3-click');
map.removeSource('citiesSTClass3LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class4-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class4-labels');
map.removeLayer('cities-ST-class4-hover');
map.removeLayer('cities-ST-class4-click');
map.removeSource('citiesSTClass4LabelSrc')
}
var ciLayer = map.getLayer('cities-ST-class5-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-ST-class5-labels');
map.removeLayer('cities-ST-class5-hover');
map.removeLayer('cities-ST-class5-click');
map.removeSource('citiesSTClass5LabelSrc')
}
//credentials: { username: 'fastforward', apiKey: , serverUrlTemplate: 'https://fastforward.carto.com'}
// CITY CLASSES
//var theSQL = "select the_geom_webmercator, _current_p as curr_popul, cartodb_id, name, _cbsa_code as cbsacode, _onecode as onecode, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat, _state as state from allcities order by curr_popul desc"
//var theSQL = "select the_geom_webmercator, _current_p as curr_popul, cartodb_id, name, _cbsa_code as cbsacode, _onecode as onecode, ST_X(ST_AsText(the_geom)) as lng, ST_Y(ST_AsText(the_geom)) as lat, _state as state from allcities where _state = '" + abbrev + "'" + " order by curr_popul desc"
//var theSQL = "select allcities.the_geom_webmercator, _current_p as curr_popul, allcities.cartodb_id, name, _onecode as onecode, ST_X(ST_AsText(allcities.the_geom)) as lng, ST_Y(ST_AsText(allcities.the_geom)) as lat, _state as state, housmedval_label, cstlivng, criviol, criprop from allcities left join ci_2016update on allcities._onecode = ci_2016update.onecode_1 where _state = '" + abbrev + "' order by curr_popul desc"
var theSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state_abbr as state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population as population, ST_X(ST_AsText(supermap_cities_cds_bert.the_geom)) as lng, ST_Y(ST_AsText(supermap_cities_cds_bert.the_geom)) as lat, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state_abbr = '" + abbrev + "' order by population desc"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
// GET Class Breaks for City Classes
var jenksBreaks = getClassBreaks(abbrev)[0]
var result = data.rows;
//console.log(data);
var class1 = [];
var class2 = [];
var class3 = [];
var class4 = [];
var class5 = [];
// Use jenksBreaks to split the Cities GeoJSON into separate classes
for (var i = 0; i < result.length; i++) {
var population = data.rows[i].population;
if (population < jenksBreaks[0]) { // Class 5
//console.log("class 5");
class5.push(data.rows[i]);
} else if (population >= jenksBreaks[0] && population < jenksBreaks[1]) { // Class 4
//console.log("class 2");
class4.push(data.rows[i]);
} else if (population >= jenksBreaks[1] && population < jenksBreaks[2]) { // Class 3
//console.log("class 3")
class3.push(data.rows[i]);
} else if (population >= jenksBreaks[2] && population < jenksBreaks[3]) { // Class 2
//console.log("class 4")
class2.push(data.rows[i]);
} else if (population >= jenksBreaks[3]) { // Class 1
//console.log("class 1")
class1.push(data.rows[i]);
} else {
//console.log("somehow not in jenks classification. " + population + " : " + jenksBreaks)
}
}
const class1_geoJsonFeatures = class1.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class2_geoJsonFeatures = class2.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class3_geoJsonFeatures = class3.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class4_geoJsonFeatures = class4.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class5_geoJsonFeatures = class5.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//CLASS 5
map.addSource('citiesSTClass5LabelSrc', { type: 'geojson', data: null });
const class5Source = map.getSource('citiesSTClass5LabelSrc');
class5Source.setData({type: 'FeatureCollection',features: class5_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class5-labels","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class5-hover","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class5-click","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 4
map.addSource('citiesSTClass4LabelSrc', { type: 'geojson', data: null });
const class4Source = map.getSource('citiesSTClass4LabelSrc');
class4Source.setData({type: 'FeatureCollection',features: class4_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class4-labels","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class4-hover","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class4-click","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 3
map.addSource('citiesSTClass3LabelSrc', { type: 'geojson', data: null });
const class3Source = map.getSource('citiesSTClass3LabelSrc');
class3Source.setData({type: 'FeatureCollection',features: class3_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class3-labels","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class3-hover","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class3-click","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 2
map.addSource('citiesSTClass2LabelSrc', { type: 'geojson', data: null });
const class2Source = map.getSource('citiesSTClass2LabelSrc');
class2Source.setData({type: 'FeatureCollection',features: class2_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class2-labels","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class2-hover","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class2-click","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 1
map.addSource('citiesSTClass1LabelSrc', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSTClass1LabelSrc');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class1-labels","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class1-hover","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class1-click","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
var toggleCities = document.getElementById("toggleCities");
var hasClass = toggleCities.classList.contains('active');
//console.log(state_click_count);
if (state_click_count > 0) {
if (hasClass) {
//console.log("btn is active");
// setting the cities layers visibility definiively so they can be turned off with toggle
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'visible');
} else {
//console.log("btn not active");
// setting the cities layers visibility definiively so they can be turned off with toggle
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'none');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'none');
}
// this is the initial state click, so we show cities by default.
} else {
map.setLayoutProperty('cities-ST-class1-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class2-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class3-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class4-labels', 'visibility', 'visible');
map.setLayoutProperty('cities-ST-class5-labels', 'visibility', 'visible');
var toggleCities = document.getElementById("toggleCities");
toggleCities.classList.add('active');
}
state_click_count += 1
});
// Counties Layer
var cl_st = abbrState(clicked_place,"abbr");
var newSQL = "SELECT * FROM supermap_cn_shp where state_abbr = '" + cl_st + "'"
var countiesLayer = map.getLayer('counties');
if (typeof countiesLayer !== "undefined") {
var visibility = map.getLayoutProperty('counties', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
countyLayer.setProps({data: newSQL, visible:true})
map.setLayoutProperty('counties', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleCounties");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('county-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('county-labels', ["==","state",clicked_state]);
map.setLayoutProperty('county-labels', 'visibility', 'visible');
map.moveLayer('county-labels','cities-ST-class1-labels');
} else {
}
} else {
// handle layer visibility
countyLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('counties', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleCounties");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('county-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('county-labels', ["==","state",clicked_state]);
map.setLayoutProperty('county-labels', 'visibility', 'none');
} else {
}
}
} else {
countyLayer.setProps({data: newSQL, visible: false})
}
// ZipCodes Layer
var st = abbrState(clicked_place,"abbr");
var newSQL = "SELECT the_geom_webmercator, split_part(area_name,',',1) as areaname FROM supermap_simp_zi_2021 where state_abbr = '" + st + "'"
var countiesLayer = map.getLayer('zipcodes');
if (typeof countiesLayer !== "undefined") {
var visibility = map.getLayoutProperty('zipcodes', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
zipCodeLayer.setProps({data: newSQL, visible:true})
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleZips");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('zipcode-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('zipcode-labels', ["==","state",clicked_state]);
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
map.moveLayer('zipcode-labels');
} else {
}
} else {
// handle layer visibility
zipCodeLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('zipcodes', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleZips");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('zipcode-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('zipcode-labels', ["==","state",clicked_state]);
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
} else {
}
}
} else {
zipCodeLayer.setProps({data: newSQL, visible: false})
}
// Metros Layer
//var newSQL = "SELECT the_geom_webmercator FROM supermap_ms_shp where area_name LIKE '%" + abbrev + "%'"
var newSQL = "select the_geom_webmercator FROM supermap_ms_shp where supermap_ms_shp.area_name NOT LIKE '%Micro%' AND supermap_ms_shp.area_name LIKE '%" + abbrev + "%'"
//console.log(newSQL)
var countiesLayer = map.getLayer('metros');
if (typeof countiesLayer !== "undefined") {
//console.log('metros exists')
var visibility = map.getLayoutProperty('metros', 'visibility');
if (visibility === 'visible') {
// handle layer visibility
metrosLayer.setProps({data: newSQL, visible:true, pickable:true})
map.setLayoutProperty('metros', 'visibility', 'visible');
// toggle button state
var countyBtn = document.getElementById("toggleMetros");
countyBtn.className = "btn btn-outline-info btn-sm active";
// handle label query & visibility
var labelLayer = map.getLayer('metro-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('metro-labels', ["==","state",clicked_state]);
map.setLayoutProperty('metro-labels', 'visibility', 'visible');
map.moveLayer('metro-labels');
} else {
}
} else {
// handle layer visibility
metrosLayer.setProps({data: newSQL, visible:false})
map.setLayoutProperty('metros', 'visibility', 'none');
// toggle button state
var countyBtn = document.getElementById("toggleMetros");
countyBtn.className = "btn btn-outline-info btn-sm";
// handle label query & visibility
var labelLayer = map.getLayer('metro-labels');
if (typeof labelLayer !== "undefined") {
map.setFilter('metro-labels', ["==","state",clicked_state]);
map.setLayoutProperty('metro-labels', 'visibility', 'none');
} else {
}
}
} else {
metrosLayer.setProps({data: newSQL, visible: false})
}
//src & id 'refCities-labels'
var ciLayer = map.getLayer('refCities-labels');
if (typeof ciLayer !== "undefined") {
map.removeLayer('refCities-labels');
}
var ciLayer = map.getSource('refCities-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('refCities-labels')
}
loadRefCities();
//var newSQL = "select the_geom_webmercator, areaname, cartodb_id from st_2016update where state = 'ind'"
//var newSQL = "select ST_SimplifyPreserveTopology(the_geom_webmercator,2000) as the_geom_webmercator, areaname, cartodb_id from st_2016update where state != '" + abbrev + "'"
//var newSQL = "SELECT supermap_simp_st_2021.the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode where state != '" + abbrev + "'"
var newSQL = "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, house_median_value as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where state_abbr != '" + abbrev + "'"
var zoom = map.getZoom();
var zoom_threshold = getZoomLevelByState(abbrev);
//console.log(features);
setTimeout(function(){
stateLayer.setProps({data: newSQL})
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// THIS IS FOR MOBILE
map.fitBounds(bbox, {
padding: {top: 0, bottom:350, left: 25, right: 25}
});
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;bottom:0px!important;background-color:rgba(255,255,255,1.0);width:100%;height:25%;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
} else {
map.fitBounds(bbox, {
padding: {top: 25, bottom:50, left: 25, right: 400}
});
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;right:10px;top:80px;margin-bottom:5px;background-color:rgba(255,255,255,1.0);width:30%;border-radius:7px;";
document.getElementById("expandmenu").style = "z-index:1000;"
document.getElementById("expandmenu").style = "display:none;"
}
},700);
});
var zipcodesLayer = map.getLayer('zipcodes');
if (typeof zipcodesLayer !== "undefined") {
// button is on, layer is found
//console.log("btn on, layer found");
//map.setLayoutProperty('zipcodes', 'visibility', 'visible');
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
//console.log("btn not on, layer found")
map.removeLayer("zipcodes");
//console.log("btn not on, layer not found")
var st = abbrState(clicked_place,"abbr");
var theSQL = "select supermap_zi_shp.the_geom, ST_X(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lng, ST_Y(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lat, split_part(supermap_zi_shp.area_name,',',1) as areaname, split_part(supermap_zi_shp.area_name,',',2) as zipname, population, supermap_zi_shp.state_abbr as state_abbrev, supermap_zi_shp.onecode, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_zi_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_zi_shp.onecode inner join currentcostofliv on supermap_zi_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_zi_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_zi_shp.onecode = currentcomfortindex.onecode where state_abbr = '" + st + "'"
//console.log(theSQL);
var sql = new cartodb.SQL({ user: 'fastforward', api_key: CARTO_DEV_API_KEY, format: 'geojson' });
sql.execute(theSQL).done(function(geojson) {
//console.log("here is the geojson", geojson);
const zipslayer = new deck.MapboxLayer({
id: 'zipcodes',
data: geojson,
type: deck.GeoJsonLayer,
opacity: 1,
stroked: true,
filled: true,
extruded: false,
wireframe: false,
getLineColor: [116,135,115,255],
lineWidthMinPixels: 1,
lineWidthMaxPixels: 1,
lineJointRounded: true,
getFillColor: [255,255,255,1],
getLineWidth: 1,
pickable: true
});
map.addLayer(zipslayer);
map.moveLayer('zipcodes');
//map.moveLayer('zipcodes');
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
map.addSource('zipcode-labels', { type: 'geojson', data: null });
const ZIlabelSource = map.getSource('zipcode-labels');
const state_geoJsonFeatures = geojson.features.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.properties.lng, feature.properties.lat]},"properties":{"label_field": feature.properties.areaname,"state": feature.properties.state_abbrev, "onecode": feature.properties.onecode,"population": feature.properties.population,"homeval": feature.properties.homeval,"cstlivng": feature.properties.cstlivng,"criviol": feature.properties.criviol,"criprop": feature.properties.criprop, "zipname": feature.properties.zipname}}});
//console.log(state_geoJsonFeatures);
ZIlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "zipcode-labels","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-offset": [0, 0],"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgb(139,69,19)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
map.addLayer({
"id": "zipcode-hover","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
map.addLayer({
"id": "zipcode-click","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
var dataBtn = document.getElementById("toggleZips")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
} else {
map.setLayoutProperty('zipcodes', 'visibility', 'none');
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
}
addZipPleth(geojson,'cstlivng',"YlOrRd");
addZipPleth(geojson,'homeval',"PuRd");
addZipPleth(geojson,'criprop',"YlGnBu");
addZipPleth(geojson,'criviol',"YlGn");
var dataBtn = document.getElementById("ZipCodeData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'none');
}
var citytrue = $("#toggleZips").hasClass("active");
if (citytrue == true) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
} else {
// button is not active. map probably being loaded the first time
map.setLayoutProperty('zipcodes', 'visibility', 'none');
}
});
//map.moveLayer('cities-ST-class1-labels');
//map.moveLayer('cities-ST-class2-labels');
//map.moveLayer('cities-ST-class3-labels');
//map.moveLayer('cities-ST-class4-labels');
//map.moveLayer('cities-ST-class5-labels');
} else {
// button is on, layer is not found
//console.log("btn on, layer NOT found")
//console.log("btn not on, layer not found")
var st = abbrState(clicked_place,"abbr");
var theSQL = "select supermap_zi_shp.the_geom, ST_X(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lng, ST_Y(ST_AsText(ST_CENTROID(supermap_zi_shp.the_geom))) as lat, split_part(supermap_zi_shp.area_name,',',1) as areaname, split_part(supermap_zi_shp.area_name,',',2) as zipname, population, supermap_zi_shp.state_abbr as state_abbrev, supermap_zi_shp.onecode, currentcostofliv.aggr as cstlivng, currentcostofliv.house_median_value as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop from supermap_zi_shp inner join currentgeos_09212021 on currentgeos_09212021.onecode = supermap_zi_shp.onecode inner join currentcostofliv on supermap_zi_shp.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_zi_shp.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_zi_shp.onecode = currentcomfortindex.onecode where state_abbr = '" + st + "'"
//console.log(theSQL);
var sql = new cartodb.SQL({ user: 'fastforward', api_key: CARTO_DEV_API_KEY, format: 'geojson' });
sql.execute(theSQL).done(function(geojson) {
//console.log("here is the geojson", geojson);
const zipslayer = new deck.MapboxLayer({
id: 'zipcodes',
data: geojson,
type: deck.GeoJsonLayer,
opacity: 1,
stroked: true,
filled: true,
extruded: false,
wireframe: false,
getLineColor: [116,135,115,255],
lineWidthMinPixels: 1,
lineWidthMaxPixels: 1,
lineJointRounded: true,
getFillColor: [255,255,255,1],
getLineWidth: 1,
pickable: true
});
map.addLayer(zipslayer);
//var zipcodeBtn = document.getElementById("toggleZips");
//zipcodeBtn.className += " active";
map.addSource('zipcode-labels', { type: 'geojson', data: null });
const ZIlabelSource = map.getSource('zipcode-labels');
const state_geoJsonFeatures = geojson.features.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.properties.lng, feature.properties.lat]},"properties":{"label_field": feature.properties.areaname,"state": feature.properties.state_abbrev, "onecode": feature.properties.onecode,"population": feature.properties.population,"homeval": feature.properties.homeval,"cstlivng": feature.properties.cstlivng,"criviol": feature.properties.criviol,"criprop": feature.properties.criprop, "zipname": feature.properties.zipname}}});
//console.log(state_geoJsonFeatures);
ZIlabelSource.setData({
type: 'FeatureCollection',
features: state_geoJsonFeatures
});
map.addLayer({
"id": "zipcode-labels","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-offset": [0, 0],"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgb(139,69,19)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
map.addLayer({
"id": "zipcode-hover","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
map.addLayer({
"id": "zipcode-click","type": "symbol","source": "zipcode-labels","minzoom": 8,
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-anchor": 'center',"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]
});
addZipPleth(geojson,'cstlivng',"YlOrRd");
addZipPleth(geojson,'homeval',"PuRd");
addZipPleth(geojson,'criprop',"YlGnBu");
addZipPleth(geojson,'criviol',"YlGn");
var dataBtn = document.getElementById("toggleZips")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
map.setLayoutProperty('zipcode-labels', 'visibility', 'visible');
} else {
map.setLayoutProperty('zipcodes', 'visibility', 'none');
map.setLayoutProperty('zipcode-labels', 'visibility', 'none');
}
var dataBtn = document.getElementById("ZipCodeData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("ZipCodeData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('zip-cstlivng', 'visibility', 'none');
}
var citytrue = $("#toggleZips").hasClass("active");
if (citytrue == true) {
map.setLayoutProperty('zipcodes', 'visibility', 'visible');
} else {
// button is not active. map probably being loaded the first time
map.setLayoutProperty('zipcodes', 'visibility', 'none');
}
//map.moveLayer('cities-ST-class1-labels');
//map.moveLayer('cities-ST-class2-labels');
//map.moveLayer('cities-ST-class3-labels');
//map.moveLayer('cities-ST-class4-labels');
//map.moveLayer('cities-ST-class5-labels');
});
}
});
} else if (place_type.startsWith("3")) {
//console.log("Metro");
var theSQL = "select ST_asGeoJSON(the_geom) as geom, msjoined_5 as state_abbr, area_name, msjoined_3 as onecode from supermap_simp_ms_2021 where supermap_simp_ms_2021.msjoined_3 = cast(" + place_code + " as text)"
//console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var state_abbr = data.rows[0].state_abbr;
var area_name = data.rows[0].area_name
area_name = area_name.split(",")[0];
var centroid = turf.centroid(parsedGeom);
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'line',
'source': 'city-bnd',
'layout': {},
'paint': {
'line-color': 'rgba(200,0,0,1.0)',
'line-width': 3
},
});
var ciLayer = map.getSource('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('metro-labels')
}
map.addSource('metro-labels', { type: 'geojson', data: null });
const metrolabelSource = map.getSource('metro-labels');
const metros_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"label_field": feature.area_name,"state": feature.state_abbr, "onecode": feature.onecode,"population": feature.population,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//console.log(metros_geoJsonFeatures);
metrolabelSource.setData({
type: 'FeatureCollection',
features: metros_geoJsonFeatures
});
map.addLayer({
"id": "metro-click","type": "symbol","source": "metro-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-variable-anchor": ['center'],"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
//var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng.coordinates[0] + "," + cityLatLng.coordinates[1] + "&onecode=" + placeOneCode
//history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
}, 500);
}
}
});
} else if (place_type.startsWith("4")) {
//console.log("County");
var theSQL = "select ST_asGeoJSON(the_geom) as geom, state_abbr, area_name, onecode from supermap_simp_cn_2021 where supermap_simp_cn_2021.onecode = cast(" + place_code + " as text)"
//console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var state_abbr = data.rows[0].state_abbr;
var area_name = data.rows[0].area_name
area_name = area_name.split(",")[0];
var centroid = turf.centroid(parsedGeom);
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'line',
'source': 'city-bnd',
'layout': {},
'paint': {
'line-color': 'rgba(200,0,0,1.0)',
'line-width': 3
},
});
var ciLayer = map.getSource('metro-labels');
if (typeof ciLayer !== "undefined") {
map.removeSource('metro-labels')
}
map.addSource('metro-labels', { type: 'geojson', data: null });
const metrolabelSource = map.getSource('metro-labels');
const metros_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"label_field": feature.area_name,"state": feature.state_abbr, "onecode": feature.onecode,"population": feature.population,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//console.log(metros_geoJsonFeatures);
metrolabelSource.setData({
type: 'FeatureCollection',
features: metros_geoJsonFeatures
});
map.addLayer({
"id": "metro-click","type": "symbol","source": "metro-labels",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 11,"text-variable-anchor": ['center'],"text-justify": "center",},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}
});
//var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng.coordinates[0] + "," + cityLatLng.coordinates[1] + "&onecode=" + placeOneCode
//history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
}, 500);
}
}
});
} else if (place_type.startsWith("5")) {
//console.log("Cities");
var theSQL = "select ST_asGeoJSON(the_geom) as geom, onecode, area_name, state_abbr as state from supermap_ci_cd_2021 where supermap_ci_cd_2021.onecode = cast(" + place_code + " as text)"
//console.log(theSQL);
var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var centroid = turf.centroid(parsedGeom);
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'fill',
'source': 'city-bnd',
'layout': {},
'paint': {
'fill-color': 'rgba(200,0,0,0.2)'
},
});
const class1_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"onecode": feature.onecode,"label_field": feature.area_name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
map.addSource('citiesSearch', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSearch');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-click","type": "symbol","source": "citiesSearch",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 100, bottom:100, left: 100, right: 100}
});
}, 500);
}
} else {
map.addSource('city-bnd', {
'type': 'geojson',
'data': cityLatLng,
});
map.addLayer({
'id': 'city-bnd',
'type': 'circle',
'source': 'city-bnd',
'layout': {},
'paint': {
'circle-radius': 15,
'circle-color': 'rgba(200,0,0,0.2)'
}
},'cities-ST-class5-labels');
var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng[0] + "," + cityLatLng[1]
//history.pushState({id:'map'}, 'Map App', newURL);
setTimeout(function() {
map.flyTo({center:cityLatLng.coordinates, zoom: 9})
}, 500);
}
});
} else if (place_type.startsWith("6")) {
//console.log("Twp/CoSubs");
var theSQL = "select ST_asGeoJSON(the_geom) as geom, onecode, area_name, state_abbr as state from supermap_ci_cd_2021 where supermap_ci_cd_2021.onecode = cast(" + place_code + " as text)"
//console.log(theSQL);
var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var centroid = turf.centroid(parsedGeom);
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'fill',
'source': 'city-bnd',
'layout': {},
'paint': {
'fill-color': 'rgba(200,0,0,0.2)'
},
});
const class1_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"onecode": feature.onecode,"label_field": feature.area_name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
map.addSource('citiesSearch', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSearch');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-click","type": "symbol","source": "citiesSearch",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 100, bottom:100, left: 100, right: 100}
});
}, 500);
}
} else {
map.addSource('city-bnd', {
'type': 'geojson',
'data': cityLatLng,
});
map.addLayer({
'id': 'city-bnd',
'type': 'circle',
'source': 'city-bnd',
'layout': {},
'paint': {
'circle-radius': 15,
'circle-color': 'rgba(200,0,0,0.2)'
}
},'cities-ST-class5-labels');
var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng[0] + "," + cityLatLng[1]
//history.pushState({id:'map'}, 'Map App', newURL);
setTimeout(function() {
map.flyTo({center:cityLatLng.coordinates, zoom: 9})
}, 500);
}
});
} else {
// 7
//console.log("Zip codes");
var theSQL = "select ST_asGeoJSON(the_geom) as geom, onecode, area_name, state_abbr as state from supermap_simp_zi_2021 where supermap_simp_zi_2021.onecode = cast(" + place_code + " as text)"
//console.log(theSQL);
var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var centroid = turf.centroid(parsedGeom);
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'fill',
'source': 'city-bnd',
'layout': {},
'paint': {
'fill-color': 'rgba(200,0,0,0.2)'
},
});
const class1_geoJsonFeatures = data.rows.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]]},"properties":{"onecode": feature.onecode,"label_field": feature.area_name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
map.addSource('citiesSearch', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSearch');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-click","type": "symbol","source": "citiesSearch",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 100, bottom:100, left: 100, right: 100}
});
}, 500);
}
} else {
map.addSource('city-bnd', {
'type': 'geojson',
'data': cityLatLng,
});
map.addLayer({
'id': 'city-bnd',
'type': 'circle',
'source': 'city-bnd',
'layout': {},
'paint': {
'circle-radius': 15,
'circle-color': 'rgba(200,0,0,0.2)'
}
},'cities-ST-class5-labels');
var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng[0] + "," + cityLatLng[1]
//history.pushState({id:'map'}, 'Map App', newURL);
setTimeout(function() {
map.flyTo({center:cityLatLng.coordinates, zoom: 9})
}, 500);
}
});
}
}
function zoomToDemo(state_abbrev,geo_type,placename,zipcode) {
var placeOneCode = '54159000'
// load cities in STATE
// highlight selected city with OneCode
// fit to city bounds - this will ensure city is visible regardless of size
//
// console.log("SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, house_median_value as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where state_abbr != '" + state_abbrev + "'");
clicked_place = abbrState(state_abbrev, "name")
/*
stateLayer.setProps({
data: "SELECT st_simplifypreservetopology(supermap_simp_st_2021.the_geom_webmercator, 4000) as the_geom_webmercator, currentcostofliv.place_name as areaname, supermap_simp_st_2021.cartodb_id, supermap_simp_st_2021.onecode, currentgeos_09212021.population, aggr as col, housemedianvalue as homeval, crimeviolent as criviol, crimeproperty as criprop FROM fastforward.supermap_simp_st_2021 inner join fastforward.currentgeos_09212021 on supermap_simp_st_2021.onecode = currentgeos_09212021.onecode inner join fastforward.currenthousing_09212021 on supermap_simp_st_2021.onecode = currenthousing_09212021.onecode inner join currentcostofliv on supermap_simp_st_2021.onecode = currentcostofliv.onecode inner join currentcrimclimmisc_09212021 on supermap_simp_st_2021.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_simp_st_2021.onecode = currentcomfortindex.onecode where state_abbr != '" + state_abbrev + "'",
});
*/
loadCitiesInState(state_abbrev);
console.log(state_abbrev, geo_type, placename);
/* NEED: Zoom To State. */
highlightCity(geo_type,placename,state_abbrev, zipcode);
//map.flyTo({zoom:9, center:[-122.6,45.5]});
}
function loadCitiesInState(abbrev) {
//console.log(abbrev);
var capAbbrev = abbrev.toUpperCase();
var theSQL = "SELECT supermap_cities_cds_bert.the_geom_webmercator, supermap_cities_cds_bert.onecode, supermap_cities_cds_bert.state, supermap_cities_cds_bert.area_name as name, currentgeos_09212021.population as population, ST_X(ST_AsText(supermap_cities_cds_bert.the_geom)) as lng, ST_Y(ST_AsText(supermap_cities_cds_bert.the_geom)) as lat, currentcostofliv.aggr as cstlivng, currenthousing_09212021.housemedianvalue as homeval, currentcrimclimmisc_09212021.crimeviolent as criviol, currentcrimclimmisc_09212021.crimeproperty as criprop FROM fastforward.supermap_cities_cds_bert inner join currentgeos_09212021 on supermap_cities_cds_bert.onecode = currentgeos_09212021.onecode inner join currentcostofliv on supermap_cities_cds_bert.onecode = currentcostofliv.onecode inner join currenthousing_09212021 on supermap_cities_cds_bert.onecode = currenthousing_09212021.onecode inner join currentcrimclimmisc_09212021 on supermap_cities_cds_bert.onecode = currentcrimclimmisc_09212021.onecode inner join currentcomfortindex on supermap_cities_cds_bert.onecode = currentcomfortindex.onecode where supermap_cities_cds_bert.state = '" + capAbbrev + "' order by population desc"
//console.log(theSQL);
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
// GET Class Breaks for City Classes
var jenksBreaks = getClassBreaks(capAbbrev)[0]
//console.log(jenksBreaks);
var result = data.rows;
//console.log(result);
var class1 = [];
var class2 = [];
var class3 = [];
var class4 = [];
var class5 = [];
// Use jenksBreaks to split the Cities GeoJSON into separate classes
for (var i = 0; i < result.length; i++) {
var population = data.rows[i].population;
if (population < jenksBreaks[0]) { // Class 5
//console.log("class 5");
class5.push(data.rows[i]);
} else if (population >= jenksBreaks[0] && population < jenksBreaks[1]) { // Class 4
//console.log("class 2");
class4.push(data.rows[i]);
} else if (population >= jenksBreaks[1] && population < jenksBreaks[2]) { // Class 3
//console.log("class 3")
class3.push(data.rows[i]);
} else if (population >= jenksBreaks[2] && population < jenksBreaks[3]) { // Class 2
//console.log("class 4")
class2.push(data.rows[i]);
} else if (population >= jenksBreaks[3]) { // Class 1
//console.log("class 1")
class1.push(data.rows[i]);
} else {
//console.log("somehow not in jenks classification. " + population + " : " + jenksBreaks)
}
}
const class1_geoJsonFeatures = class1.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class2_geoJsonFeatures = class2.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class3_geoJsonFeatures = class3.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class4_geoJsonFeatures = class4.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
const class5_geoJsonFeatures = class5.map(feature => {return {"type": "Feature","geometry": {"type": "Point","coordinates": [feature.lng, feature.lat]},"properties":{"population": feature.population,"onecode": feature.onecode,"label_field": feature.name,"state": feature.state,"homeval": feature.homeval,"cstlivng": feature.cstlivng,"criviol": feature.criviol,"criprop": feature.criprop}}});
//CLASS 5
map.addSource('citiesSTClass5LabelSrc', { type: 'geojson', data: null });
const class5Source = map.getSource('citiesSTClass5LabelSrc');
class5Source.setData({type: 'FeatureCollection',features: class5_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class5-labels","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class5-hover","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class5-click","type": "symbol","source": "citiesSTClass5LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 10,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 20,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 4
map.addSource('citiesSTClass4LabelSrc', { type: 'geojson', data: null });
const class4Source = map.getSource('citiesSTClass4LabelSrc');
class4Source.setData({type: 'FeatureCollection',features: class4_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class4-labels","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class4-hover","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class4-click","type": "symbol","source": "citiesSTClass4LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 12,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 3
map.addSource('citiesSTClass3LabelSrc', { type: 'geojson', data: null });
const class3Source = map.getSource('citiesSTClass3LabelSrc');
class3Source.setData({type: 'FeatureCollection',features: class3_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class3-labels","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class3-hover","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class3-click","type": "symbol","source": "citiesSTClass3LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 14,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 2,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 2
map.addSource('citiesSTClass2LabelSrc', { type: 'geojson', data: null });
const class2Source = map.getSource('citiesSTClass2LabelSrc');
class2Source.setData({type: 'FeatureCollection',features: class2_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class2-labels","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class2-hover","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class2-click","type": "symbol","source": "citiesSTClass2LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 16,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
//CLASS 1
map.addSource('citiesSTClass1LabelSrc', { type: 'geojson', data: null });
const class1Source = map.getSource('citiesSTClass1LabelSrc');
class1Source.setData({type: 'FeatureCollection',features: class1_geoJsonFeatures});
map.addLayer({
"id": "cities-ST-class1-labels","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(50,50,50,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2}}
);
map.addLayer({
"id": "cities-ST-class1-hover","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
map.addLayer({
"id": "cities-ST-class1-click","type": "symbol","source": "citiesSTClass1LabelSrc",
"layout": {"text-field": "{label_field}","text-font": ["Open Sans Bold"],"text-size": 18,"text-radial-offset": 0,"text-anchor": "center","text-justify": "auto","text-padding": 1,},
"paint": {"text-color": "rgba(200,0,0,1.0)","text-halo-color": "rgba(250,250,250,0.75)","text-halo-width": 2,"text-halo-blur": 2},"filter": ["==", "onecode", ""]}
);
// LOAD COUNTIES IF BUTTON IS ACTIVE
var countyBtn = document.getElementById("toggleCounties")
var hasClass = countyBtn.classList.contains('active');
if (hasClass) {
//console.log("counties loaded. btn state is active");
loadCountyLabels(clicked_place);
}
});
}
function hideMerc() {
//console.log("layer loaded")
layer_merc.hide();
}
function hideLayer() {
layer.hide();
}
map.on('dragend', function(){
var citiesShown = []
var places_layer = map.getLayer('cities-ST-class1-labels');
if (typeof places_layer !== "undefined") {
var features = map.queryRenderedFeatures({
layers: ["cities-ST-class1-labels", "cities-ST-class2-labels", "cities-ST-class3-labels", "cities-ST-class4-labels", "cities-ST-class5-labels",
"cities-ST-class1-hover", "cities-ST-class2-hover", "cities-ST-class3-hover", "cities-ST-class4-hover", "cities-ST-class5-hover",
"cities-ST-class1-click", "cities-ST-class2-click", "cities-ST-class3-click", "cities-ST-class4-click", "cities-ST-class5-click"]
});
if (features.length > 0) {
var i;
for (i = 0; i < features.length; i++) {
var onecodeString = "'" + features[i].properties.onecode.toString() + "'"
citiesShown.push(onecodeString);
}
addScatter(features,'cstlivng',"YlOrRd");
addScatter(features,'homeval',"PuRd");
addScatter(features,'criprop',"YlGnBu");
addScatter(features,'criviol',"YlGn");
var dataBtn = document.getElementById("CityData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("CityData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("CityData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("CityData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-cstlivng', 'visibility', 'none');
}
}
}
});
map.on('zoomend', function(){
var citiesShown = []
var places_layer = map.getLayer('cities-ST-class1-labels');
if (typeof places_layer !== "undefined") {
var features = map.queryRenderedFeatures({
layers: ["cities-ST-class1-labels", "cities-ST-class2-labels", "cities-ST-class3-labels", "cities-ST-class4-labels", "cities-ST-class5-labels",
"cities-ST-class1-hover", "cities-ST-class2-hover", "cities-ST-class3-hover", "cities-ST-class4-hover", "cities-ST-class5-hover",
"cities-ST-class1-click", "cities-ST-class2-click", "cities-ST-class3-click", "cities-ST-class4-click", "cities-ST-class5-click"]
});
//console.log(features)
if (features.length > 0) {
var i;
for (i = 0; i < features.length; i++) {
var onecodeString = "'" + features[i].properties.onecode.toString() + "'"
citiesShown.push(onecodeString);
}
addScatter(features,'cstlivng',"YlOrRd");
addScatter(features,'homeval',"PuRd");
addScatter(features,'criprop',"YlGnBu");
addScatter(features,'criviol',"YlGn");
var dataBtn = document.getElementById("CityData1")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-homeval', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-homeval', 'visibility', 'none');
}
dataBtn = document.getElementById("CityData2")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-criviol', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-criviol', 'visibility', 'none');
}
dataBtn = document.getElementById("CityData3")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-criprop', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-criprop', 'visibility', 'none');
}
dataBtn = document.getElementById("CityData4")
var hasClass = dataBtn.classList.contains('active');
if (hasClass) {
map.setLayoutProperty('scatter-cstlivng', 'visibility', 'visible');
} else {
map.setLayoutProperty('scatter-cstlivng', 'visibility', 'none');
}
}
}
});
map.on('sourcedata', (e) => {
var sourceId = e.sourceId;
});
map.on('click', function (e) {
/* CLICK ON MAP, HIDE MAP OPTIONS */
//console.log("clicked");
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// THIS IS FOR MOBILE!!
//$('#collapseExample').collapse('hide');
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;position:absolute;bottom:0px!important;background-color:rgba(255,255,255,1.0);width:100%;height:25%;";
//document.getElementById("collapseExample").style = "display:none;"
} else {
//$('#collapseExample').collapse('show');
// THIS IS FOR DESKTOP
document.getElementById("infopane").style = "display:block;overflow-y:auto;overflow-x:hidden;overflow-x:hidden;position:absolute;right:10px;top:80px;margin-bottom:5px;background-color:rgba(255,255,255,1.0);width:30%;border-radius:7px;";
}
// set bbox as 5px reactangle area around clicked point
var bbox = [
[e.point.x - 5, e.point.y - 5],
[e.point.x + 5, e.point.y + 5]
];
// adjust Query layers depending what is visible
var features = map.queryRenderedFeatures(bbox, {
//layers: ["cities-ST-class1-labels", "cities-ST-class2-labels", "cities-ST-class3-labels", "cities-ST-class4-labels", "cities-ST-class5-labels","cities-ST-class1-hover", "cities-ST-class2-hover", "cities-ST-class3-hover", "cities-ST-class4-hover", "cities-ST-class5-hover"]
});
var ciLayer = map.getLayer('cities-click');
if (typeof ciLayer !== "undefined") {
map.removeLayer('cities-click');
}
var ciLayer = map.getSource('citiesSearch');
if (typeof ciLayer !== "undefined") {
map.removeSource('citiesSearch');
}
// if city bnd exists
var ciLayer = map.getLayer('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeLayer('city-bnd');
map.removeSource('city-bnd');
}
if (features.length > 0) {
// if city bnd exists
var ciLayer = map.getLayer('layer2');
if (typeof ciLayer !== "undefined") {
//state_interactivity.disable();
}
var ciLayer = map.getLayer('layer3');
if (typeof ciLayer !== "undefined") {
//new_state_interactivity.disable();
}
var source = features[0].source
console.log(features[0]);
//console.log(features[0]);
if (source == "citiesSTClass1LabelSrc") {
map.setFilter('cities-ST-class1-click', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class1-click', 'visibility', 'visible');
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
var zipBtnClassList = document.getElementById("toggleZips").classList
if (zipBtnClassList.contains("disabled")) {
zipBtnClassList.remove('disabled');
zipBtnClassList.add('text-danger')
}
} else if (source == "citiesSTClass2LabelSrc") {
map.setFilter('cities-ST-class2-click', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class2-click', 'visibility', 'visible');
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
var zipBtnClassList = document.getElementById("toggleZips").classList
if (zipBtnClassList.contains("disabled")) {
zipBtnClassList.remove('disabled');
zipBtnClassList.add('text-danger')
}
} else if (source == "citiesSTClass3LabelSrc") {
map.setFilter('cities-ST-class3-click', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class3-click', 'visibility', 'visible');
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
var zipBtnClassList = document.getElementById("toggleZips").classList
if (zipBtnClassList.contains("disabled")) {
zipBtnClassList.remove('disabled');
zipBtnClassList.add('text-danger')
}
} else if (source == "citiesSTClass4LabelSrc") {
map.setFilter('cities-ST-class4-click', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class4-click', 'visibility', 'visible');
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
var zipBtnClassList = document.getElementById("toggleZips").classList
if (zipBtnClassList.contains("disabled")) {
zipBtnClassList.remove('disabled');
zipBtnClassList.add('text-danger')
}
} else if (source == "citiesSTClass5LabelSrc") {
map.setFilter('cities-ST-class5-click', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('cities-ST-class5-click', 'visibility', 'visible');
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
var zipBtnClassList = document.getElementById("toggleZips").classList
if (zipBtnClassList.contains("disabled")) {
zipBtnClassList.remove('disabled');
zipBtnClassList.add('text-danger')
}
} else if (source == "county-labels") {
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
map.setFilter('county-click', ["==","onecode",features[0].properties.onecode]);
map.setLayoutProperty('county-click', 'visibility', 'visible');
//console.log(features[0].properties)
// remove hover effects
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
var theSQL = "select ST_asGeoJSON(the_geom) as geom, state_abbr, area_name, supermap_simp_cn_2021.onecode from supermap_simp_cn_2021 where supermap_simp_cn_2021.onecode = cast(" + features[0].properties['onecode'] + " as text)"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var state_abbr = data.rows[0].state_abbr;
var area_name = data.rows[0].area_name;
var countyonecode = data.rows[0].onecode;
area_name = area_name.replace(" County", '');
var centroid = turf.centroid(parsedGeom);
// if city bnd exists
var ciLayer = map.getSource('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeSource('city-bnd');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'line',
'source': 'city-bnd',
'layout': {},
'paint': {
'line-color': 'rgba(200,0,0,1.0)',
'line-width': 3
},
});
var newURL = "https://img.bestplaces.net/maps/county/" + abbrState(state_abbr,"name") + "/" + area_name
history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
}, 500);
}
}
/* if map has a popup, remove it before adding a new one */
var the_map = document.getElementById("map")
var the_popup = the_map.getElementsByClassName("mapboxgl-popup")
if (the_popup) {
$('.mapboxgl-popup').remove();
}
var popup = new mapboxgl.Popup({ offset: 0, closeOnClick: true, closeButton: true })
.setLngLat([centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]])
.setHTML(" Go to: " + area_name + " County, " + state_abbr + " page"/*
Zoom To"*/)
.addTo(map);
//var popup = new mapboxgl.Popup({ closeOnClick: false, offset: 10, closeOnClick: true, closeButton: false, })
// .setLngLat([cityLatLng.coordinates[0],cityLatLng.coordinates[1]])
// .setHTML(" Go to: " + placeLabel + ", " + stateLabel + " page"/*
Zoom To"*/)
// .addTo(map);
});
return
} else if (source == "state-labels") {
//console.log(features[0].properties)
document.getElementById("hovercounty").innerHTML = "" + features[0].properties.label_field + ""
return
} else if (source == "metro-labels") {
//console.log(features[0].properties)
document.getElementById("hovercounty").innerHTML = "
" + features[0].properties.label_field + ""
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
map.setFilter('metro-click', ["==", "onecode", features[0].properties.onecode]);
// remove hover effects
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
var theSQL = "select ST_asGeoJSON(the_geom) as geom, msjoined_5 as state_abbr, area_name, supermap_simp_ms_2021.msjoined_3 from supermap_simp_ms_2021 where supermap_simp_ms_2021.msjoined_3 = cast(" + features[0].properties['onecode'] + " as text)"
//console.log(theSQL)
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var state_abbr = data.rows[0].state_abbr;
var area_name1 = data.rows[0].area_name
area_name2 = area_name1.split(",")[0];
var centroid = turf.centroid(parsedGeom);
var metroonecode = data.rows[0].msjoined_3
console.log(area_name1)
// if city bnd exists
var ciLayer = map.getSource('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeSource('city-bnd');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'line',
'source': 'city-bnd',
'layout': {},
'paint': {
'line-color': 'rgba(200,0,0,1.0)',
'line-width': 3
},
});
var newURL = "https://img.bestplaces.net/maps/metro/" + abbrState(stateLabel,"name") + "/" + area_name1
history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
}, 500);
}
}
/* if map has a popup, remove it before adding a new one */
var the_map = document.getElementById("map")
var the_popup = the_map.getElementsByClassName("mapboxgl-popup")
if (the_popup) {
$('.mapboxgl-popup').remove();
}
var popup = new mapboxgl.Popup({ offset: 0, closeOnClick: true, closeButton: true })
.setLngLat([centroid.geometry.coordinates[0], centroid.geometry.coordinates[1]])
.setHTML(" Go to: " + area_name + ", " + state_abbr + " page")
.addTo(map);
//var popup = new mapboxgl.Popup({ closeOnClick: false, offset: 10, closeOnClick: true, closeButton: false, })
// .setLngLat([cityLatLng.coordinates[0],cityLatLng.coordinates[1]])
// .setHTML(" Go to: " + placeLabel + ", " + stateLabel + " page"/*
Zoom To"*/)
// .addTo(map);
});
return
} else if (source == "zipcode-labels") {
//console.log(features[0].properties)
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var costLiv = features[0].properties['cstlivng']
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
map.setFilter('zipcode-click', ["==", "onecode", features[0].properties.onecode]);
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==","onecode",""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==","onecode",""]);
}
var theSQL = "select ST_asGeoJSON(the_geom) as geom, area_name, state_abbr, supermap_zi_shp.onecode from supermap_zi_shp where supermap_zi_shp.onecode = cast(" + features[0].properties['onecode'] + " as text)"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
var centroid = turf.centroid(parsedGeom)
var cent_coords = centroid.geometry.coordinates
var zip_areaname = data.rows[0].area_name
var zip_code = zip_areaname.split(", ")[0]
var area_name = zip_areaname.split(", ")[1]
var state_abbr = data.rows[0].state_abbr
var ziponecode = data.rows[0].onecode
//console.log(cent_coords);
// if city bnd exists
var ciLayer = map.getSource('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeSource('city-bnd');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'line',
'source': 'city-bnd',
'layout': {},
'paint': {
'line-color': 'rgba(200,0,0,1.0)',
'line-width': 3
},
});
// apply place name with zip
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + area_name + ", " + stateLabel ;
var newURL = "https://img.bestplaces.net/maps/zip-code/" + abbrState(stateLabel,"name") + "/" + area_name + "/" + zip_code + "/"
history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
map.flyTo({center: [cent_coords[0], cent_coords[1] ]});
/*
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
*/
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
map.flyTo({center: [cent_coords[0], cent_coords[1] ]});
/*
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
*/
}, 500);
}
}
/* if map has a popup, remove it before adding a new one */
var the_map = document.getElementById("map")
var the_popup = the_map.getElementsByClassName("mapboxgl-popup")
if (the_popup) {
$('.mapboxgl-popup').remove();
}
var popup = new mapboxgl.Popup({ offset: 0, closeOnClick: true, closeButton: true })
.setLngLat([cent_coords[0], cent_coords[1]])
.setHTML(" Go to: " + zip_code + ", " + area_name + ", " + state_abbr + " page"/*
Zoom To"*/)
.addTo(map);
//var popup = new mapboxgl.Popup({ closeOnClick: false, offset: 10, closeOnClick: true, closeButton: false, })
// .setLngLat([cityLatLng.coordinates[0],cityLatLng.coordinates[1]])
// .setHTML(" Go to: " + placeLabel + ", " + stateLabel + " page"/*
Zoom To"*/)
// .addTo(map);
});
return
} else {
var ciLayer = map.getLayer('cities-ST-class1-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class2-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class3-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class4-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class5-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
return
}
var placeOneCode = features[0].properties['onecode']
var cityLatLng = features[0].geometry
var formattedPop = Math.round(parseInt(features[0].properties['population']) / 1000).toLocaleString('en')
var placeLabel = features[0].properties['label_field']
var stateLabel = features[0].properties['state']
var criViol = features[0].properties['criviol']
var criProp = features[0].properties['criprop']
var homeVal = features[0].properties['homeval']
var newHomeVal = parseInt(homeVal) / 1000;
var newCriViol = parseFloat(criViol);
var newCriProp = parseFloat(criProp);
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
var costLiv = features[0].properties['cstlivng']
var renderedText = placeLabel + "\nPopulation: " + formattedPop;
//console.log(cityLatLng);
var theSQL = "select ST_asGeoJSON(the_geom) as geom from supermap_ci_cd_2021 where supermap_ci_cd_2021.onecode = cast(" + placeOneCode + " as text)"
//var theAPIKey = 'QvcRuuAo8Vl9YQeilUvdvw'
$.getJSON("https://fastforward.carto.com/api/v2/sql/?q="+theSQL+"&api_key="+CARTO_DEV_API_KEY, function(data) {
if (data.rows.length > 0) {
var geom = data.rows[0].geom;
var parsedGeom = JSON.parse(geom);
clicked_geom = parsedGeom
var bbox = turf.extent(parsedGeom);
// if city bnd exists
var ciLayer = map.getSource('city-bnd');
if (typeof ciLayer !== "undefined") {
map.removeSource('city-bnd');
}
map.addSource('city-bnd', {
'type': 'geojson',
'data': parsedGeom
});
map.addLayer({
'id': 'city-bnd',
'type': 'fill',
'source': 'city-bnd',
'layout': {},
'paint': {
'fill-color': 'rgba(200,0,0,0.2)'
},
},'cities-ST-class5-labels');
var newURL = "https://img.bestplaces.net/maps/city/" + abbrState(stateLabel,"name") + "/" + placeLabel
history.pushState({id:'map'}, 'Map App', newURL);
var x = window.matchMedia("(max-width: 800px)")
var size = myFunction(x) // Call listener function at run time
if (size === "less") {
// screen MOBILE
setTimeout(function() {
// THIS IS FOR MOBILE'
//map.flyTo({center: [cityLatLng.coordinates[0], cityLatLng.coordinates[1] ]});
map.fitBounds(bbox, {
padding: {top: 175, bottom:400, left: 175, right: 175}
});
}, 500);
} else {
// screen DESKTOP
setTimeout(function() {
// THIS IS FOR DESKTOP
//map.flyTo({center: [cityLatLng.coordinates[0] ,cityLatLng.coordinates[1]]});
map.fitBounds(bbox, {
padding: {top: 300, bottom:300, left: 400, right: 850}
});
}, 500);
}
} else {
map.addSource('city-bnd', {
'type': 'geojson',
'data': cityLatLng,
});
map.addLayer({
'id': 'city-bnd',
'type': 'circle',
'source': 'city-bnd',
'layout': {},
'paint': {
'circle-radius': 15,
'circle-color': 'rgba(200,0,0,0.2)'
}
},'cities-ST-class5-labels');
var newURL = "https://dev.bestplaces.net/maps/deckgl.aspx?loc=" + cityLatLng[0] + "," + cityLatLng[1]
//history.pushState({id:'map'}, 'Map App', newURL);
setTimeout(function() {
map.flyTo({center:cityLatLng.coordinates, zoom: 9})
}, 500);
}
/* if map has a popup, remove it before adding a new one */
var the_map = document.getElementById("map")
var the_popup = the_map.getElementsByClassName("mapboxgl-popup")
if (the_popup) {
$('.mapboxgl-popup').remove();
}
var popup = new mapboxgl.Popup({ offset: 0, closeOnClick: true, closeButton: true })
.setLngLat([cityLatLng.coordinates[0],cityLatLng.coordinates[1]])
.setHTML(" Go to: " + placeLabel + ", " + stateLabel + " page"/*
Zoom To"*/)
.addTo(map);
});
var stateLabel = features[0].properties['state']
var composite_crime_rate = ((criViol + criProp) / 2).toFixed(1);
document.getElementById("hovercounty").innerHTML = placeLabel + ", " + stateLabel ;
document.getElementById("population").innerHTML = "People
" + (parseInt(features[0].properties.population) / 1000).toFixed(1) + "k " + "";
document.getElementById("criviol").innerHTML = "Violent / Prop
Crime
" + newCriViol + " / " + newCriProp + "";
//document.getElementById("criviol").innerHTML = "Crime
" + composite_crime_rate + "";
document.getElementById("homeval").innerHTML = "Home Prices
$" + newHomeVal.toFixed(1) + "k " + "";
document.getElementById("cstlivng").innerHTML = "Cost of Living
" + costLiv + "";
//document.getElementById("link").href = "https://dev.bestplaces.net/city/" + stateLabel + "/" + placeLabel + "/";
//document.getElementById("link").text = placeLabel + ", " + stateLabel
//document.getElementById("link").setAttribute("target","_blank");
// end IF ANY FEATURES HAVE BEEN RETURNED
// else no features found. nothing was clicked.
} else {
var ciLayer = map.getLayer('cities-ST-class1-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class1-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class2-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class2-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class3-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class3-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class4-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class4-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('cities-ST-class5-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('cities-ST-class5-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('county-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('county-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('metro-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('metro-click', ["==", "onecode", ""]);
}
var ciLayer = map.getLayer('zipcode-click');
if (typeof ciLayer !== "undefined") {
map.setFilter('zipcode-click', ["==", "onecode", ""]);
}
/*
var the_map = document.getElementById("map")
var the_popup = the_map.getElementsByClassName("mapboxgl-popup")
if (the_popup) {
$('.mapboxgl-popup').remove();
}
var the_marker = the_map.getElementsByClassName("mapboxgl-marker")
if (the_marker) {
$('.mapboxgl-marker').remove();
}
var value = e.lngLat.lng
var out_str_lng = ""
var out_str_lat
if (value >= 0) {
// positive integer
out_str_lng = (e.lngLat.lat).toFixed(2) + " E"
} else {
out_str_lng = Math.abs(e.lngLat.lng).toFixed(2) + " W"
}
value = e.lngLat.lat
if (value >= 0) {
// positive integer
out_str_lat = (e.lngLat.lat).toFixed(2) + " N"
} else {
out_str_lat = Math.abs(e.lngLat.lat).toFixed(2) + " S"
}
var popup = new mapboxgl.Popup({ offset: 0, closeOnClick: true, closeButton: true })
.setLngLat([e.lngLat.lng,e.lngLat.lat])
.setHTML("" + out_str_lat + ", " + out_str_lng + "")
.addTo(map);
*/
}
});