From a42537c927257ab752cb956f58a89be4b4ff1ae8 Mon Sep 17 00:00:00 2001 From: Michelle Zhao Date: Wed, 17 Jul 2024 07:22:41 -0700 Subject: [PATCH] lab3 --- week3/gallery.html | 78 ++++++++ week3/images/image.jpg | Bin 0 -> 21732 bytes ...symbol-vector-illustration_64749-4409.avif | Bin 0 -> 968 bytes week3/index.html | 6 +- week3/js/init.js | 83 ++++----- week3/map.geojson | 69 +++++++ week3/styles/gallery.css | 88 +++++++++ week3/styles/index.css | 136 ++++++++++++++ week3/styles/style.css | 173 +++--------------- 9 files changed, 435 insertions(+), 198 deletions(-) create mode 100644 week3/gallery.html create mode 100644 week3/images/image.jpg create mode 100644 week3/images/photo-icon-picture-icon-image-sign-symbol-vector-illustration_64749-4409.avif create mode 100644 week3/map.geojson create mode 100644 week3/styles/gallery.css create mode 100644 week3/styles/index.css diff --git a/week3/gallery.html b/week3/gallery.html new file mode 100644 index 0000000..7b768e8 --- /dev/null +++ b/week3/gallery.html @@ -0,0 +1,78 @@ + + + + + AA191A GeoJSONs and Loops Lab + + + + + + + + + + + +
+

GALLERY! ^_< ☆

+ go back +
+ +
+ + +
+ + +
+ +
+ + +
+
+ + + + + + + + + + diff --git a/week3/images/image.jpg b/week3/images/image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6bfc9c748098d4bca8989820fdc7a23016de842c GIT binary patch literal 21732 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 z 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 literal 0 HcmV?d00001 diff --git a/week3/index.html b/week3/index.html index 1dd3844..660a48c 100644 --- a/week3/index.html +++ b/week3/index.html @@ -2,16 +2,15 @@ - AA191A Functional Events Lab + AA191A GeoJSONs and Loops Lab - + - @@ -26,7 +25,6 @@

ABOUT ME! ^_< ☆

