all

Goinging · Nov 19, 2023 · 3eac1c3 · 3eac1c3
1 parent ed3fc63
commit 3eac1c3
Show file tree

Hide file tree

Showing 27 changed files with 29,753 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,47 @@
+/* Stylesheet by Ian H Freel, 2023 */
+#map {width:620px; height:620px;}
+.center {
+    border: 3px solid;
+    margin: auto;
+    width: 50%;
+    padding: 10px;
+  }
+img {
+  margin-left: auto;
+  margin-right: auto;
+    width: 50%;
+    padding: 10px;
+    display: block;
+  }
+  h1 {
+    text-align: center;
+    color:#eeeeee; 
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+body { 
+	background-color: #222831; 
+}
+
+.second-color { 
+
+  border: 5px, #393e46;
+}
+
+.third-color { 
+	background: #0092ca; 
+}
+
+.fourth-color { 
+	background: #eeeeee; 
+}
+
+  h3 {
+    text-align: center;
+}
+
+
+.image-container img {
+  display: inline-block;
+ }
+
diff --git a/data/classified.geojson b/data/classified.geojson
diff --git a/img/Final_map_3.tif b/img/Final_map_3.tif
diff --git a/img/Grass Block.png b/img/Grass Block.png
diff --git a/img/Gravel.png b/img/Gravel.png
diff --git a/img/Leaves.png b/img/Leaves.png
diff --git a/img/Pumpkin.png b/img/Pumpkin.png
diff --git a/img/map.png b/img/map.png
diff --git a/img/readme.md b/img/readme.md
diff --git a/img/reference.png b/img/reference.png
diff --git a/img/sand.png b/img/sand.png
diff --git a/img/stone.png b/img/stone.png
diff --git a/img/water.png b/img/water.png
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" href="/lib/leaflet/leaflet.css" />
+        <script src="/lib/leaflet/leaflet.js"></script>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+            <title></title>
+
+        <link rel="stylesheet" href="css/style.css">
+
+
+        </head>
+        <body>
+
+           <div> <h1>Minecraft vs Real Life Maps</h1></div>
+
+           <div> 
+           <img src="/img/reference.png" style="width: 700px; height: 500px">
+           </div>
+
+           <br></br>
+           <br></br>
+            <div id="map" class=center>  
+            </div>
+            <script src="/js/main.js"></script>
+            <br></br>
+                <br></br>
+        </body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,74 @@
+const map = L.map("map", {
+    minZoom: 14,
+    maxZoom: 15
+});
+
+map.setView([44.068,-123.118], 14);
+
+L.tileLayer('https://api.mapbox.com/styles/v1/goinging/cloy47qf100al01r67k1f6l1i/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ29pbmdpbmciLCJhIjoiY2xvaXlvNTYzMDBrMTJrc2I3Z2s2cjFtbiJ9.hZslmiJpn9kpQtAgOFI23A').addTo(map);
+
+fetch('data/classified.geojson')
+    .then(response => response.json())
+    .then(data => {
+      L.geoJSON(data, {
+        onEachFeature: function (feature, layer) {
+            if (feature.properties && feature.properties.Class_name) {
+                let popupContent = '';
+                if (feature.properties.Class_name === 'Tree/Leaves') {
+                    popupContent = `<div> 
+                        <h3>Leaves</h3>
+                        <img src="/img/Leaves.png" style="width: 150px; height: 150px"> 
+                    </div>`;
+                } else if (feature.properties.Class_name === 'Pumpkins') {
+                    popupContent = `<div> 
+                    <h3>Pumpkin</h3>
+                    <img src="/img/Pumpkin.png" style="width: 150px; height: 150px"> 
+                </div>`;
+                } else if (feature.properties.Class_name === 'Grass Block') {
+                    popupContent = `<div> 
+                        <h3>Grass Block</h3>
+                        <img src="/img/Grass Block.png" style="width: 150px; height: 150px"> 
+                    </div>`;
+                } else if (feature.properties.Class_name === 'Sand') {
+                    popupContent = `<div> 
+                    <h3>Sand</h3>
+                    <img src="/img/sand.png" style="width: 150px; height: 150px"> 
+                </div>`;
+                } else if (feature.properties.Class_name === 'Stone/Gravel') {
+                    popupContent = `<div class="popup-container image-container"> 
+                        <h3>Stone and Gravel</h3>
+                        <img src="/img/stone.png" style="width: 150px; height: 150px">
+                        <img src="/img/Gravel.png" style="width: 150px; height: 150px">
+                    </div>`;
+                } else if (feature.properties.Class_name === 'Water') {
+                    popupContent = `<div> 
+                    <h3>Water</h3>
+                    <img src="/img/water.png" style="width: 150px; height: 150px"> 
+                </div>`;
+                }
+                currentLayer = layer;
+                layer.on({
+                    mouseover: function (e) {
+                        if (currentLayer) {
+                            currentLayer.setStyle({ fillColor: 'transparent', color: 'transparent'});
+                        }
+                        layer.setStyle({ fillColor: 'transparent', color: 'white', weight: 0.4 });
+                        layer.bindPopup(popupContent, { maxWidth: 400, maxHeight: 300, autoPan: false}).openPopup(e.latlng);
+                        currentLayer= layer;
+                    },
+
+                    mouseout: function () {
+                        if (currentLayer === layer) {
+                            currentLayer.setStyle({ fillColor: 'transparent', color: 'transparent'});
+                            currentLayer.closePopup();
+                            currentLayer = null;
+                        }
+                    }
+                });
+            }
+        },
+        style: function () {
+            return { color: 'transparent', fillColor: 'transparent' };
+        }
+    }).addTo(map);
+});
diff --git a/lib/leaflet/images/layers-2x.png b/lib/leaflet/images/layers-2x.png
diff --git a/lib/leaflet/images/layers.png b/lib/leaflet/images/layers.png
diff --git a/lib/leaflet/images/marker-icon-2x.png b/lib/leaflet/images/marker-icon-2x.png
diff --git a/lib/leaflet/images/marker-icon.png b/lib/leaflet/images/marker-icon.png
diff --git a/lib/leaflet/images/marker-shadow.png b/lib/leaflet/images/marker-shadow.png