Compare commits
14 Commits
37e8042b12
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 2ed4a77a14 | |||
| 34cf54ef23 | |||
| 48c42845ed | |||
|
|
01bb176ef0 | ||
|
|
624a298d89 | ||
|
|
01be4e66f5 | ||
|
|
44774d08ed | ||
|
|
d8860c97ed | ||
|
|
a0bea23ad1 | ||
|
|
4df6c5b740 | ||
|
|
de8380b115 | ||
|
|
27f40ce999 | ||
|
|
65e1322918 | ||
|
|
be7fb5699b |
35
.gitea/workflows/pipeline.yml
Normal file
@@ -0,0 +1,35 @@
|
||||
name: Deploy on push
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ "main" ]
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: alpine-rsync
|
||||
if: contains(gitea.event.head_commit.message, '[deploy]')
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup SSH
|
||||
env:
|
||||
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
|
||||
run: |
|
||||
mkdir -p ~/.ssh
|
||||
echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_ed25519
|
||||
chmod 600 ~/.ssh/id_ed25519
|
||||
ssh-keyscan -p 22 "rchou.org" >> ~/.ssh/known_hosts
|
||||
chmod 644 ~/.ssh/known_hosts
|
||||
|
||||
- name: Rsync to server
|
||||
env:
|
||||
SSH_TARGET_DIR: /home/cab/docker/maps/src
|
||||
RSYNC_SOURCE: .
|
||||
run: |
|
||||
rsync -rz --delete \
|
||||
--no-times --no-perms --no-owner --no-group \
|
||||
--omit-dir-times --mkpath \
|
||||
-e "ssh -i ~/.ssh/id_ed25519 -p 22" \
|
||||
"$RSYNC_SOURCE"/ "deploy@rchou.org:${SSH_TARGET_DIR}/"
|
||||
6
favicon/about.txt
Normal file
@@ -0,0 +1,6 @@
|
||||
This favicon was generated using the following graphics from Twitter Twemoji:
|
||||
|
||||
- Graphics Title: 1f5fa.svg
|
||||
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
|
||||
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f5fa.svg
|
||||
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
|
||||
BIN
favicon/android-chrome-192x192.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
favicon/android-chrome-512x512.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
favicon/apple-touch-icon.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
favicon/favicon-16x16.png
Normal file
|
After Width: | Height: | Size: 773 B |
BIN
favicon/favicon-32x32.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
favicon/favicon.ico
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
favicon/favicon_io.zip
Normal file
1
favicon/site.webmanifest
Normal file
@@ -0,0 +1 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
BIN
images/626.jpg
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
images/chang.jpg
Normal file
|
After Width: | Height: | Size: 476 KiB |
BIN
images/clayDate.jpg
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
images/deftones.jpg
Normal file
|
After Width: | Height: | Size: 662 KiB |
BIN
images/dolores.jpg
Normal file
|
After Width: | Height: | Size: 5.9 MiB |
BIN
images/fineArts.jpg
Normal file
|
After Width: | Height: | Size: 4.8 MiB |
BIN
images/highland.jpg
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
images/home.jpg
Executable file
|
After Width: | Height: | Size: 365 KiB |
BIN
images/homeroom.jpg
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
BIN
images/innout.jpg
Normal file
|
After Width: | Height: | Size: 3.3 MiB |
BIN
images/jit.jpg
Normal file
|
After Width: | Height: | Size: 2.5 MiB |
BIN
images/kbbq.jpg
Normal file
|
After Width: | Height: | Size: 736 KiB |
BIN
images/kevin.jpg
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
images/mulberry.jpg
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
BIN
images/mysterySpot.jpg
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
images/pacificBeach.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/pacifica.jpg
Normal file
|
After Width: | Height: | Size: 4.8 MiB |
BIN
images/pfp.jpg
Normal file
|
After Width: | Height: | Size: 266 KiB |
BIN
images/pokehouse1.jpg
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
images/pokehouse2.jpg
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
BIN
images/primeRib.jpg
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
images/raavi.jpg
Normal file
|
After Width: | Height: | Size: 3.6 MiB |
BIN
images/rattleship.jpg
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
images/rockGarden.jpg
Normal file
|
After Width: | Height: | Size: 2.4 MiB |
BIN
images/roxa.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/seafood.jpg
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
images/skrillexFredAgain.jpg
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
images/snoopy.jpg
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
images/squiggle.jpg
Normal file
|
After Width: | Height: | Size: 3.0 MiB |
52
index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Myatt Map</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Meta Info -->
|
||||
<meta name="description" content="Myatt Map Manuscript">
|
||||
<meta property="og:title" content="Myatt Map">
|
||||
<meta property="og:description" content="Myatt Map Manuscript">
|
||||
<meta property="og:url" content="https://map.rchou.org">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://maps.rchou.org/images/pfp.jpg">
|
||||
<!-- Map -->
|
||||
<link
|
||||
href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Favicon -->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="./favicon/site.webmanifest">
|
||||
<!-- Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Map -->
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- Lightbox overlay -->
|
||||
<div id="overlay">
|
||||
<img id="overlay-img" alt="Expanded view">
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div id="legend">
|
||||
<h4 id="legend-header">Legend</h4>
|
||||
<div><span class="legend-color" style="background:red"></span> Places</div>
|
||||
<div><span class="legend-color" style="background:#FF8DA1"></span> Activites</div>
|
||||
<div><span class="legend-color" style="background:#000080"></span> Restaurants</div>
|
||||
</div>
|
||||
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
|
||||
<script src="pins.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
237
pins.js
Normal file
@@ -0,0 +1,237 @@
|
||||
// pins.js
|
||||
// Array of pin objects for your SF dates map
|
||||
const pins = [
|
||||
{
|
||||
loc: "37.79812, -122.23806",
|
||||
title: "Home Sweet Home",
|
||||
image: "images/home.jpg",
|
||||
caption: "I farded in this room 13 times",
|
||||
category: "place",
|
||||
linkUrl: "https://maps.app.goo.gl/WAWswkbUAB79Thvc7",
|
||||
},
|
||||
{
|
||||
loc: "37.78531, -122.21403",
|
||||
title: "Allergy Central",
|
||||
image: "images/jit.jpg",
|
||||
caption: "Because of this jit.",
|
||||
color: "red",
|
||||
category: "place",
|
||||
linkUrl: "https://maps.app.goo.gl/WAWswkbUAB79Thvc7",
|
||||
},
|
||||
{
|
||||
loc: "37.825134008344946, -122.23262517791034",
|
||||
title: "Mulberry's Market",
|
||||
image: "images/mulberry.jpg",
|
||||
caption: "We had sandwiches here ! I can't believe you went to school around here. You NOT from oakland fr. </3",
|
||||
color: "#000080",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/WAWswkbUAB79Thvc7",
|
||||
},
|
||||
{
|
||||
loc: "37.77964136046781, -122.41720438812168",
|
||||
title: "Skrillex & Fred Again",
|
||||
image: "images/skrillexFredAgain.jpg",
|
||||
caption: "Oops lol",
|
||||
linkUrl: "https://www.youtube.com/watch?v=yRxbIISmJws",
|
||||
},
|
||||
{
|
||||
loc: "37.802132616179186, -122.4472817450568",
|
||||
title: "Palace of Fine Arts",
|
||||
image: "images/fineArts.jpg",
|
||||
caption: "📸 Diesel",
|
||||
color: "#FF8DA1",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/ZgRzjatg85gQuAV56",
|
||||
},
|
||||
{
|
||||
loc: "38.46035670740163, -122.7358885716845",
|
||||
title: "Snoopy Museum",
|
||||
image: "images/snoopy.jpg",
|
||||
caption: "MY comic strip was better.",
|
||||
color: "#FF8DA1",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/ciTBmYDBs4TdUYHD9",
|
||||
},
|
||||
{
|
||||
loc: "37.79349386628708, -122.42262473198608",
|
||||
title: "House of Prime Rib",
|
||||
image: "images/primeRib.jpg",
|
||||
caption: "Spent too damn long arranging everything. I was hungry.",
|
||||
color: "#000080",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/L758kLV9sAArDiMx5",
|
||||
},
|
||||
{
|
||||
loc: "37.796189680437244, -122.40457276773799",
|
||||
title: "Raavi North Indian Cuisine",
|
||||
image: "images/raavi.jpg",
|
||||
caption: "I'm sorry I don't make the rules I had to include the best restaurant in SF.",
|
||||
color: "#000080",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/jxuT6PJiTsDJp5uB8",
|
||||
},
|
||||
{
|
||||
loc: "37.78386940573387, -122.27709398034689",
|
||||
title: "Alameda In-N-Out",
|
||||
image: "images/innout.jpg",
|
||||
caption: "There's a Green Glass Door and some things can go through it, while others can't. A kitten can go through, but not a cat. Cabbert can, but Cab can't.",
|
||||
color: "#000080",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/3uPkveWBML4ufELq8",
|
||||
},
|
||||
{
|
||||
loc: "37.76841042686498, -122.49221963597563",
|
||||
title: "Deftones",
|
||||
image: "images/deftones.jpg",
|
||||
caption: "I watched you change <br> Into a fly <br> I looked away <br> You were on fire",
|
||||
color: "#FF8DA1",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/KLT6rEGGzahgy4gD6",
|
||||
},
|
||||
{
|
||||
loc: "37.568288998813024, -122.51640440420968",
|
||||
title: "Devil's Bunker",
|
||||
image: "images/pacifica.jpg",
|
||||
caption: "Remember we ran into those fuck ass Ken Carson kids",
|
||||
color: "#FF8DA1",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/kmuHH7HX4WsTjdvh6",
|
||||
},
|
||||
{
|
||||
loc: "37.650244488927406, -122.49415916784577",
|
||||
title: "Clay Date",
|
||||
image: "images/clayDate.jpg",
|
||||
caption: "Cold asl. And you had to pee infront of everyone.",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/B3DzTyAWD3eExCRg9",
|
||||
},
|
||||
{
|
||||
loc: "37.45540477568465, -121.90997600357476",
|
||||
title: "Highland Noodles",
|
||||
image: "images/highland.jpg",
|
||||
caption: "We had hand pulled noodles here w eric. You dropped everything into your soup.",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/T6Mzf3E34AVbg65U6",
|
||||
},
|
||||
{
|
||||
loc: "37.429625188529066, -121.9198108138374",
|
||||
title: "Cajun Crack'n",
|
||||
image: "images/seafood.jpg",
|
||||
caption: "You dropped your septum ball...",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/KbR4mcppTXz3ZsYn8",
|
||||
},
|
||||
{
|
||||
loc: "37.40469809134176, -122.004136356191",
|
||||
title: "Fake 408",
|
||||
image: "images/kevin.jpg",
|
||||
caption: "Big Brother is watching...",
|
||||
category: "place",
|
||||
linkUrl: "https://maps.app.goo.gl/3RyKo8e5VH4FrM258",
|
||||
},
|
||||
{
|
||||
loc: "37.773553055069826, -122.2991278811046",
|
||||
title: "Rattleship",
|
||||
image: "images/rattleship.jpg",
|
||||
caption: "Year 2 :p",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/Vy4645FUAL1vhqKx7",
|
||||
},
|
||||
{
|
||||
loc: "37.66025039958257, -121.89301698343981",
|
||||
title: "626 Night Market",
|
||||
image: "images/626.jpg",
|
||||
caption: "RIP Kace Tea",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/eFr1gwK36Jqv3RXW9",
|
||||
},
|
||||
{
|
||||
loc: "36.99318522925177, -122.0651604153732",
|
||||
title: "Squiggle",
|
||||
image: "images/squiggle.jpg",
|
||||
caption: "You just don't get it. It's so iconic.",
|
||||
category: "place",
|
||||
linkUrl: "https://maps.app.goo.gl/YDVMdWEtvcyovssn9",
|
||||
},
|
||||
{
|
||||
loc: "37.00107153727743, -122.04947749033317",
|
||||
title: "Rock Garden",
|
||||
image: "images/rockGarden.jpg",
|
||||
caption: "Here lies a bajillion notes about you. (Good things I hope)",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/J8cfNmbGUarVA6wJ6",
|
||||
},
|
||||
{
|
||||
loc: "36.97472208111632, -122.02588344088629",
|
||||
title: "Roxa Hammock Cafe",
|
||||
image: "images/roxa.jpg",
|
||||
caption: "Hangin' Around",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/oz6fyP78onSKz6Lz7",
|
||||
},
|
||||
{
|
||||
loc: "37.01723296018626, -122.00308735579674",
|
||||
title: "The Mystery Spot",
|
||||
image: "images/mysterySpot.jpg",
|
||||
caption: "ts hella mysterious. they should make it a spot lwk",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/YDVMdWEtvcyovssn9",
|
||||
},
|
||||
{
|
||||
loc: "32.79417952028997, -117.25624817424023",
|
||||
title: "Pacific Beach",
|
||||
image: "images/pacificBeach.jpg",
|
||||
caption: "I loved this trip. I can't believe tvm died. This was the first time you met pants and bridget I think. FAV wlw couple <3",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/24kMSfergfD5Z37PA",
|
||||
},
|
||||
{
|
||||
loc: "32.79417952028997, -117.25624817424023",
|
||||
title: "Pacific Beach",
|
||||
image: "images/pacificBeach.jpg",
|
||||
caption: "I loved this trip. I can't believe tvm died. This was the first time you met pants and bridget I think. FAV wlw couple <3",
|
||||
category: "event",
|
||||
linkUrl: "https://maps.app.goo.gl/24kMSfergfD5Z37PA",
|
||||
},
|
||||
{
|
||||
loc: "37.8089283, -122.254987",
|
||||
title: "Jong Ga House",
|
||||
image: "images/kbbq.jpg",
|
||||
caption: "Happy Birthday Jay!! I wasn't being shy I was just placed in the kids corner.",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/EyNQXGTgXRbkH8JP7",
|
||||
},
|
||||
{
|
||||
loc: "37.828595796191436, -122.25995063398888",
|
||||
title: "Homeroom",
|
||||
image: "images/homeroom.jpg",
|
||||
caption: "You were right it was chilly, I should have gotten my jacket earlier.",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/D8b3qN6h3GCLtfQR7",
|
||||
},
|
||||
{
|
||||
loc: "37.75634544110794, -122.2512607733922",
|
||||
title: "Poke House, Alameda",
|
||||
image: "images/pokehouse2.jpg",
|
||||
caption: "They don't know it yet but I'm going to be their best employee.",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/osAUxGQTvXsqXx8G8",
|
||||
},
|
||||
{
|
||||
loc: "37.3011156776227, -121.94936726198388",
|
||||
title: "Poke House, Winchester",
|
||||
image: "images/pokehouse1.jpg",
|
||||
caption: "I've met so many of your friends here for da first time. Poke Home <3",
|
||||
category: "food",
|
||||
linkUrl: "https://maps.app.goo.gl/SkpZGVzyP7Q9ZWuL8",
|
||||
},
|
||||
{
|
||||
loc: "37.2793403038145, -121.98624235157209",
|
||||
title: "Chang Household",
|
||||
image: "images/chang.jpg",
|
||||
caption: "kkimothyy and ii.conniechiwa",
|
||||
category: "place",
|
||||
linkUrl: "https://www.instagram.com/kkimothyy",
|
||||
},
|
||||
];
|
||||
|
||||
94
script.js
Normal file
@@ -0,0 +1,94 @@
|
||||
// your Mapbox access token
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoiY2FiYmJ5eSIsImEiOiJjbWRpYzY1MGgwYzA5Mm1xM25udDUzbGtpIn0.RX6zv4VI6r2vpj7IWidz0w';
|
||||
|
||||
// mobile stuffs
|
||||
const isMobile = window.innerWidth <= 600;
|
||||
const mobileMaxPx = Math.floor(window.innerWidth * 0.65);
|
||||
const desktopMax = '240px';
|
||||
|
||||
// Colors
|
||||
const Config = {
|
||||
colors: {
|
||||
place: '#FF0000', // red
|
||||
event: '#FF8DA1', // pink
|
||||
food: '#000080', // navy blue
|
||||
default: '#000000' // fallback black
|
||||
}
|
||||
};
|
||||
|
||||
// 1. Initialize the map
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // ID of the <div> in index.html
|
||||
projection: 'globe',
|
||||
style: 'mapbox://styles/mapbox/streets-v12',
|
||||
center: [-122.3194, 37.7849], // SF [lng, lat]
|
||||
zoom: 11,
|
||||
|
||||
attributionControl: false // completely removes the attribution control
|
||||
});
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl()); // Nav controls
|
||||
|
||||
// 2. Total Pins
|
||||
const header = document.getElementById('legend-header');
|
||||
header.textContent = `Total pins: ${pins.length}`;
|
||||
|
||||
// 3. Loop through your pins array and add markers+popups
|
||||
pins.forEach(pin => {
|
||||
const [latStr, lngStr] = pin.loc.split(',').map(s => s.trim());
|
||||
const lat = parseFloat(latStr);
|
||||
const lng = parseFloat(lngStr);
|
||||
// offset is how far the popup appears above/below the pin
|
||||
const popup = new mapboxgl.Popup({
|
||||
offset: {
|
||||
// when the popup is above the marker, push it up by 25px (nice spacing)
|
||||
top: [0, 10],
|
||||
// when it’s below the marker, only push it down by 8px (tighter)
|
||||
bottom: [0, -40],
|
||||
// for the corners
|
||||
'top-left': [15, 25],
|
||||
'top-right': [-15, 25],
|
||||
'bottom-left': [25, 20],
|
||||
'bottom-right': [-25, 20]
|
||||
},
|
||||
// close button is intuitive
|
||||
closeButton: false,
|
||||
// mobile stuffs
|
||||
maxWidth: isMobile
|
||||
? `${mobileMaxPx}px` // ~85% of the true device width
|
||||
: '240px' // your normal desktop width
|
||||
}).setHTML(`
|
||||
<img
|
||||
loading="lazy"
|
||||
src="${pin.image}"
|
||||
alt="${pin.title}"
|
||||
>
|
||||
<h3>
|
||||
<a href="${pin.linkUrl}" target="_blank"> ${pin.title} </a>
|
||||
</h3>
|
||||
<p>${pin.caption}</p>
|
||||
`);
|
||||
new mapboxgl.Marker({ scale: 0.75, color: Config.colors[pin.category] || Config.colors.default })
|
||||
.setLngLat([lng, lat])
|
||||
.setPopup(popup)
|
||||
.addTo(map);
|
||||
});
|
||||
|
||||
// 4 To show big picture.
|
||||
const overlay = document.getElementById('overlay');
|
||||
const overlayImg = document.getElementById('overlay-img');
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
// if user clicked *inside* a popup on its <img>
|
||||
if (e.target.matches('.mapboxgl-popup-content img')) {
|
||||
overlayImg.src = e.target.src; // copy the clicked image
|
||||
overlay.classList.add('show'); // show the overlay
|
||||
}
|
||||
});
|
||||
|
||||
overlay.addEventListener('click', e => {
|
||||
if (e.target === overlay) {
|
||||
overlay.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
109
style.css
Normal file
@@ -0,0 +1,109 @@
|
||||
.mapboxgl-ctrl-logo { display: none !important; }
|
||||
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Semi‑transparent popup background */
|
||||
.mapboxgl-popup-content {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 10px !important; /* ← rounded corners */
|
||||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||||
}
|
||||
|
||||
/* For the p inside the popup */
|
||||
.mapboxgl-popup-content p {
|
||||
margin: 0 0 -5px 0 !important; /* top/right/bottom/left – adjust bottom as you like */
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content h3 {
|
||||
margin: 0 0 5px 0 !important; /* top/right/bottom/left – adjust bottom as you like */
|
||||
}
|
||||
|
||||
|
||||
/* For the image inside the popup */
|
||||
.mapboxgl-popup-content img {
|
||||
border-radius: 5px !important; /* ← rounded corners */
|
||||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||||
|
||||
width: 100%; /* fill the popup’s width */
|
||||
max-width: none; /* ignore any mapbox defaults */
|
||||
height: auto; /* maintain aspect ratio */
|
||||
|
||||
}
|
||||
|
||||
/* hide the popup tip/arrow */
|
||||
.mapboxgl-popup-tip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Legend box */
|
||||
#legend {
|
||||
/* location */
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
z-index: 1; /* above the map */
|
||||
|
||||
/* styling */
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(4px);
|
||||
filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
|
||||
|
||||
/* content */
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#legend h4 {
|
||||
margin: 0 0 0 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#legend p {
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
/* Big Picture */
|
||||
/* full‑screen, centered, hidden by default */
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.75); /* <- dim the background */
|
||||
backdrop-filter: blur(4px); /* <- blur the background */
|
||||
filter: drop-shadow(0 0 4px gray) !important; /* <- gives a border */
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* when we add the “show” class it becomes visible/flex */
|
||||
#overlay.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* the enlarged image itself */
|
||||
#overlay-img {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||