From de8380b1150b31be819b0a2f8c6ca3fe0b04a4b6 Mon Sep 17 00:00:00 2001 From: cabbbyy Date: Mon, 11 Aug 2025 16:01:58 +0800 Subject: [PATCH] added js --- pins.js | 237 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 94 ++++++++++++++++++++++ 2 files changed, 331 insertions(+) create mode 100644 pins.js create mode 100644 script.js diff --git a/pins.js b/pins.js new file mode 100644 index 0000000..7d42877 --- /dev/null +++ b/pins.js @@ -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. Into a fly
I looked away
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", + }, +]; + diff --git a/script.js b/script.js new file mode 100644 index 0000000..4702891 --- /dev/null +++ b/script.js @@ -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
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(` +${pin.title} +

+ ${pin.title} +

+

${pin.caption}

+`); + 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 + 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'); + } +}); +