all

Goinging · Dec 2, 2023 · dc5b8b3 · dc5b8b3
1 parent fe1b908
commit dc5b8b3
Show file tree

Hide file tree

Showing 6 changed files with 331 additions and 15 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,21 +1,23 @@
 /* Stylesheet by Ian H Freel, 2023 */
-#map {width:620px; height:620px;}
+#map {width:620px; height:620px;
+  border-radius: 10px;}
 .center {
     margin: auto;
     width: 50%;
     padding: 10px;
   }
 img {
-  margin-left: auto;
-  margin-right: auto;
+    margin-left:auto;
+    margin-right:auto;
     width: 50%;
     padding: 10px;
     display: block;
   }
-  h1 {
+h1 {
     text-align: center;
     color:#0092ca; 
-    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-family:sans-serif;
+    font-size: 45px;
 }
 
 body { 
@@ -46,7 +48,16 @@ p {
 .image-container img {
   display: inline-block;
  }
+
+#map2 {
+  width:790px; height:790px;
+border-radius: 10px;}
 
-#slider {
-  width: 100%;
+  .center2 {
+    margin: auto;}
+
+
+.img2
+{
+  border-radius: 20px;
 }
diff --git a/img/minemap.png b/img/minemap.png
diff --git a/img/reallife.png b/img/reallife.png
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
     <head>
         <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
         <script src="lib/leaflet/leaflet.js"></script>
+        <script src="lib/leaflet-side-by-side.js"></script>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
             <title></title>
@@ -14,8 +15,7 @@
         <body>
 
            <div> <h1>Minecraft vs Real Life Maps</h1></div>
-           <br></br>
-           <img src="img/map.png" style="width: 580px; height: 580px">
+           <img src="img/map.png" class="img2" style="width: 580px; height: 580px">
 <div>
 <p>    
     Maps are a item in the video game Minecraft that by holding in<br> 
@@ -45,7 +45,7 @@
                 </div>
                 <br></br>
                 <div> 
-                    <img src="img/reference.png" style="width: 700px; height: 500px">
+                    <img src="img/reference.png" class="img2" style="width: 700px; height: 500px">
                     </div>
                             <div>
                                 <p>
@@ -56,11 +56,25 @@
                                     They show hills by adding darker and lighter shading on either <br>
                                     side. For water depth the darker the blue, the deeper the water. <br>
                                     For the function maps in Minecraft serve, this is all the detail <br>
-                                    that is necessary, but what if you could could make a real map look <br>
-                                    like this?
+                                    that is necessary, but what if you could could make a map of a real<br>
+                                    area look like this?
+                                </p>
+                            </div>
+                            <br></br>
+                            <div id="map2" class="center2"></div>
+                              <div>
+                                 <p>
+                                This is an example of what a real place may look like if it <br>
+                                where classified like a Minecraft map. You can see how it is far from <br>
+                                perfect for many reasons. This was made using one of many Minecraft Maps<br>
+                                created by Mattias Brennecke on his website called <a href=https://earth.motfe.net>Minecraft Earth Map</a>.<br>
+                                The area on the map shown is around the city of Tillimook on the Oregon Coast.<br>
+                                The satellite image was taken from Sentinel 2. The Minecraft Map I used<br>
+                                is at 1:500 scale meaning that there are 500 meters in real life for every<br>
+                                one square on the map.
+
                                 </p>
                             </div>
-                            <div id="map2"></div>
                             <script src="js/main.js"></script>
         </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -75,6 +75,27 @@ fetch('data/classified.geojson')
 });
 
 
-var map2 = L.map('map2').setView([0, 0], 2);
 
-L.tileLayer('https://api.mapbox.com/styles/v1/goinging/clpk5uv4f008501r7b2aw45xv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ29pbmdpbmciLCJhIjoiY2xvaXlvNTYzMDBrMTJrc2I3Z2s2cjFtbiJ9.hZslmiJpn9kpQtAgOFI23A').addTo(map2);
+
+const map2 = L.map("map2", {
+    minZoom: 14,
+    maxZoom: 14,
+    zoomControl: false,
+    scrollWheelZoom: false,
+    dragging: false
+});
+
+map2.setView([44.0588232,-123.0391878], 14);
+
+var layer2= L.tileLayer('https://api.mapbox.com/styles/v1/goinging/clpk5uv4f008501r7b2aw45xv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ29pbmdpbmciLCJhIjoiY2xvaXlvNTYzMDBrMTJrc2I3Z2s2cjFtbiJ9.hZslmiJpn9kpQtAgOFI23A').addTo(map2);
+var layer1 = L.tileLayer('https://api.mapbox.com/styles/v1/goinging/clpnk6z1900bb01r8ccajed50/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ29pbmdpbmciLCJhIjoiY2xvaXlvNTYzMDBrMTJrc2I3Z2s2cjFtbiJ9.hZslmiJpn9kpQtAgOFI23A').addTo(map2);
+
+
+L.control.sideBySide(layer1, layer2).addTo(map2);
+
+
+
+
+
+
+