301 Moved Permanently

nginx
; var cityData = totalCityData?.cities || []; var polygonData = totalCityData?.cityPolygons || []; // Debug info about data console.log('Cities count:', cityData.length); console.log('Polygons count:', polygonData.length); // Map instance var cityMap = null; // Function to open the map popup function openMapPopup() { popup.style.display = 'block'; // Initialize map if not already done if (!cityMap) { initMap(); } else { // Force a redraw of the map since it might not render correctly in hidden elements setTimeout(function() { cityMap.invalidateSize(); // Center on selected cities if any centerMapOnSelection(); }, 10); } } // Function to show search results function showSearchResults(query) { // Filter cities based on query query = query.toLowerCase(); var results = []; var addedCityIds = {}; // Track which cities we've already added // First check parent cities cityData.forEach(function(city) { var cityAdded = false; // Check if the parent city matches the query if ((city.descNL && city.descNL.toLowerCase().includes(query)) || (city.zip && city.zip.includes(query))) { // Only add parent city if we haven't already if (!addedCityIds[city.id]) { results.push({ type: 'parent', city: city }); addedCityIds[city.id] = true; cityAdded = true; } } // Check child cities (even if parent was already added) if (city.childCities && city.childCities.length > 0) { city.childCities.forEach(function(childCity) { if ((childCity.descNL && childCity.descNL.toLowerCase().includes(query)) || (childCity.zip && childCity.zip.includes(query))) { // If parent city wasn't already added due to its own match if (!cityAdded && !addedCityIds[city.id]) { results.push({ type: 'child', city: city, childCity: childCity }); addedCityIds[city.id] = true; } } }); } }); // Show maximum 10 results results = results.slice(0, 10); // Clear existing results searchDropdown.innerHTML = ''; if (results.length > 0) { // Create results HTML var resultsHtml = '
'; results.forEach(function(result) { if (result.type === 'parent') { // Parent city result resultsHtml += '
'; resultsHtml += result.city.descNL + ' (' + result.city.zip + ')'; // Add child cities info if they exist if (result.city.childCities && result.city.childCities.length > 0) { resultsHtml += '
Including '; resultsHtml += result.city.childCities.map(function(child) { return child.descNL; }).join(', '); resultsHtml += '
'; } resultsHtml += '
'; } else if (result.type === 'child') { // Child city result - include parent info but still store parent ID resultsHtml += '
'; resultsHtml += '' + result.childCity.descNL + ' (' + result.childCity.zip + ')'; resultsHtml += '
in ' + result.city.descNL + '
'; resultsHtml += '
'; } }); resultsHtml += '
'; searchDropdown.innerHTML = resultsHtml; searchDropdown.style.display = 'block'; // Add click event listeners to search results document.querySelectorAll('.city-search-item').forEach(function(item) { item.addEventListener('click', function() { var cityId = parseInt(this.getAttribute('data-city-id')); var childCityId = this.getAttribute('data-child-city-id'); var childCityZip = this.getAttribute('data-child-city-zip'); var childCityDesc = this.getAttribute('data-child-city-desc'); var city; if (childCityId) { // If it's a child city, create a new city object with the child city's data city = { id: parseInt(childCityId), descNL: childCityDesc, zip: childCityZip }; } else { // For parent cities, find the city as before city = cityData.find(function(c) { return c.id === cityId; }); } if (city) { // Hide dropdown searchDropdown.style.display = 'none'; // Clear input value searchInput.value = ''; // Add city to selection if not already selected var index = selectedCities.findIndex(function(c) { return c.id === city.id; }); if (index === -1) { toggleCitySelection(city); // Center map on this city and highlight it if map is open if (cityMap && cityPolygons[city.id]) { var cityRef = cityPolygons[city.id]; if (cityRef.type === 'polygon') { // For polygons, zoom to the polygon bounds cityMap.fitBounds(cityRef.element.getBounds()); } else if (cityRef.type === 'marker' && city.cp && city.cp.length >= 2) { // For markers, center on the marker cityMap.setView([city.cp[0], city.cp[1]], 12); } } } } }); }); } else { searchDropdown.style.display = 'none'; } } // Function to attach event listeners to search input function attachSearchInputListeners() { if (searchInput) { // Add input event listener searchInput.addEventListener('input', function() { var query = this.value.trim(); if (query.length >= 2) { showSearchResults(query); } else { searchDropdown.style.display = 'none'; } }); // Focus/blur events to show/hide placeholder searchInput.addEventListener('focus', function() { var placeholder = selectedInputContainer.querySelector('.search-placeholder'); if (placeholder) { placeholder.style.display = 'none'; } }); searchInput.addEventListener('blur', function() { var placeholder = selectedInputContainer.querySelector('.search-placeholder'); if (placeholder && !this.value.trim() && selectedCities.length === 0) { placeholder.style.display = 'inline-block'; } }); // Close dropdown when clicking outside document.addEventListener('click', function(e) { if (e.target !== searchInput && e.target !== searchDropdown) { searchDropdown.style.display = 'none'; } }); // Prevent dropdown from closing when clicking inside it if (searchDropdown) { searchDropdown.addEventListener('click', function(e) { e.stopPropagation(); }); } } } // Add event listener to the Select on Map button if (mapBtn) { mapBtn.addEventListener('click', function() { openMapPopup(); }); } // Add event listener to the button if it exists if (openBtn) { openBtn.addEventListener('click', function() { openMapPopup(); }); } // Add event listener to external trigger if it exists if (externalTrigger) { externalTrigger.addEventListener('click', function() { openMapPopup(); }); } // Close popup closeBtn.addEventListener('click', function() { popup.style.display = 'none'; }); // Apply selection applyBtn.addEventListener('click', function(event) { event.preventDefault(); popup.style.display = 'none'; console.log('Selected cities:', selectedCities); // Update hidden input with ZIP codes updateHiddenInput(); // Update the input field display updateSelectedCitiesDisplay(); // Trigger an event for other scripts that might need to know about the selection var event = new CustomEvent('citiesSelected', { detail: { cities: selectedCities, container: containerId } }); document.dispatchEvent(event); }); // Helper function to find city by ID function findCityById(cityId) { return cityData.find(function(city) { return city.id === cityId; }); } // Function to update hidden input with ZIP codes function updateHiddenInput() { var cityZips = selectedCities.map(function(city) { return city.zip; }); selectedCityIdsInput.value = cityZips.join(','); } // Initialize map function initMap() { // Center on Belgium cityMap = L.map(mapId).setView([50.85, 4.35], 8); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(cityMap); // First add markers for all cities (these will be visible if polygons fail to load) cityData.forEach(function(city) { if (city.id && city.descNL && city.cp && city.cp.length >= 2) { var lat = city.cp[0]; var lng = city.cp[1]; // Create a popup with city information var popupContent = '' + city.descNL + ' (' + city.zip + ')'; if (city.childCities && city.childCities.length > 0) { popupContent += '
Including:'; popupContent += ''; } popupContent += ''; // Check if this city is already selected var isSelected = selectedCities.some(function(c) { return c.id === city.id; }); var marker = L.marker([lat, lng]).addTo(cityMap); // Use green marker for selected cities if (isSelected) { marker.setIcon(L.icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] })); } // Store the marker reference cityPolygons[city.id] = { type: 'marker', element: marker, city: city }; marker.on('click', function() { toggleCitySelection(city); }); marker.on('popupopen', function() { // Add click event to the select button in the popup setTimeout(function() { var selectBtn = document.querySelector('.select-city-btn[data-city-id="' + city.id + '"]'); if (selectBtn) { selectBtn.addEventListener('click', function() { toggleCitySelection(city); marker.closePopup(); }); } }, 100); }); } }); // Now add polygons for each city from the polygonData polygonData.forEach(function(polygonItem) { if (polygonItem.id && polygonItem.p) { var cityId = polygonItem.id; var city = findCityById(cityId); if (!city) { console.warn('City not found for polygon ID: ' + cityId); return; } try { // Parse the polygon data - format is lon1,lat1 lon2,lat2 lon3,lat3 ... var polygonPoints = []; var polygonCoords = polygonItem.p.split(' '); for (var i = 0; i < polygonCoords.length; i++) { var coordPair = polygonCoords[i].split(','); if (coordPair.length === 2) { var lon = parseFloat(coordPair[0]); var lat = parseFloat(coordPair[1]); if (!isNaN(lat) && !isNaN(lon)) { // The format is lon,lat so we need to reverse it for Leaflet which expects [lat, lon] polygonPoints.push([lat, lon]); } } } if (polygonPoints.length > 0) { // Log for debugging if (city.id <= 5) { console.log('City ' + city.descNL + ' points:', polygonPoints.slice(0, 3)); } // Create a popup with city information var popupContent = '' + city.descNL + ' (' + city.zip + ')'; if (city.childCities && city.childCities.length > 0) { popupContent += '
Including:'; popupContent += ''; } popupContent += ''; // Create the polygon var polygon = L.polygon(polygonPoints, { className: 'city-polygon', interactive: true }).addTo(cityMap); // Add popup to the polygon //polygon.bindPopup(popupContent); // Replace the marker with the polygon in our reference if (cityPolygons[cityId]) { // Remove the marker since we have a polygon now cityMap.removeLayer(cityPolygons[cityId].element); } // Store the polygon reference cityPolygons[cityId] = { type: 'polygon', element: polygon, city: city }; // Check if this city is already selected and apply highlighting var isSelected = selectedCities.some(function(c) { return c.id === city.id; }); if (isSelected) { polygon.getElement().classList.add('selected'); } // Add click event to the polygon polygon.on('click', function() { toggleCitySelection(city); }); // Handle popup open polygon.on('popupopen', function() { setTimeout(function() { var selectBtn = document.querySelector('.select-city-btn[data-city-id="' + city.id + '"]'); if (selectBtn) { selectBtn.addEventListener('click', function() { toggleCitySelection(city); polygon.closePopup(); }); } }, 100); }); } } catch (e) { console.error('Error parsing polygon for city ' + city.descNL + ':', e); } } }); // Fit the map to show all cities in Belgium cityMap.setView([50.85, 4.35], 8); // Trigger event that map is initialized document.dispatchEvent(new CustomEvent('mapInitialized', { detail: { mapId: mapId, container: containerId } })); } // Toggle city selection function toggleCitySelection(city) { var index = selectedCities.findIndex(function(c) { return c.id === city.id; }); if (index === -1) { // Add city selectedCities.push(city); // Highlight the marker or polygon if (cityPolygons[city.id]) { var cityRef = cityPolygons[city.id]; if (cityRef.type === 'polygon') { // For polygons, add the selected class cityRef.element.getElement().classList.add('selected'); } else if (cityRef.type === 'marker') { // For markers, change the icon cityRef.element.setIcon(L.icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] })); } } } else { // Remove city selectedCities.splice(index, 1); // Reset marker or polygon style if (cityPolygons[city.id]) { var cityRef = cityPolygons[city.id]; if (cityRef.type === 'polygon') { // For polygons, remove the selected class cityRef.element.getElement().classList.remove('selected'); } else if (cityRef.type === 'marker') { // For markers, reset the icon cityRef.element.setIcon(L.icon({ iconUrl: 'https://raw.githubusercontent.com/Leaflet/Leaflet/main/dist/images/marker-icon.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] })); } } } // Update selected cities display updateSelectedCitiesDisplay(); // Update hidden input with ZIP codes updateHiddenInput(); } // Update the display of selected cities function updateSelectedCitiesDisplay() { // Update the popup display if (selectedCities.length === 0) { selectedCitiesContainer.innerHTML = 'Geseleceerde steden zullen hier verschijnen'; } else { var html = ''; selectedCities.forEach(function(city) { html += '' + city.descNL + ' (' + city.zip + ')'; html += '×'; }); selectedCitiesContainer.innerHTML = html; // Add click events to remove buttons document.querySelectorAll('#' + selectedId + ' .city-tag .remove').forEach(function(removeBtn) { removeBtn.addEventListener('click', function() { var cityId = parseInt(this.getAttribute('data-city-id')); var city; // First try to find it in the top-level cities city = cityData.find(function(c) { return c.id === cityId; }); // If not found, search in child cities if (!city) { cityData.some(function(parentCity) { if (parentCity.childCities) { var childCity = parentCity.childCities.find(function(child) { return child.id === cityId; }); if (childCity) { city = childCity; return true; // Stop searching } } return false; }); } if (city) { toggleCitySelection(city); } }); }); } // Update the input field display if (selectedInputContainer) { if (selectedCities.length === 0) { // Show placeholder if no cities selected selectedInputContainer.innerHTML = '
' + 'GEMEENTE, ADRES, REFERENTIE,...' + '
' + '' + '
'; // Re-assign the searchInput and searchDropdown variables since we recreated them searchInput = document.getElementById(searchInputId); searchDropdown = document.getElementById(searchDropdownId); // Attach event listeners to the new elements attachSearchInputListeners(); } else { // Create HTML for selected cities var html = ''; selectedCities.forEach(function(city) { html += '' + city.descNL + ' (' + city.zip + ')'; html += '×'; }); // Add search input at the end html += ''; html += '
'; selectedInputContainer.innerHTML = html; // Re-assign the searchInput and searchDropdown variables since we recreated them searchInput = document.getElementById(searchInputId); searchDropdown = document.getElementById(searchDropdownId); // Attach event listeners to the new elements attachSearchInputListeners(); // Add click events to remove buttons document.querySelectorAll('#' + selectedInputId + ' .city-tag .remove').forEach(function(removeBtn) { removeBtn.addEventListener('click', function() { var cityId = parseInt(this.getAttribute('data-city-id')); var city = cityData.find(function(c) { return c.id === cityId; }); if (city) { toggleCitySelection(city); } }); }); } } } // Close the popup when clicking outside the content window.addEventListener('click', function(event) { if (event.target === popup) { popup.style.display = 'none'; } }); // Expose open function globally for external access if needed window.openMapCitySelector = function() { openMapPopup(); }; // Load any pre-selected cities (if a value exists in the URL query or hidden input) function loadPreselectedCities() { // Get pre-selected city ZIP codes from hidden input var preselectedZips = []; if (selectedCityIdsInput && selectedCityIdsInput.value) { preselectedZips = selectedCityIdsInput.value.split(',').map(function(zip) { return zip.trim(); }); } if (preselectedZips.length > 0) { preselectedZips.forEach(function(zip) { // Find cities with this ZIP code var citiesWithZip = cityData.filter(function(city) { return city.zip === zip; }); if (citiesWithZip.length > 0) { // Add first city with matching ZIP code to selected cities var alreadySelected = selectedCities.some(function(city) { return city.id === citiesWithZip[0].id; }); if (!alreadySelected) { selectedCities.push(citiesWithZip[0]); // Update map display for this city if the map is initialized if (cityMap && cityPolygons[citiesWithZip[0].id]) { var cityRef = cityPolygons[citiesWithZip[0].id]; if (cityRef.type === 'polygon') { cityRef.element.getElement().classList.add('selected'); } else if (cityRef.type === 'marker') { cityRef.element.setIcon(L.icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] })); } } } } }); // Update display and search input updateSelectedCitiesDisplay(); } } // Load pre-selected cities on page load loadPreselectedCities(); // Attach search input listeners attachSearchInputListeners(); // Function to center map on selected cities (if any) function centerMapOnSelection() { if (cityMap && selectedCities.length > 0) { // If we have more than one city selected, create bounds to fit them all if (selectedCities.length > 1) { var bounds = L.latLngBounds(); var validCitiesForBounds = 0; selectedCities.forEach(function(city) { if (cityPolygons[city.id]) { var cityRef = cityPolygons[city.id]; if (cityRef.type === 'polygon') { // For polygons, extend bounds with polygon bounds bounds.extend(cityRef.element.getBounds()); validCitiesForBounds++; } else if (cityRef.type === 'marker' && city.cp && city.cp.length >= 2) { // For markers, extend bounds with marker position bounds.extend([city.cp[0], city.cp[1]]); validCitiesForBounds++; } } }); if (validCitiesForBounds > 0) { cityMap.fitBounds(bounds, { padding: [50, 50] }); } } else { // Just one city, center on it var city = selectedCities[0]; if (cityPolygons[city.id]) { var cityRef = cityPolygons[city.id]; if (cityRef.type === 'polygon') { // For polygons, fit bounds cityMap.fitBounds(cityRef.element.getBounds()); } else if (cityRef.type === 'marker' && city.cp && city.cp.length >= 2) { // For markers, center on marker cityMap.setView([city.cp[0], city.cp[1]], 12); } } } } } // Add event listener for when map is initialized or made visible document.addEventListener('mapInitialized', function() { centerMapOnSelection(); }); });