-
diff --git a/week3/js/init.js b/week3/js/init.js index fb7e2f3..8d19ab8 100644 --- a/week3/js/init.js +++ b/week3/js/init.js @@ -32,66 +32,55 @@ function createCustomIcon (caption, latlng) { .setHTML(caption)); } -function Place(place_name, place_district, place_city, place_desc, lat, lon) { +function Place(index, place_name, place_district, place_city, place_desc, lat, lon) { + let image_url = "gallery.html#image_" + index; this.caption = `

${place_name}, ${place_district}, ${place_city}

-

${place_desc}

+ View Image >> +

${place_desc}

`; this.coords = [lon, lat]; createButtons(place_city, lat, lon, 9); } -const places = [ - new Place( - 'Zhujiajiao', - 'Qingpu District', - 'Shanghai', - 'Super pretty water town with lots of historic architecture and yummy food.', - 31.113630863554462, - 121.05345698483865 - ), - new Place( - 'Leifeng Pagoda', - 'Xihu District', - 'Hangzhou', - 'Originally a Buddhist tower that has been rebuilt over the years. \ - I sadly didn\'t have time to go see the view from the topmost level.', - 30.231512056688324, - 120.149705725118 - ), - new Place( - 'Classical Gardens of Suzhou', - 'Gusu District', - 'Suzhou', - 'Collection of gardens. The lotus ponds were really pretty!', - 31.372395575344928, - 120.62852505160254 - ), - new Place( - 'Nanjing Fuzimiao', - 'Qinhuai District', - 'Nanjing', - 'A Confucius Temple where the imperial exam was held. \ - There\'s a museum on the same street with a cheatsheet from the Qing Dynasty \ - on display. As expected, the handwriting is tiny, haha.', - 32.02184144417682, - 118.79184414016119 - ), -] +function processData (data) { + let places = []; + for (let i = 0; i < data.features.length; i++) { + let tmp = data.features[i]; + places.push(new Place(i + 1, + tmp.properties.name, + tmp.properties.district, + tmp.properties.city, + tmp.properties.desc, + tmp.geometry.coordinates[1], + tmp.geometry.coordinates[0] + )); + } + places.forEach(place => createCustomIcon(place.caption, place.coords).addTo(map) ); +} + +let initZoom = { + "lat": 31.204359154022054, + "lon": 120.10623118282591, + "zoom": 7 +} // Create map and add markers const map = new maplibregl.Map({ container: 'map', // container ID style: 'https://api.maptiler.com/maps/dataviz/style.json?key=aRyJfnj25CKYN2noi9Wt', // Your style URL - center: [120.10623118282591, 31.204359154022054], // Starting position [lng, lat] - zoom: 7 // Starting zoom level + center: [initZoom.lon, initZoom.lat], // Starting position [lng, lat] + zoom: initZoom.zoom // Starting zoom level }); -createButtons("Default View", 31.204359154022054, 120.10623118282591, 7); +createButtons("Default View", initZoom.lat, initZoom.lon, initZoom.zoom); -let markers = []; -for (let i = 0; i < places.length; i++) { - markers.push(createCustomIcon(places[i].caption, places[i].coords)); -} -markers.forEach((marker) => marker.addTo(map)); // Ensure the order is longitude, latitude \ No newline at end of file +map.on("load", function() { + fetch("map.geojson") // fetch data + .then(data => { return data.json(); }) // check data + .then(data => { processData(data); }) // process data + .catch(function(error) { + console.log("An error occurred: ", error); + }); +}); \ No newline at end of file diff --git a/week3/map.geojson b/week3/map.geojson new file mode 100644 index 0000000..1a522f6 --- /dev/null +++ b/week3/map.geojson @@ -0,0 +1,69 @@ +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "name": "Zhujiajiao", + "district": "Qingpu District", + "city": "Shanghai", + "desc": "Super pretty water town with lots of historic architecture and yummy food." + }, + "geometry": { + "coordinates": [ + 121.05079163809194, + 31.113422651979562 + ], + "type": "Point" + } + }, + { + "type": "Feature", + "properties": { + "name": "Leifeng Pagoda", + "district": "Xihu District", + "city": "Hangzhou", + "desc": "Originally a Buddhist tower that has been rebuilt over the years. I sadly didn't have time to go see the view from the topmost level." + }, + "geometry": { + "coordinates": [ + 120.14494204232636, + 30.233352123539035 + ], + "type": "Point" + } + }, + { + "type": "Feature", + "properties": { + "name": "Humble Administrator's Garden", + "district": "Gusu District", + "city": "Suzhou", + "desc": "A part of the Classical Gardens of Suzhou. The lotus ponds were really pretty!" + }, + "geometry": { + "coordinates": [ + 120.62533357835912, + 31.325210071401756 + ], + "type": "Point" + } + }, + { + "type": "Feature", + "properties": { + "name": "Nanjing Fuzimiao", + "district": "Qinhuai District", + "city": "Nanjing", + "desc": "A Confucius Temple where the imperial exam was held. There's a museum on the same street with a cheatsheet from the Qing Dynasty on display. As expected, the handwriting is tiny, haha." + }, + "geometry": { + "coordinates": [ + 118.78434984973381, + 32.02188820240707 + ], + "type": "Point" + } + } + ] + } \ No newline at end of file diff --git a/week3/styles/gallery.css b/week3/styles/gallery.css new file mode 100644 index 0000000..df382e5 --- /dev/null +++ b/week3/styles/gallery.css @@ -0,0 +1,88 @@ +@import "style.css"; + +/* Defines the page layout using a grid */ +main { + grid-area: main; + display: grid; + grid-template-areas: "col1 col2"; + grid-template-columns: 1fr 1fr; +} + +/* Assigns each major section to a part of the grid */ +.col1 { + grid-area: col1; + display: flex; + flex-direction: column; + align-items: flex-end; + padding-right:10px; +} + +.col2 { + grid-area: col2; + display: flex; + flex-direction: column; + padding-left:10px; +} + +.placeholder-img { + width: 75%; + height: 100%; + background: url("../images/image.jpg"); + background-size: cover; + background-position: center; + + border: none; + margin:10px; +} + +#popup { + visibility: hidden; + position:fixed; + padding:0; + margin:0; + + top:0; + left:0; + + width: 100%; + height: 100%; + background:rgba(0, 0, 0, 0.8); +} + +.closeButton { + margin-right: 0; + width: 20px; + margin: 5px; + background-color: white; + border: solid; + border-width: 2px; + + font-weight:bold; +} +.closeButton:hover { + color: #0088ff; + border-color:#0088ff; +} + +#content { + width:75%; + height:75%; + background-color: white; + position: absolute; + top: 0; + left: 0; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + align-items: flex-end; +} + +#display-img { + height: 100%; + width: auto; + margin-bottom: 2.5%; + align-self: center; +} \ No newline at end of file diff --git a/week3/styles/index.css b/week3/styles/index.css new file mode 100644 index 0000000..4fc388b --- /dev/null +++ b/week3/styles/index.css @@ -0,0 +1,136 @@ +@import "style.css"; + +/* Defines the page layout using a grid */ +main { + grid-area: main; + display: grid; + grid-template-areas: "col1 col2 col3"; + grid-template-columns: 1.5fr 3fr 1fr; +} + +/* Assigns each major section to a part of the grid */ +.col1 { + grid-area: col1; + padding-right:10px; + display: flex; + flex-flow: column; +} + +#avatar { + border:solid; + border-bottom: none; + border-width: 2ch; + border-color: #ffb4c4; +} + +img { + width: 400px; + height: auto; +} + +#description { + border:solid; + border-top: none; + border-width: 2ch; + border-color: #ffb4c4; + + margin-right:10px; + padding: 15px; + background-color: #ffb4c4; + flex: 1 1 auto; + width:400px; +} + +a:link { + color:#0088ff; + text-decoration-line: none; +} +a:visited { + color:#0088ff; + text-decoration-line: none; +} +a:hover { + color: white; + text-decoration-line: none; +} +a:active { + color:white; + text-decoration-line: none; +} + +.col2 { + grid-area: col2; + padding-right:10px; + display: flex; + flex-flow: column; +} + +.title { + margin-bottom: 10px; +} + +#map { + flex: 1 1 auto; + border-style: solid; + border-width: 0.25ch; +} + +.mapPopup { + background-color: #f8f9fa; + color: #212529; + font-size: 16px; + padding: 10px; +} + +.popupTitle { + border:solid; + border-top: none; + border-right: none; + border-left: none; + border-width: 1px; + border-color: black; + + padding-bottom: 5px; + margin-bottom: 10px; +} + +.col3 { + grid-area: col3; +} + +.zoom { + width: 100%; + aspect-ratio: 2.3 / 1; + margin-bottom: 10px; + + background: url(../images/my-button.png) no-repeat; + background-position: center; + border: none; + background-size: 100% auto; + + padding-left: 10vh; + border-radius: 10px; + text-align: left; + + transition: transform 0.5s; + color: rgb(255, 255, 255); +} + +.zoom:hover { + transform: scale(95%); + background: url(../images/my-button-hover.png) no-repeat; + background-position: center; + border: none; + background-size: 100% auto; + text-align: center; + padding-left: 0vh; +} + +.zoom-label { + display: inline-block; + color: white; + font-weight: 600; + font-size: 18px; + padding: 5px; + border-radius: 5px; +} \ No newline at end of file diff --git a/week3/styles/style.css b/week3/styles/style.css index 8ea41d4..cff30d6 100644 --- a/week3/styles/style.css +++ b/week3/styles/style.css @@ -17,7 +17,6 @@ body { padding: 1rem; } -/* Defines the page layout using a grid */ body { display: grid; grid-template-areas: @@ -28,73 +27,54 @@ body { /* Adjusted to reflect the simplified structure */ } -main { - display: grid; - grid-template-areas: "col1 col2 col3"; - grid-template-columns: 2fr 3fr 1fr; -} - -/* Assigns each major section to a part of the grid */ -h1 { +header { + grid-area: header; + background-color: #8dc2ff; + color: white; + margin-bottom: 15px; padding: 10px; -} -h2 { - color: #ec3c63; - padding-top:10px; -} - -p { - font-size: 17px; - line-height: 1.3; + display: flex; + align-items: center; + justify-content: center; } -header { - grid-area: header; +#footer { + grid-area: footer; background-color: #8dc2ff; color: white; - margin-bottom: 15px; padding: 10px; + margin-top: 15px; display: flex; align-items: center; justify-content: center; } -main { - grid-area: main; +h1 { + padding: 10px; } -.col1 { - grid-area: col1; - padding-right:10px; - display: flex; - flex-flow: column; +h2 { + color: #ec3c63; + padding-top:10px; } -#avatar { - border:solid; - border-bottom: none; - border-width: 2ch; - border-color: #ffb4c4; +p { + font-size: 17px; + line-height: 1.3; } -img { - width: 400px; - height: auto; +ul { + padding-left: 30px; } -#description { - border:solid; - border-top: none; - border-width: 2ch; - border-color: #ffb4c4; +ol { + padding-left: 30px; +} - margin-right:10px; - padding: 15px; - background-color: #ffb4c4; - flex: 1 1 auto; - width:400px; +li { + font-size: 17px; } a:link { @@ -112,105 +92,4 @@ a:hover { a:active { color:white; text-decoration-line: none; -} - -ul { - padding-left: 30px; -} - -ol { - padding-left: 30px; -} - -li { - font-size: 17px; -} - -.col2 { - grid-area: col2; - padding-right:10px; - display: flex; - flex-flow: column; -} - -.title { - margin-bottom: 10px; -} - -#map { - flex: 1 1 auto; - border-style: solid; - border-width: 0.25ch; -} - -.mapPopup { - background-color: #f8f9fa; - color: #212529; - font-size: 16px; - padding: 10px; -} - -.popupTitle { - border:solid; - border-top: none; - border-right: none; - border-left: none; - border-width: 1px; - border-color: black; - - padding-bottom: 5px; - margin-bottom: 10px; -} - -.col3 { - grid-area: col3; -} - -.zoom { - width: 100%; - aspect-ratio: 2.3 / 1; - margin-bottom: 10px; - - background: url(../images/my-button.png) no-repeat; - background-position: center; - border: none; - background-size: 100% auto; - - padding-left: 10vh; - border-radius: 10px; - text-align: left; - - transition: transform 0.5s; - color: rgb(255, 255, 255); -} - -.zoom:hover { - transform: scale(95%); - background: url(../images/my-button-hover.png) no-repeat; - background-position: center; - border: none; - background-size: 100% auto; - text-align: center; - padding-left: 0vh; -} - -.zoom-label { - display: inline-block; - color: white; - font-weight: 600; - font-size: 18px; - padding: 5px; - border-radius: 5px; -} - -#footer { - grid-area: footer; - background-color: #8dc2ff; - color: white; - padding: 10px; - margin-top: 15px; - - display: flex; - align-items: center; - justify-content: center; } \ No newline at end of file