week 1 in class demo code

zhamic7 · Jun 27, 2024 · c6aa76d · c6aa76d
1 parent 23b2a51
commit c6aa76d
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 0 deletions.
diff --git a/week1/images/avatar.jpg b/week1/images/avatar.jpg
diff --git a/week1/index.html b/week1/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <title>Hello World with MapLibreGL</title>
+
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="#">
+    <link rel="stylesheet" href="styles/style.css">
+
+    <!-- MapLibreGL's css-->
+    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
+
+    <!-- MapLibreGL's JavaScript-->
+    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+</head>
+
+<body>
+
+    <header>
+        <h1>TITLE</h1>
+    </header>
+
+    <main>
+
+        <!-- hint: majority of your lab assignment can go here -->
+        <div class="portfolio">
+            <h3>profile</h3>
+            <!-- Portfolio content goes here -->
+            <img src="images/avatar.jpg" alt="A photo of the site creator">
+            <p></p>
+        </div>
+
+        <h3>maps</h3>
+        <div id="map">
+
+            <!-- Map will be inserted here -->
+        </div>
+
+    </main>
+
+    <div id="footer">
+        Copyright(2024)
+    </div>
+
+    <script src="js/init.js"></script>
+
+</body>
+
+</html>
diff --git a/week1/js/init.js b/week1/js/init.js
@@ -0,0 +1,14 @@
+// Initialize the map
+const map = new maplibregl.Map({
+    container: 'map', // container ID
+    style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', // Your style URL
+    center: [-118.444, 34.0709], // Starting position [lng, lat]
+    zoom: 15 // Starting zoom level
+});
+
+// Add a marker to the map
+new maplibregl.Marker()
+    .setLngLat([34.0709, -118.444])
+    .setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
+        .setHTML('Math Sciences 4328 aka the Technology Sandbox<br> is the lab where I used to work in '))
+    .addTo(map);
diff --git a/week1/styles/style.css b/week1/styles/style.css
@@ -0,0 +1,62 @@
+/* The * selects everything and acts as a global reset to ensure consistency across browsers */
+* {
+    font-family: 'Courier New', monospace;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Sets the overall background and ensures the content fits the screen height */
+html {
+    background-color: #ffcbcd;
+}
+
+html,
+body {
+    height: 80vh;
+    padding: 1rem;
+}
+
+/* Defines the page layout using a grid */
+body {
+    display: grid;
+    grid-template-areas:
+        "header"
+        "main"
+        "footer";
+    grid-template-rows: auto 1fr auto;
+    /* Adjusted to reflect the simplified structure */
+}
+
+main {
+    display: grid;
+    grid-template-areas: "portfolio map";
+    grid-template-columns: 1fr 1fr;
+}
+
+/* Assigns each major section to a part of the grid */
+header {
+    grid-area: header;
+}
+
+main {
+    grid-area: main;
+}
+
+.portfolio {
+    grid-area: portfolio;
+}
+
+img {
+    width: 300px;
+    height: auto;
+}
+
+#map {
+    grid-area: map;
+    height: 80vh;
+}
+
+footer {
+    grid-area: footer;
+}