added js
This commit is contained in:
cabbbyy
237
pins.js
Normal file
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
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');
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user