From 2f168e36830e6dc8f633d6ce3f6404d39e9426aa Mon Sep 17 00:00:00 2001 From: Hillary Koros Date: Sat, 21 Oct 2023 08:12:28 +0300 Subject: [PATCH] updated query for the parcels --- index.html | 21 +++++---- script.js | 134 +++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 106 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 9931f1c..ccac4a0 100644 --- a/index.html +++ b/index.html @@ -52,17 +52,20 @@ -
-

Welcome to the Koimeret Registration Section

-

- Koimeret is a registration section located in Kong'Asis Ward in Chepalungu, Bomet County. Here, you can access vital information about parcel registration, including details such as area and owner information. -

-
+
diff --git a/script.js b/script.js index 03a9e05..3c4e595 100644 --- a/script.js +++ b/script.js @@ -1,43 +1,97 @@ -var map = L.map('map').setView([-0.835055, 35.229350], 12); // Initial view at lat 0, lon 0 with zoom level 2 -L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { +document.addEventListener('DOMContentLoaded', function () { + var map = L.map('map').setView([-0.835055, 35.229350], 12); + + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' -}).addTo(map); - -// Load GeoJSON data -var geoJsonUrl = 'data/Koimeret_Registration_Parcels.geojson'; - -fetch(geoJsonUrl) - .then(response => response.json()) - .then(geoJsonData => { - L.geoJSON(geoJsonData, { - style: function (feature) { - var area = feature.properties.area; // Get the area from the properties - // Assign colors based on a gradient - var fillColor = area > 10? 'green' : 'yellow'; - - // Modify fillColor based on the area value for a gradient effect - if (area > 10) { - fillColor = 'green'; - } else if (area > 5) { - fillColor = 'yellow'; - } else { - fillColor = 'red'; + }).addTo(map); + + var geoJsonLayer; + var parcelDataDisplay = document.getElementById('parcelData'); + + // Load GeoJSON data from the specified URL + fetch('data/Koimeret_Registration_Parcels.geojson') + .then(response => response.json()) + .then(data => { + geoJsonLayer = L.geoJSON(data, { + style: function (feature) { + return { + fillColor: 'transparent', + fillOpacity: 0, + color: 'black', + weight: 2 + }; + }, + onEachFeature: function (feature, layer) { + var popupContent = 'Parcel ID: ' + feature.properties.parcel_id; + layer.bindPopup(popupContent); } - - return { - fillColor: fillColor, - fillOpacity: 0.5, - color: 'blue', - weight: 2 - }; - }, - - onEachFeature: function (feature, layer) { - // Create a popup with all properties - var popupContent = 'Properties:
' + - JSON.stringify(feature.properties, null, 2); - layer.bindPopup(popupContent); + }).addTo(map); + }) + .catch(error => console.error('Error fetching GeoJSON:', error)); + + // Add a click event handler to the query button + document.getElementById('queryButton').addEventListener('click', function () { + var parcelId = document.getElementById('parcelQuery').value.trim(); + resetParcelStyle(geoJsonLayer); + parcelDataDisplay.innerHTML = ''; + + var foundParcels = findParcelsByQuery(geoJsonLayer, parcelId); + + if (foundParcels.length > 0) { + map.fitBounds(L.featureGroup(foundParcels).getBounds(), { padding: [50, 50] }); + highlightParcels(foundParcels); + displayParcelData(foundParcels); + } else { + parcelDataDisplay.innerHTML = 'Parcels not found'; + } + }); + + function findParcelsByQuery(geoJsonLayer, parcelId) { + var foundParcels = []; + + geoJsonLayer.eachLayer(function (layer) { + const parcelIDFromGeoJSON = layer.feature.properties.parcel_id; + + if (parcelIDFromGeoJSON.toString() === parcelId.toString()) { + foundParcels.push(layer); } - }).addTo(map); - }) - .catch(error => console.error('Error fetching GeoJSON:', error)); \ No newline at end of file + }); + + return foundParcels; + } + + function highlightParcels(layers) { + layers.forEach(function (layer) { + layer.setStyle({ + fillColor: 'red', + fillOpacity: 0.6, + color: 'black', + weight: 7 + }); + }); + } + + function resetParcelStyle(geoJsonLayer) { + geoJsonLayer.eachLayer(function (layer) { + layer.setStyle({ + fillColor: 'transparent', + fillOpacity: 0, + color: 'black', + weight: 2 + }); + }); + } + + function displayParcelData(parcels) { + var data = parcels.map(function (parcel) { + var featureProperties = parcel.feature.properties; + var propertyStrings = Object.keys(featureProperties).map(function (key) { + return '' + key + ': ' + featureProperties[key]; + }); + return propertyStrings.join('
'); + }); + + parcelDataDisplay.innerHTML = data.join('
'); + } + +});