osm-zoning WORKING VERSION - open changesets, sessions shared bugs st…

…ill exist, added colors
baditaflorin · Jun 15, 2024 · e969eda · e969eda
1 parent 5ed718b
commit e969eda
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 11 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/osm-zoning/static/data.js b/osm-zoning/static/data.js
@@ -32,6 +32,3 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
 });
 
-const clearMarkers = () => {
-    markers.clearLayers();
-};
diff --git a/osm-zoning/static/map.html b/osm-zoning/static/map.html
@@ -19,5 +19,7 @@
     <a href="/login">Log in with OpenStreetMap</a>
 </div>
 <button id="saveChangesButton">Save Changes</button>
+<div id="legend" class="legend"></div>
 </body>
+
 </html>
diff --git a/osm-zoning/static/map.js b/osm-zoning/static/map.js
@@ -63,16 +63,29 @@ const fetchDataAndAddMarkers = async () => {
             .map(createWay);
 
         waysToAdd.forEach(way => way.addTo(mymap));
-
+        createLegend(data);
     } catch (error) {
         console.error('Error fetching data and adding markers:', error);
     }
 };
 
+const zoningCodeColors = {
+    residential: 'blue',
+    commercial: 'green',
+    industrial: 'red',
+    A: 'gold',
+    B: 'orange',
+    C: 'red',
+    D: 'red',
+    // Add more zoning codes and their colors here
+};
+
 const createWay = (way) => {
     const latlngs = way.geometry.map(point => [point.lat, point.lon]);
+    const zoningCode = way.tags['zoning_code'];
+    const color = zoningCodeColors[zoningCode] || 'gray'; // Default color
 
-    const wayPolyline = L.polyline(latlngs, { color: 'blue' });
+    const wayPolyline = L.polyline(latlngs, { color });
 
     const popupContent = `
         <div class="popup-content">
@@ -86,6 +99,24 @@ const createWay = (way) => {
     return wayPolyline;
 };
 
+const createLegend = (data) => {
+    const legendContainer = document.getElementById('legend');
+    legendContainer.innerHTML = ''; // Clear previous legend
+
+    const zoningCodes = [...new Set(data.map(way => way.tags['zoning_code']))];
+
+    zoningCodes.forEach(zoningCode => {
+        const color = zoningCodeColors[zoningCode] || 'blue';
+        const legendItem = document.createElement('div');
+        legendItem.classList.add('legend-item');
+        legendItem.innerHTML = `
+            <span class="legend-color" style="background-color: ${color};"></span>
+            <span>${zoningCode}</span>
+        `;
+        legendContainer.appendChild(legendItem);
+    });
+};
+
 const formatTags = (tags) => {
     if (!tags) return 'No tags available';
 

diff --git a/osm-zoning/static/style.css b/osm-zoning/static/style.css
@@ -36,3 +36,29 @@ html, body {
     background: #fff;
     outline: none;
 }
+
+.legend {
+    position: absolute;
+    bottom: 30px;
+    left: 10px;
+    padding: 10px;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.legend-color {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}