From b1bfab6bbc7b0e85f2469cb114669bde9d3e8f3a Mon Sep 17 00:00:00 2001
From: Gandalf <gandalfderbunte@riseup.net>
Date: Mon, 26 Jun 2023 23:18:50 +0200
Subject: [PATCH] Add map and zoom level depending layers

---
 sketch/html/index.html | 49 ++++++++++++++++++++++++++++++++++++++++--
 sketch/html/style.css  |  9 ++++++++
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 sketch/html/style.css

diff --git a/sketch/html/index.html b/sketch/html/index.html
index 2b96f80..92d239a 100644
--- a/sketch/html/index.html
+++ b/sketch/html/index.html
@@ -3,6 +3,20 @@
 <title>Sketch HambiMap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="w3.css">
+<link rel="stylesheet" href="style.css">
+<!--leaflet from CDN
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+     crossorigin=""></script>-->
+<!--self-served leaflet-->
+<link rel="stylesheet" href="leaflet/leaflet.css">
+<!--integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="-->
+<script src="leaflet/leaflet.js">
+<!--integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="-->
+</script>
 <script>
 var modals=document.getElementsByClassName('w3-modal');
 
@@ -119,7 +133,7 @@ function switch_modal(id){
 	</div> 
 </div>
 <div class="w3-container" id="site_body">
-	<h2>W3.CSS Modal</h2>
+	<h2>Stories of Hambi</h2>
 	<!-- Trigger/Open the Modals -->
 	<button onclick="switch_modal('modal_view_treehouse')" class="w3-button">View Treehouse</button>
 	<button onclick="switch_modal('modal_view_barrio')" class="w3-button">View Barrio</button>
@@ -128,8 +142,39 @@ function switch_modal(id){
 	<button onclick="switch_modal('modal_form_barrio')" class="w3-button">Add Barrio</button>
 	<a href="user_form.html" class="w3-button">Register</a>
 	<a href="login_form.html" class="w3-button">Login</a>
-
+	<div id="map"></div>
 </div>
 
+<script>
+var map = L.map('map').setView([50.880301, 6.560531], 13,);
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 12, maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map);
+
+var barrio_markers = L.layerGroup(); //overlay where all barrio markers will be added
+var tree_markers = L.layerGroup();   //overlay where all tree(house) markers will be added
+var test_tree_marker = L.marker([50.880301, 6.560531]).addTo(tree_markers);
+map.addLayer(tree_markers);
+
+function onMapClick(e){}      //for adding a tree(house)
+function onMapZoom(e){       //for deciding wether to show barrios or treehouses
+		if (map.getZoom() > 16) {
+				map.addLayer(barrio_markers);
+				map.removeLayer(tree_markers);
+			}
+		if (map.getZoom() <= 16) {
+				map.addLayer(tree_markers);
+				map.removeLayer(barrio_markers);
+			}
+	}
+function onMapMouseDown(e){}  //probably needed for Barrio creation
+function onMapMouseUp(e){}    //^^
+function onMapContextMenu(e){}//probably neat for something
+
+map.on('click', onMapClick);
+map.on('zoom', onMapZoom);
+map.on('mousedown', onMapMouseDown);
+map.on('mouseup', onMapMouseUp);
+map.on('contextMenu', onMapContextMenu);
+</script>
+
 </body>
 </html>
diff --git a/sketch/html/style.css b/sketch/html/style.css
new file mode 100644
index 0000000..cc368e5
--- /dev/null
+++ b/sketch/html/style.css
@@ -0,0 +1,9 @@
+#map {
+    height: 450px;
+  }
+
+select{
+    position: relative;
+    top: 10px;
+}
+