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!

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

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.