all

Goinging · Nov 21, 2023 · 08a1687 · 08a1687
1 parent 405c0b1
commit 08a1687
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,7 +1,6 @@
 /* Stylesheet by Ian H Freel, 2023 */
 #map {width:620px; height:620px;}
 .center {
-    border: 3px solid;
     margin: auto;
     width: 50%;
     padding: 10px;

diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <link rel="stylesheet" href="lib/leaflet/leaflet.css"/>
-        <script src="lib/leaflet/leaflet.js"></script>
+        <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>
@@ -15,16 +15,17 @@
 
            <div> <h1>Minecraft vs Real Life Maps</h1></div>
 
-           <div> 
-           <img src="img/reference.png" style="width: 700px; height: 500px">
-           </div>
-
+           <img src="/img/map.png" style="width: 580px; height: 580px">
+        </div>
            <br></br>
            <br></br>
             <div id="map" class=center>  
             </div>
-            <script src="js/main.js"></script>
+            <script src="/js/main.js"></script>
             <br></br>
                 <br></br>
+                <div> 
+                    <img src="/img/reference.png" style="width: 700px; height: 500px">
+                    </div>
         </body>
-</html>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -1,4 +1,5 @@
 const map = L.map("map", {
+    zoomControl: false,
     minZoom: 14,
     maxZoom: 15
 });
@@ -17,33 +18,33 @@ fetch('data/classified.geojson')
                 if (feature.properties.Class_name === 'Tree/Leaves') {
                     popupContent = `<div> 
                         <h3>Leaves</h3>
-                        <img src="img/Leaves.png" style="width: 150px; height: 150px"> 
+                        <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"> 
+                    <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"> 
+                        <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"> 
+                    <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">
+                        <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"> 
+                    <img src="/img/water.png" style="width: 150px; height: 150px"> 
                 </div>`;
                 }
                 currentLayer = layer;
@@ -71,4 +72,4 @@ fetch('data/classified.geojson')
             return { color: 'transparent', fillColor: 'transparent' };
         }
     }).addTo(map);
-});
+});