Skip to content

Commit

Permalink
Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@BerkeArgin
BerkeArgin committed May 26, 2024
1 parent 2d6fa3b commit 850abff
Show file tree
Hide file tree
Showing 6 changed files with 816 additions and 47 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

.DS_Store
docs/data/data_generation.ipynb
milestone1/*
2 changes: 1 addition & 1 deletion docs/data/world-administrative-boundaries-filtered.geojson
View file

Large diffs are not rendered by default.

195 changes: 164 additions & 31 deletions docs/static/country.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
let map; // Declare a variable to hold the map instance.
let currentTileLayer; // Declare a variable to hold the current tile layer, allowing easy changes later.


function initializeMap() {
// Initialize the Leaflet map on the 'map' div, set the view to the predefined center and zoom level
map = L.map('map', { zoomControl: false }).setView(MAP_CENTER, MAP_ZOOM_LEVEL);
Expand All @@ -77,13 +78,82 @@
// Return the map object for possible further manipulation outside this function
return map;
}



let geojson; // Hold your GeoJSON layer globally
let currentLayer; // Track the currently selected layer for style resetting

function setBorders(map) {
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

d3.json('/project-2024-datatouille/data/world-administrative-boundaries-filtered.geojson').then(function(data) {
geojson = L.geoJSON(data, {
onEachFeature: function(feature, layer) {
layer.on({
mouseover: function(e) {
var layer = e.target;
if (currentLayer === layer) return;
layer.setStyle({
weight: 3,
color: '#954a4a',
fillOpacity: 0.4
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
},
mouseout: function(e) {
if (currentLayer === e.target) return;
geojson.resetStyle(e.target);
},
click: function(e) {
if (currentLayer) {
geojson.resetStyle(currentLayer);
}
if (currentLayer == layer) {
currentLayer = null;
currentEntity = "all";
document.querySelector('.container').style.display = 'none';
document.getElementById('country-name').innerHTML = '';
map.setView(MAP_CENTER, MAP_ZOOM_LEVEL);
collapseFilterPanel();
return;
}
currentLayer = layer;
layer.setStyle({
weight: 3,
color: '#A63030',
fillOpacity: 0.7
});
currentEntity = feature.properties.name;
updateCountryData(currentEntity);
document.querySelector('.container').style.display = 'block';
var bounds = layer.getBounds();
map.fitBounds(bounds);
uncollapseFilterPanel();
}
});
},
style: function(feature) {
return {
color: 'grey',
weight: 1,
fillOpacity: 0.1
};
}
}).addTo(map);
}).catch(function(error) {
console.error('Error loading GeoJSON:', error);
});
}


function setBorders2(map) {
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

d3.json('/project-2024-datatouille/data/world-administrative-boundaries-filtered.geojson').then(function(data) {
L.geoJSON(data, {
onEachFeature: function(feature, layer) {
Expand Down Expand Up @@ -120,7 +190,7 @@
}


function setBorders2(map) {
function setBorders3(map) {
// Add a tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
Expand Down Expand Up @@ -213,30 +283,6 @@
});
}

function updateMapCenter() {
if (currentFilters.city && currentFilters.city in cityCoordinates) {
// Zoom closer for city
map.setView(cityCoordinates[currentFilters.city], 11);
} else if (currentFilters.country && countryDetails[currentFilters.country]) {
// Country level zoom
map.setView(countryDetails[currentFilters.country].coords, countryDetails[currentFilters.country].zoom);
} else if (currentFilters.continents && currentFilters.continents.length === 1 && continentCoordinates[currentFilters.continents[0]]) {
// Continent level zoom
map.setView(continentCoordinates[currentFilters.continents[0]].coords, continentCoordinates[currentFilters.continents[0]].zoom);
} else if (currentFilters.continents && currentFilters.continents.length > 1) {
// More general view for multiple continents
map.setView([0, 0], 3); // World view
} else if ( currentFilters.awards || currentFilters.priceRange || currentFilters.ambiance || currentFilters.cuisine) {
// More general view for multiple continents
return;
} else {
// Default view
map.setView(MAP_CENTER, MAP_ZOOM_LEVEL);
}
}



function projectPoint(x, y) {
return map.latLngToLayerPoint(new L.LatLng(y, x));
}
Expand Down Expand Up @@ -267,6 +313,19 @@
map.invalidateSize(); // Ensure the map adjusts to new dimensions
}
}
function collapseFilterPanel() {
const panel = document.getElementById('filter-panel');
const mapArea = document.getElementById('map');
const panelWidth = '500px'; // Set the panel width

if (!panel.classList.contains('collapsed')) {
panel.style.right = `-${panelWidth}`;
mapArea.style.width = '100%';
document.getElementById('toggle-filter-button').style.right = '0';
panel.classList.add('collapsed');
map.invalidateSize(); // Update map size as panel hides
}
}

function toggleFilterPanel() {
const panel = document.getElementById('filter-panel');
Expand Down Expand Up @@ -522,12 +581,26 @@ function facilities(country) {

// Load the facilities data from the JSON file
d3.json("../data/facilities.json").then(function(allFacilities) {
// Get data for the specific country or default to an empty object if not found
const facData = allFacilities[country] || {};

// Convert object to array of entries and sort by value in descending order
let entries = Object.entries(facData);
entries = entries.sort((a, b) => b[1] - a[1]);

// Slice to keep only the top 10 entries if more than 10 exist
if (entries.length > 10) {
entries = entries.slice(0, 10);
}

// Reconstruct facData from the adjusted entries
let adjustedFacData = {};
entries.forEach(([key, value]) => {
adjustedFacData[key] = value;
});

// Set up the axes using the loaded data
setupHorizontalChartAxes(svg, facData, width, height);
addHorizontalChartBars(svg, facData, width, height);
setupHorizontalChartAxes(svg, adjustedFacData, width, height);
addHorizontalChartBars(svg, adjustedFacData, width, height);
adjustContainerSizes(); // Ensure container sizes are adjusted after chart creation
svg.selectAll(".axis--y text")
.style("font-size", "5px"); // Adjust the font size as needed
Expand All @@ -536,7 +609,6 @@ function facilities(country) {
});
}


function setupVerticalChartAxes(svg, data, width, height) {
const x = d3.scaleBand()
.range([0, width])
Expand Down Expand Up @@ -743,3 +815,64 @@ function createPriceDistributionPlots(country) {
console.error('Error fetching price data:', error);
});
}

//COUNTRY
// Extracting all country names as an array
const predefinedCountries = Object.keys(countryDetails);

document.getElementById('country-input').addEventListener('input', function() {
const input = this.value;
const countryList = document.getElementById('country-list');
countryList.innerHTML = ''; // Clear existing suggestions

if (input.length > 0) {
const filteredCountries = predefinedCountries.filter(country =>
country.toLowerCase().includes(input.toLowerCase())
);

filteredCountries.forEach(function(country) {
const div = document.createElement('div');
div.textContent = country;
div.className = 'suggestion-item';
div.onclick = function() {
form = document.getElementById('country-input')
form.value = country;
form.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' }));
countryList.innerHTML = ''; // Clear suggestions after selection
};
countryList.appendChild(div);
});
}
});

function addSelectedCountry(country) {
const container = document.getElementById('country-input');
const chip = document.createElement('div');
chip.className = 'country-chip';

const textSpan = document.createElement('span');
textSpan.textContent = country;
textSpan.className = 'country-text'; // A specific class for the text part

const closeBtn = document.createElement('span');
closeBtn.textContent = '×';
closeBtn.className = 'close-btn';
closeBtn.onclick = function() {
container.removeChild(chip);
};

chip.appendChild(textSpan);
chip.appendChild(closeBtn);
container.appendChild(chip);
}

// Hide suggestions when clicking outside
document.addEventListener('click', function(event) {
const countryInput = document.getElementById('country-input');
const countryList = document.getElementById('country-list');
if (!countryInput.contains(event.target)) {
countryList.innerHTML = '';
}
});

// COUNTRY
2 changes: 2 additions & 0 deletions docs/static/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -741,3 +741,5 @@ function applyFilters(data, filters) {
return true;
});
}


80 changes: 75 additions & 5 deletions docs/templates/country.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,74 @@
<script src="https://unpkg.com/leaflet.pattern"></script>

<style>
.autocomplete-dropdown {
list-style: none;
padding: 0;
margin: 0;
background: white;
border: 1px solid #ccc;
border-top: none;
position: absolute;
width: calc(100% - 2px); /* adjust width as per your input field */
max-height: 150px;
overflow-y: auto;
display: none; /* Hidden by default */
}

