mirror of
https://github.com/alex-shpak/hugo-book.git
synced 2025-07-16 19:51:22 +00:00
map creation
created map
This commit is contained in:
Will Rinehart
parent
7a58953fbf
commit
c1be84474c
485
layouts/shortcodes/ai-bills-map copy.html
Normal file
485
layouts/shortcodes/ai-bills-map copy.html
Normal file
@ -0,0 +1,485 @@
|
||||
{{/*
|
||||
Usage: {{< ai-bills-map sheet-url="YOUR_GOOGLE_SHEET_CSV_URL" >}}
|
||||
*/}}
|
||||
|
||||
{{ $sheetUrl := .Get "sheet-url" }}
|
||||
|
||||
<div id="ai-bills-container" style="height: 600px; position: relative; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
|
||||
<!-- Map Container -->
|
||||
<div id="ai-bills-map" style="height: 100%; width: 70%; float: left;"></div>
|
||||
|
||||
<!-- Sidebar Container -->
|
||||
<div id="ai-bills-sidebar" style="height: 100%; width: 30%; float: right; background: #f8f9fa; border-left: 1px solid #ddd; overflow-y: auto; padding: 15px; box-sizing: border-box;">
|
||||
<div id="ai-bills-content">
|
||||
<h3 style="margin-top: 0; color: #333; font-size: 1.2em;">AI Legislation Bills</h3>
|
||||
<p style="color: #666; margin-bottom: 20px;">Click on a state to view AI-related bills.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""/>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""></script>
|
||||
|
||||
<!-- Papa Parse for CSV processing -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
|
||||
|
||||
<style>
|
||||
#ai-bills-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.state-hover {
|
||||
fill-opacity: 0.7 !important;
|
||||
stroke: #2c3e50 !important;
|
||||
stroke-width: 2 !important;
|
||||
}
|
||||
|
||||
.state-selected {
|
||||
fill: #3498db !important;
|
||||
fill-opacity: 0.8 !important;
|
||||
stroke: #2c3e50 !important;
|
||||
stroke-width: 3 !important;
|
||||
}
|
||||
|
||||
#ai-bills-sidebar h3 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.bill-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.bill-number {
|
||||
font-weight: bold;
|
||||
color: #3498db;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.bill-date {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.bill-action {
|
||||
color: #2c3e50;
|
||||
margin: 5px 0;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.bill-description {
|
||||
color: #555;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.4;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.bill-link {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bill-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.state-info {
|
||||
background: #ecf0f1;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#ai-bills-container {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#ai-bills-map, #ai-bills-sidebar {
|
||||
width: 100% !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
#ai-bills-map {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#ai-bills-sidebar {
|
||||
border-left: none !important;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const SHEET_URL = "{{ $sheetUrl }}";
|
||||
let map, billsData = {}, geojsonLayer;
|
||||
|
||||
// State name to abbreviation mapping
|
||||
const stateAbbreviations = {
|
||||
'Alabama': 'AL', 'Alaska': 'AK', 'Arizona': 'AZ', 'Arkansas': 'AR', 'California': 'CA',
|
||||
'Colorado': 'CO', 'Connecticut': 'CT', 'Delaware': 'DE', 'Florida': 'FL', 'Georgia': 'GA',
|
||||
'Hawaii': 'HI', 'Idaho': 'ID', 'Illinois': 'IL', 'Indiana': 'IN', 'Iowa': 'IA',
|
||||
'Kansas': 'KS', 'Kentucky': 'KY', 'Louisiana': 'LA', 'Maine': 'ME', 'Maryland': 'MD',
|
||||
'Massachusetts': 'MA', 'Michigan': 'MI', 'Minnesota': 'MN', 'Mississippi': 'MS', 'Missouri': 'MO',
|
||||
'Montana': 'MT', 'Nebraska': 'NE', 'Nevada': 'NV', 'New Hampshire': 'NH', 'New Jersey': 'NJ',
|
||||
'New Mexico': 'NM', 'New York': 'NY', 'North Carolina': 'NC', 'North Dakota': 'ND', 'Ohio': 'OH',
|
||||
'Oklahoma': 'OK', 'Oregon': 'OR', 'Pennsylvania': 'PA', 'Rhode Island': 'RI', 'South Carolina': 'SC',
|
||||
'South Dakota': 'SD', 'Tennessee': 'TN', 'Texas': 'TX', 'Utah': 'UT', 'Vermont': 'VT',
|
||||
'Virginia': 'VA', 'Washington': 'WA', 'West Virginia': 'WV', 'Wisconsin': 'WI', 'Wyoming': 'WY'
|
||||
};
|
||||
|
||||
// Initialize the map
|
||||
function initMap() {
|
||||
map = L.map('ai-bills-map', {
|
||||
center: [39.8283, -98.5795], // Center of US
|
||||
zoom: 4,
|
||||
zoomControl: true,
|
||||
scrollWheelZoom: true,
|
||||
// Restrict map bounds to show US including Alaska and Hawaii
|
||||
maxBounds: [
|
||||
[15, -180], // Southwest coordinates (includes Hawaii)
|
||||
[72, -60] // Northeast coordinates (includes Alaska)
|
||||
],
|
||||
maxBoundsViscosity: 1.0
|
||||
});
|
||||
|
||||
// Add tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
maxZoom: 18,
|
||||
minZoom: 3
|
||||
}).addTo(map);
|
||||
|
||||
loadUSStates();
|
||||
loadBillsData();
|
||||
}
|
||||
|
||||
// Load US states GeoJSON
|
||||
function loadUSStates() {
|
||||
console.log('Loading US states GeoJSON...');
|
||||
|
||||
// Use a reliable US states GeoJSON source
|
||||
fetch('https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json')
|
||||
.then(response => {
|
||||
console.log('GeoJSON response status:', response.status);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('US states GeoJSON loaded successfully');
|
||||
console.log('Number of states in GeoJSON:', data.features.length);
|
||||
console.log('Sample state names:', data.features.slice(0, 3).map(f => f.properties.NAME));
|
||||
addStatesToMap(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading US states from primary source:', error);
|
||||
// Fallback: try alternative GeoJSON source
|
||||
loadUSStatesAlternative();
|
||||
});
|
||||
}
|
||||
|
||||
// Alternative GeoJSON source for US states
|
||||
function loadUSStatesAlternative() {
|
||||
console.log('Trying alternative GeoJSON source...');
|
||||
|
||||
fetch('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Alternative GeoJSON loaded, filtering for US states...');
|
||||
// Filter for US states only
|
||||
const usStates = {
|
||||
type: 'FeatureCollection',
|
||||
features: data.features.filter(feature =>
|
||||
feature.properties.ISO_A2 === 'US' &&
|
||||
stateAbbreviations[feature.properties.NAME_EN]
|
||||
)
|
||||
};
|
||||
console.log('Filtered US states count:', usStates.features.length);
|
||||
addStatesToMap(usStates);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading alternative US states data:', error);
|
||||
// Last resort: create a simple fallback message
|
||||
document.getElementById('ai-bills-content').innerHTML +=
|
||||
'<div style="color: red; margin-top: 10px;">Error loading map data. State selection may not work.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
// Add states to map with interaction
|
||||
function addStatesToMap(geojsonData) {
|
||||
console.log('Adding states to map...');
|
||||
|
||||
geojsonLayer = L.geoJSON(geojsonData, {
|
||||
style: function(feature) {
|
||||
// Handle different property names in different GeoJSON sources
|
||||
const stateName = feature.properties.NAME || feature.properties.NAME_EN || feature.properties.name;
|
||||
const stateAbbr = stateAbbreviations[stateName];
|
||||
const billCount = billsData[stateAbbr] ? billsData[stateAbbr].length : 0;
|
||||
|
||||
console.log(`State: ${stateName} (${stateAbbr}) - Bills: ${billCount}`);
|
||||
|
||||
return {
|
||||
fillColor: getBillsColor(billCount),
|
||||
weight: 1,
|
||||
opacity: 1,
|
||||
color: '#666',
|
||||
fillOpacity: 0.5
|
||||
};
|
||||
},
|
||||
onEachFeature: function(feature, layer) {
|
||||
// Handle different property names in different GeoJSON sources
|
||||
const stateName = feature.properties.NAME || feature.properties.NAME_EN || feature.properties.name;
|
||||
const stateAbbr = stateAbbreviations[stateName];
|
||||
|
||||
console.log(`Setting up interactions for: ${stateName} (${stateAbbr})`);
|
||||
|
||||
// Store state info for later popup updates
|
||||
layer.stateName = stateName;
|
||||
layer.stateAbbr = stateAbbr;
|
||||
|
||||
layer.on({
|
||||
mouseover: function(e) {
|
||||
const layer = e.target;
|
||||
layer.setStyle({
|
||||
weight: 3,
|
||||
color: '#2c3e50',
|
||||
fillOpacity: 0.7
|
||||
});
|
||||
|
||||
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
||||
layer.bringToFront();
|
||||
}
|
||||
},
|
||||
mouseout: function(e) {
|
||||
geojsonLayer.resetStyle(e.target);
|
||||
},
|
||||
click: function(e) {
|
||||
console.log(`Clicked on state: ${stateName} (${stateAbbr})`);
|
||||
showStateBills(stateAbbr, stateName);
|
||||
highlightState(e.target);
|
||||
}
|
||||
});
|
||||
|
||||
// Initial popup setup - will be updated when data loads
|
||||
updateStatePopup(layer);
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
// Fit map bounds to show all US states including Alaska and Hawaii
|
||||
const bounds = geojsonLayer.getBounds();
|
||||
map.fitBounds(bounds, {
|
||||
padding: [10, 10],
|
||||
maxZoom: 5
|
||||
});
|
||||
|
||||
console.log('States added to map successfully');
|
||||
}
|
||||
|
||||
// Update popup for a state layer
|
||||
function updateStatePopup(layer) {
|
||||
const billCount = billsData[layer.stateAbbr] ? billsData[layer.stateAbbr].length : 0;
|
||||
layer.bindPopup(`<strong>${layer.stateName}</strong><br>${billCount} AI-related bills`);
|
||||
}
|
||||
|
||||
// Get color based on number of bills
|
||||
function getBillsColor(count) {
|
||||
return count > 40 ? '#800026' :
|
||||
count > 30 ? '#BD0026' :
|
||||
count > 20 ? '#E31A1C' :
|
||||
count > 15 ? '#FC4E2A' :
|
||||
count > 10 ? '#FD8D3C' :
|
||||
count > 5 ? '#FEB24C' :
|
||||
count > 0 ? '#FED976' :
|
||||
'#FFEDA0';
|
||||
}
|
||||
|
||||
// Highlight selected state
|
||||
function highlightState(layer) {
|
||||
// Reset all states
|
||||
geojsonLayer.eachLayer(function(l) {
|
||||
geojsonLayer.resetStyle(l);
|
||||
});
|
||||
|
||||
// Highlight selected state
|
||||
layer.setStyle({
|
||||
weight: 3,
|
||||
color: '#2c3e50',
|
||||
fillColor: '#3498db',
|
||||
fillOpacity: 0.8
|
||||
});
|
||||
}
|
||||
|
||||
// Load bills data from Google Sheets
|
||||
function loadBillsData() {
|
||||
if (!SHEET_URL) {
|
||||
document.getElementById('ai-bills-content').innerHTML =
|
||||
'<div class="loading">Please provide a sheet-url parameter</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Loading data from:', SHEET_URL);
|
||||
document.getElementById('ai-bills-content').innerHTML =
|
||||
'<div class="loading">Loading bills data...</div>';
|
||||
|
||||
Papa.parse(SHEET_URL, {
|
||||
download: true,
|
||||
header: true,
|
||||
skipEmptyLines: true,
|
||||
dynamicTyping: true,
|
||||
complete: function(results) {
|
||||
console.log('CSV loaded successfully');
|
||||
console.log('Total rows:', results.data.length);
|
||||
console.log('Headers:', results.meta.fields);
|
||||
console.log('First few rows:', results.data.slice(0, 3));
|
||||
|
||||
if (results.errors && results.errors.length > 0) {
|
||||
console.warn('CSV parsing errors:', results.errors);
|
||||
}
|
||||
|
||||
processBillsData(results.data);
|
||||
},
|
||||
error: function(error) {
|
||||
console.error('Error loading CSV:', error);
|
||||
document.getElementById('ai-bills-content').innerHTML =
|
||||
'<div class="loading">Error loading bills data: ' + error.message + '</div>';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Process and group bills data by state
|
||||
function processBillsData(data) {
|
||||
console.log('Processing bills data...');
|
||||
billsData = {};
|
||||
|
||||
data.forEach(function(row, index) {
|
||||
// Clean whitespace from keys
|
||||
const cleanRow = {};
|
||||
Object.keys(row).forEach(key => {
|
||||
cleanRow[key.trim()] = row[key];
|
||||
});
|
||||
|
||||
const state = cleanRow.state ? cleanRow.state.trim() : '';
|
||||
console.log(`Row ${index}: state = "${state}"`);
|
||||
|
||||
if (state) {
|
||||
if (!billsData[state]) {
|
||||
billsData[state] = [];
|
||||
}
|
||||
billsData[state].push({
|
||||
bill_number: cleanRow.bill_number || '',
|
||||
url: cleanRow.url || '',
|
||||
last_action_date: cleanRow.last_action_date || '',
|
||||
last_action: cleanRow.last_action || '',
|
||||
description: cleanRow.description || ''
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Processed bills data:', billsData);
|
||||
console.log('States found:', Object.keys(billsData));
|
||||
|
||||
// Update sidebar with summary
|
||||
const totalBills = Object.values(billsData).reduce((sum, bills) => sum + bills.length, 0);
|
||||
const stateCount = Object.keys(billsData).length;
|
||||
|
||||
document.getElementById('ai-bills-content').innerHTML = `
|
||||
<h3>AI Legislation Bills</h3>
|
||||
<div class="state-info">
|
||||
<p><strong>${totalBills}</strong> bills across <strong>${stateCount}</strong> states</p>
|
||||
<p>Click on a state to view AI-related bills.</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Update map colors and popups if states are already loaded
|
||||
if (geojsonLayer) {
|
||||
console.log('Updating map colors and popups...');
|
||||
geojsonLayer.eachLayer(function(layer) {
|
||||
const feature = layer.feature;
|
||||
const stateName = feature.properties.NAME || feature.properties.NAME_EN || feature.properties.name;
|
||||
const stateAbbr = stateAbbreviations[stateName];
|
||||
const billCount = billsData[stateAbbr] ? billsData[stateAbbr].length : 0;
|
||||
|
||||
// Update layer style
|
||||
layer.setStyle({
|
||||
fillColor: getBillsColor(billCount)
|
||||
});
|
||||
|
||||
// Update popup with correct bill count
|
||||
layer.bindPopup(`<strong>${stateName}</strong><br>${billCount} AI-related bills`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show bills for selected state
|
||||
function showStateBills(stateAbbr, stateName) {
|
||||
const bills = billsData[stateAbbr] || [];
|
||||
const sidebar = document.getElementById('ai-bills-content');
|
||||
|
||||
if (bills.length === 0) {
|
||||
sidebar.innerHTML = `
|
||||
<h3>${stateName} AI Bills</h3>
|
||||
<div class="state-info">
|
||||
<p>No AI-related bills found for ${stateName}.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<h3>${stateName} AI Bills</h3>
|
||||
<div class="state-info">
|
||||
<strong>${bills.length}</strong> AI-related bills found
|
||||
</div>
|
||||
`;
|
||||
|
||||
bills.forEach(function(bill) {
|
||||
html += `
|
||||
<div class="bill-item">
|
||||
<div class="bill-number">${bill.bill_number}</div>
|
||||
${bill.url ? `<a href="${bill.url}" target="_blank" class="bill-link">View Bill</a>` : ''}
|
||||
${bill.last_action_date ? `<div class="bill-date">Last Action: ${bill.last_action_date}</div>` : ''}
|
||||
${bill.last_action ? `<div class="bill-action">${bill.last_action}</div>` : ''}
|
||||
${bill.description ? `<div class="bill-description">${bill.description}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
sidebar.innerHTML = html;
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initMap);
|
||||
} else {
|
||||
initMap();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
515
layouts/shortcodes/ai-bills-map.html
Normal file
515
layouts/shortcodes/ai-bills-map.html
Normal file
@ -0,0 +1,515 @@
|
||||
{{/*
|
||||
Usage: {{< ai-bills-map sheet-url="YOUR_GOOGLE_SHEET_CSV_URL" >}}
|
||||
*/}}
|
||||
|
||||
{{ $sheetUrl := .Get "sheet-url" }}
|
||||
|
||||
<div id="ai-bills-container" style="height: 600px; position: relative; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
|
||||
<!-- Map Container -->
|
||||
<div id="ai-bills-map" style="height: 100%; width: 70%; float: left;"></div>
|
||||
|
||||
<!-- Sidebar Container -->
|
||||
<div id="ai-bills-sidebar" style="height: 100%; width: 30%; float: right; background: #f8f9fa; border-left: 1px solid #ddd; overflow-y: auto; padding: 15px; box-sizing: border-box;">
|
||||
<div id="ai-bills-content">
|
||||
<h3 style="margin-top: 0; color: #333; font-size: 1.2em;">AI Legislation Bills</h3>
|
||||
<p style="color: #666; margin-bottom: 20px;">Click on a state to view AI-related bills.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""/>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""></script>
|
||||
|
||||
<!-- Papa Parse for CSV processing -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
|
||||
|
||||
<style>
|
||||
#ai-bills-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.state-hover {
|
||||
fill-opacity: 0.7 !important;
|
||||
stroke: #2c3e50 !important;
|
||||
stroke-width: 2 !important;
|
||||
}
|
||||
|
||||
.state-selected {
|
||||
fill: #3498db !important;
|
||||
fill-opacity: 0.8 !important;
|
||||
stroke: #2c3e50 !important;
|
||||
stroke-width: 3 !important;
|
||||
}
|
||||
|
||||
#ai-bills-sidebar h3 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.bill-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.bill-number {
|
||||
font-weight: bold;
|
||||
color: #3498db;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.bill-date {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
background: #f8f9fa;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bill-action {
|
||||
color: #2c3e50;
|
||||
margin: 5px 0;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.bill-description {
|
||||
color: #555;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.4;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.bill-link {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bill-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.state-info {
|
||||
background: #ecf0f1;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#ai-bills-container {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#ai-bills-map, #ai-bills-sidebar {
|
||||
width: 100% !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
#ai-bills-map {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#ai-bills-sidebar {
|
||||
border-left: none !important;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const SHEET_URL = "{{ $sheetUrl }}";
|
||||
let map, billsData = {}, geojsonLayer;
|
||||
|
||||
// State name to abbreviation mapping
|
||||
const stateAbbreviations = {
|
||||
'Alabama': 'AL', 'Alaska': 'AK', 'Arizona': 'AZ', 'Arkansas': 'AR', 'California': 'CA',
|
||||
'Colorado': 'CO', 'Connecticut': 'CT', 'Delaware': 'DE', 'Florida': 'FL', 'Georgia': 'GA',
|
||||
'Hawaii': 'HI', 'Idaho': 'ID', 'Illinois': 'IL', 'Indiana': 'IN', 'Iowa': 'IA',
|
||||
'Kansas': 'KS', 'Kentucky': 'KY', 'Louisiana': 'LA', 'Maine': 'ME', 'Maryland': 'MD',
|
||||
'Massachusetts': 'MA', 'Michigan': 'MI', 'Minnesota': 'MN', 'Mississippi': 'MS', 'Missouri': 'MO',
|
||||
'Montana': 'MT', 'Nebraska': 'NE', 'Nevada': 'NV', 'New Hampshire': 'NH', 'New Jersey': 'NJ',
|
||||
'New Mexico': 'NM', 'New York': 'NY', 'North Carolina': 'NC', 'North Dakota': 'ND', 'Ohio': 'OH',
|
||||
'Oklahoma': 'OK', 'Oregon': 'OR', 'Pennsylvania': 'PA', 'Rhode Island': 'RI', 'South Carolina': 'SC',
|
||||
'South Dakota': 'SD', 'Tennessee': 'TN', 'Texas': 'TX', 'Utah': 'UT', 'Vermont': 'VT',
|
||||
'Virginia': 'VA', 'Washington': 'WA', 'West Virginia': 'WV', 'Wisconsin': 'WI', 'Wyoming': 'WY'
|
||||
};
|
||||
|
||||
// Initialize the map
|
||||
function initMap() {
|
||||
map = L.map('ai-bills-map', {
|
||||
center: [39.8283, -98.5795], // Center of US
|
||||
zoom: 4,
|
||||
zoomControl: true,
|
||||
scrollWheelZoom: true,
|
||||
// Restrict map bounds to show US including Alaska and Hawaii
|
||||
maxBounds: [
|
||||
[15, -180], // Southwest coordinates (includes Hawaii)
|
||||
[72, -60] // Northeast coordinates (includes Alaska)
|
||||
],
|
||||
maxBoundsViscosity: 1.0
|
||||
});
|
||||
|
||||
// Add tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
maxZoom: 18,
|
||||
minZoom: 3
|
||||
}).addTo(map);
|
||||
|
||||
loadUSStates();
|
||||
loadBillsData();
|
||||
}
|
||||
|
||||
// Load US states GeoJSON
|
||||
function loadUSStates() {
|
||||
console.log('Loading US states GeoJSON...');
|
||||
|
||||
// Use a reliable US states GeoJSON source
|
||||
fetch('https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json')
|
||||
.then(response => {
|
||||
console.log('GeoJSON response status:', response.status);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('US states GeoJSON loaded successfully');
|
||||
console.log('Number of states in GeoJSON:', data.features.length);
|
||||
console.log('Sample state names:', data.features.slice(0, 3).map(f => f.properties.NAME));
|
||||
addStatesToMap(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading US states from primary source:', error);
|
||||
// Fallback: try alternative GeoJSON source
|
||||
loadUSStatesAlternative();
|
||||
});
|
||||
}
|
||||
|
||||
// Alternative GeoJSON source for US states
|
||||
function loadUSStatesAlternative() {
|
||||
console.log('Trying alternative GeoJSON source...');
|
||||
|
||||
fetch('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Alternative GeoJSON loaded, filtering for US states...');
|
||||
// Filter for US states only
|
||||
const usStates = {
|
||||
type: 'FeatureCollection',
|
||||
features: data.features.filter(feature =>
|
||||
feature.properties.ISO_A2 === 'US' &&
|
||||
stateAbbreviations[feature.properties.NAME_EN]
|
||||
)
|
||||
};
|
||||
console.log('Filtered US states count:', usStates.features.length);
|
||||
addStatesToMap(usStates);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading alternative US states data:', error);
|
||||
// Last resort: create a simple fallback message
|
||||
document.getElementById('ai-bills-content').innerHTML +=
|
||||
'<div style="color: red; margin-top: 10px;">Error loading map data. State selection may not work.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
// Add states to map with interaction
|
||||
function addStatesToMap(geojsonData) {
|
||||
console.log('Adding states to map...');
|
||||
|
||||
geojsonLayer = L.geoJSON(geojsonData, {
|
||||
style: function(feature) {
|
||||
// Handle different property names in different GeoJSON sources
|
||||
const stateName = feature.properties.NAME || feature.properties.NAME_EN || feature.properties.name;
|
||||
const stateAbbr = stateAbbreviations[stateName];
|
||||
const billCount = billsData[stateAbbr] ? billsData[stateAbbr].length : 0;
|
||||
|
||||
console.log(`State: ${stateName} (${stateAbbr}) - Bills: ${billCount}`);
|
||||
|
||||
return {
|
||||
fillColor: getBillsColor(billCount),
|
||||
weight: 1,
|
||||
opacity: 1,
|
||||
color: '#666',
|
||||
fillOpacity: 0.5
|
||||
};
|
||||
},
|
||||
onEachFeature: function(feature, layer) {
|
||||
// Handle different property names in different GeoJSON sources
|
||||
const stateName = feature.properties.NAME || feature.properties.NAME_EN || feature.properties.name;
|
||||
const stateAbbr = stateAbbreviations[stateName];
|
||||
|
||||
console.log(`Setting up interactions for: ${stateName} (${stateAbbr})`);
|
||||
|
||||
// Store state info for later popup updates
|
||||
layer.stateName = stateName;
|
||||
layer.stateAbbr = stateAbbr;
|
||||
|
||||
layer.on({
|
||||
mouseover: function(e) {
|
||||
const layer = e.target;
|
||||
layer.setStyle({
|
||||
weight: 3,
|
||||
color: '#2c3e50',
|
||||
fillOpacity: 0.7
|
||||
});
|
||||
|
||||
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
||||
layer.bringToFront();
|
||||
}
|
||||
},
|
||||
mouseout: function(e) {
|
||||
geojsonLayer.resetStyle(e.target);
|
||||
},
|
||||
click: function(e) {
|
||||
console.log(`Clicked on state: ${stateName} (${stateAbbr})`);
|
||||
showStateBills(stateAbbr, stateName);
|
||||
highlightState(e.target);
|
||||
}
|
||||
});
|
||||
|
||||
// Initial popup setup - will be updated when data loads
|
||||
updateStatePopup(layer);
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
// Fit map bounds to show all US states including Alaska and Hawaii
|
||||
const bounds = geojsonLayer.getBounds();
|
||||
map.fitBounds(bounds, {
|
||||
padding: [10, 10],
|
||||
maxZoom: 5
|
||||
});
|
||||
|
||||
console.log('States added to map successfully');
|
||||
}
|
||||
|
||||
// Update popup for a state layer
|
||||
function updateStatePopup(layer) {
|
||||
const billCount = billsData[layer.stateAbbr] ? billsData[layer.stateAbbr].length : 0;
|
||||
layer.bindPopup(`<strong>${layer.stateName}</strong><br>${billCount} AI-related bills`);
|
||||
}
|
||||
|
||||
// Get color based on number of bills
|
||||
function getBillsColor(count) {
|
||||
return count > 40 ? '#800026' :
|
||||
count > 30 ? '#BD0026' :
|
||||
count > 20 ? '#E31A1C' :
|
||||
count > 15 ? '#FC4E2A' :
|
||||
count > 10 ? '#FD8D3C' :
|
||||
count > 5 ? '#FEB24C' :
|
||||
count > 0 ? '#FED976' :
|
||||
'#FFEDA0';
|
||||
}
|
||||
|
||||
// Highlight selected state
|
||||
function highlightState(layer) {
|
||||
// Reset all states
|
||||
geojsonLayer.eachLayer(function(l) {
|
||||
geojsonLayer.resetStyle(l);
|
||||
});
|
||||
|
||||
// Highlight selected state
|
||||
layer.setStyle({
|
||||
weight: 3,
|
||||
color: '#2c3e50',
|
||||
fillColor: '#3498db',
|
||||
fillOpacity: 0.8
|
||||
});
|
||||
}
|
||||
|
||||
// Load bills data from Google Sheets
|
||||
function loadBillsData() {
|
||||
if (!SHEET_URL) {
|
||||
document.getElementById('ai-bills-content').innerHTML =
|
||||
'<div class="loading">Please provide a sheet-url parameter</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Loading data from:', SHEET_URL);
|
||||
document.getElementById('ai-bills-content').innerHTML =
|
||||
'<div class="loading">Loading bills data...</div>';
|
||||
|
||||
Papa.parse(SHEET_URL, {
|
||||
download: true,
|
||||
header: true,
|
||||
skipEmptyLines: true,
|
||||
dynamicTyping: true,
|
||||
complete: function(results) {
|
||||
console.log('CSV loaded successfully');
|
||||
console.log('Total rows:', results.data.length);
|
||||
console.log('Headers:', results.meta.fields);
|
||||
console.log('First few rows:', results.data.slice(0, 3));
|
||||
|
||||
if (results.errors && results.errors.length > 0) {
|
||||
console.warn('CSV parsing errors:', results.errors);
|
||||
}
|
||||
|
||||
processBillsData(results.data);
|
||||
},
|
||||
error: function(error) {
|
||||
console.error('Error loading CSV:', error);
|
||||
document.getElementById('ai-bills-content').innerHTML =
|
||||
'<div class="loading">Error loading bills data: ' + error.message + '</div>';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Process and group bills data by state
|
||||
function processBillsData(data) {
|
||||
console.log('Processing bills data...');
|
||||
billsData = {};
|
||||
|
||||
data.forEach(function(row, index) {
|
||||
// Clean whitespace from keys
|
||||
const cleanRow = {};
|
||||
Object.keys(row).forEach(key => {
|
||||
cleanRow[key.trim()] = row[key];
|
||||
});
|
||||
|
||||
const state = cleanRow.state ? cleanRow.state.trim() : '';
|
||||
console.log(`Row ${index}: state = "${state}"`);
|
||||
|
||||
if (state) {
|
||||
if (!billsData[state]) {
|
||||
billsData[state] = [];
|
||||
}
|
||||
billsData[state].push({
|
||||
bill_number: cleanRow.bill_number || '',
|
||||
url: cleanRow.url || '',
|
||||
last_action_date: cleanRow.last_action_date || '',
|
||||
last_action: cleanRow.last_action || '',
|
||||
description: cleanRow.description || ''
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Processed bills data:', billsData);
|
||||
console.log('States found:', Object.keys(billsData));
|
||||
|
||||
// Update sidebar with summary
|
||||
const totalBills = Object.values(billsData).reduce((sum, bills) => sum + bills.length, 0);
|
||||
const stateCount = Object.keys(billsData).length;
|
||||
|
||||
document.getElementById('ai-bills-content').innerHTML = `
|
||||
<h3>AI Legislation Bills</h3>
|
||||
<div class="state-info">
|
||||
<p><strong>${totalBills}</strong> bills across <strong>${stateCount}</strong> states</p>
|
||||
<p>Click on a state to view AI-related bills.</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Update map colors and popups if states are already loaded
|
||||
if (geojsonLayer) {
|
||||
console.log('Updating map colors and popups...');
|
||||
geojsonLayer.eachLayer(function(layer) {
|
||||
const feature = layer.feature;
|
||||
const stateName = feature.properties.NAME || feature.properties.NAME_EN || feature.properties.name;
|
||||
const stateAbbr = stateAbbreviations[stateName];
|
||||
const billCount = billsData[stateAbbr] ? billsData[stateAbbr].length : 0;
|
||||
|
||||
// Update layer style
|
||||
layer.setStyle({
|
||||
fillColor: getBillsColor(billCount)
|
||||
});
|
||||
|
||||
// Update popup with correct bill count
|
||||
layer.bindPopup(`<strong>${stateName}</strong><br>${billCount} AI-related bills`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show bills for selected state
|
||||
function showStateBills(stateAbbr, stateName) {
|
||||
const bills = billsData[stateAbbr] || [];
|
||||
const sidebar = document.getElementById('ai-bills-content');
|
||||
|
||||
if (bills.length === 0) {
|
||||
sidebar.innerHTML = `
|
||||
<h3>${stateName} AI Bills</h3>
|
||||
<div class="state-info">
|
||||
<p>No AI-related bills found for ${stateName}.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Sort bills by last action date (most recent first)
|
||||
const sortedBills = bills.slice().sort(function(a, b) {
|
||||
const dateA = a.last_action_date ? new Date(a.last_action_date) : new Date('1900-01-01');
|
||||
const dateB = b.last_action_date ? new Date(b.last_action_date) : new Date('1900-01-01');
|
||||
return dateB - dateA; // Descending order (newest first)
|
||||
});
|
||||
|
||||
let html = `
|
||||
<h3>${stateName} AI Bills</h3>
|
||||
<div class="state-info">
|
||||
<strong>${bills.length}</strong> AI-related bills found
|
||||
<div style="font-size: 0.85em; color: #666; margin-top: 5px;">Sorted by latest action date</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
sortedBills.forEach(function(bill) {
|
||||
// Format the date nicely
|
||||
let formattedDate = '';
|
||||
if (bill.last_action_date) {
|
||||
try {
|
||||
const date = new Date(bill.last_action_date);
|
||||
formattedDate = date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
} catch (e) {
|
||||
formattedDate = bill.last_action_date;
|
||||
}
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="bill-item">
|
||||
<div class="bill-number">${bill.bill_number}</div>
|
||||
${formattedDate ? `<div class="bill-date">Last Action: ${formattedDate}</div>` : ''}
|
||||
${bill.url ? `<div class="bill-link-container"><a href="${bill.url}" target="_blank" class="bill-link">View Bill</a></div>` : ''}
|
||||
${bill.last_action ? `<div class="bill-action">${bill.last_action}</div>` : ''}
|
||||
${bill.description ? `<div class="bill-description">${bill.description}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
sidebar.innerHTML = html;
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initMap);
|
||||
} else {
|
||||
initMap();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
7646
static/statemap/statemap_data.json
Normal file
7646
static/statemap/statemap_data.json
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user