Compare commits
5 Commits
37e8042b12
...
4df6c5b740
| Author | SHA1 | Date | |
|---|---|---|---|
|
4df6c5b740 | ||
|
|
de8380b115 | ||
|
|
27f40ce999 | ||
|
|
65e1322918 | ||
|
|
be7fb5699b |
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);
|
||||||
|
}
|
||||||
|
|
||||||