.autocomplete-dropdown li {
padding: 8px;
cursor: pointer;
}

.autocomplete-dropdown li:hover {
background-color: #f0f0f0;
}

.selected-countries {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}

.country-chip {
background-color:rgb(166, 48, 48); /* Red background */
color: white; /* White text */
padding: 5px 10px;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 5px;
display: inline-flex;
align-items: center;
}

.close-btn {
margin-left: 8px;
cursor: pointer;
display: inline-block;
padding: 0 4px;
}

.suggestions-list {
border: 1px solid #ccc;
border-top: none;
position: absolute;
z-index: 1000;
width: calc(100% - 2px);
background: white;
max-height: 200px;
overflow-y: auto;
}

.suggestion-item {
padding: 8px;
cursor: pointer;
text-align: left;
}

.suggestion-item:hover {
background-color: #f0f0f0;
}

.styled-table {
width: 100%;
border-collapse: collapse;
Expand Down Expand Up @@ -112,15 +180,15 @@
position: fixed;
right: 0;
top: 100px;
width: 500px;
width: 550px;
background-color: #fff;
padding: 20px;
border-left: 1px solid #ceabab;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
height: calc(100% - 100px);
transition: right 0.3s;
overflow-y: auto;
right: -500px; /* Start off-screen */
right: -550px; /* Start off-screen */
}
.toggle-button {
position: fixed;
Expand Down Expand Up @@ -164,12 +232,14 @@

<!-- Toggle Button for Filter Panel -->
<button id="toggle-filter-button" class="btn btn-info toggle-button"> Panel </button>

<!-- Move chart containers here -->

<div id="filter-panel" class="filter-panel collapsed">
<div class="filter-section">
<label for="country-input">Country:</label>
<input type="text" id="country-input" placeholder="Search country">
<input type="text" id="country-input" placeholder="Search country" style="width: 450px;" autocomplete="on">
<div id="country-list" class="suggestions-list"></div>
</div>
<div style="padding: 20px;"></div>
<!-- Move chart containers here -->
<div id="country-name" class="country-name-title"></div>
<div class="container">
Expand Down
Loading

0 comments on commit 850abff

Please sign in to comment.