Welkom in onze regio!

Gratis schatting (*)
Te koop
Verkopen
Nieuwbouw
Te huur
Verhuren
Beheer

(*) bij intentie tot verkoop van uw goed . Niet van toepassing voor schattingen voor erfenis, schenking, scheiding of verdeling tussen partijen of ondernemingen.

HOU ME OP DE HOOGTE VAN NIEUWE PANDEN
KLIK HIER




ZOEKEN

Vind je droomwoning!

GEMEENTE, ADRES, REFERENTIE,...
×

Zoekregio

Geseleceerde steden zullen hier verschijnen

TEAM

OLIVIER DEGREEF

vastgoedmakelaar – bemiddelaar
BIV 500.739

FILIP DERKINDEREN

vastgoedmakelaar – bemiddelaar
BIV 500.295

ANJA GOOSSENS

vastgoedmakelaar – bemiddelaar
BIV 503.191

KAREL LUYCKFASSEEL

vastgoedmakelaar – bemiddelaar
BIV 512.565

PASCAL VANDERCAMMEN

vastgoedmakelaar – bemiddelaar
BIV 505.240

LOTTE BRANCKAERT

vastgoedmakelaar – bemiddelaar
BIV 514.711

SARAH MORIAU

administratief medewerker

ALEXIS VERMEIREN

vastgoedmakelaar – bemiddelaar
BIV 515.515

SIEBE GOOVAERTS

vastgoedmakelaar – bemiddelaar
BIV 516.117

CHRISTOPHE DE STOOP

vastgoedmakelaar – bemiddelaar
BIV 518.369

QUENTIN MONSIEUR

stagiair – vastgoedmakelaar
BIV 519.521

CARMEN VANRUYSSEVELDT

administratief medewerker

SINT-GENESIUS-RODE

SINT-GENESIUS-RODE

| €1.650 | 128 m2 2 3
HALLE

HALLE

| €345.000 | 116 m2 1 4
SINT-GENESIUS-RODE

SINT-GENESIUS-RODE

| €1.550 | 135 m2 1 3
SINT-GENESIUS-RODE

SINT-GENESIUS-RODE

| €1.650 | 128 m2 2 3
HALLE

HALLE

| €390.000 | 158 m2 2 3

CONTACT

Door dit formulier te verzenden verklaart u zich akkoord met ons privacy statement.