added js

2025-08-11 22:18:02 +08:00
parent 098d0f5b41
commit 05f6603fc4
2 changed files with 219 additions and 0 deletions
--- a/script/mapbox.js
+++ b/script/mapbox.js
@@ -0,0 +1,160 @@
+// script.js
+
+// 1️⃣ Your Mapbox access token
+mapboxgl.accessToken = 'pk.eyJ1IjoiY2FiYmJ5eSIsImEiOiJjbWRpYzY1MGgwYzA5Mm1xM25udDUzbGtpIn0.RX6zv4VI6r2vpj7IWidz0w';
+
+// 2️⃣ Initialize the map zoomed fully out (globe‑like)
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/streets-v12',
+  center: [0, 0],
+  zoom: 1,
+  attributionControl: false
+});
+
+// 3️⃣ Define your companies ([lat, lng], zoom, imageUrl, description)
+const companies = [
+  {
+    id: 'overview',
+    name: 'Overview',
+    coords: [40.14010599415405, -107.69483342077913],
+    zoom: 3,
+    imageUrl: 'images/wip.jpg',
+    description: `
+      <h2>Overview</h2>
+      <p>Use the controls in the top left corner to jump to a spot!</p>
+    `
+  },
+  {
+    id: 'tancha',
+    name: 'Tan‑Cha',
+    coords: [37.325382569107695, -122.01149036275054],
+    zoom: 9,
+    imageUrl: 'images/tancha.jpg',
+    description: `
+      <h2>Tan‑Cha</h2>
+      <p>Wip.</p>
+    `
+  },
+  {
+    id: 'pokehouse',
+    name: 'Poke House',
+    coords: [37.301113384436285, -121.9493462690826],
+    zoom: 9,
+    imageUrl: 'images/wip.jpg',
+    description: `
+      <h2>Poke House</h2>
+      <p>Wip.</p>
+    `
+  },
+  {
+    id: 'nanobase',
+    name: 'NanoBase',
+    coords: [34.68104506798117, 135.49167196036512],
+    zoom: 9,
+    imageUrl: 'images/work.jpg',
+    description: `
+      <h2>NanoBase</h2>
+      <p>Developed automated payroll processing scripts in Python, reducing errors by 85%.</p>
+      <a href="https://www.nanobase.co.jp/blogs/30">NanoBase Blog</a>
+    `
+  },
+  {
+    id: 'lanner',
+    name: 'Lanner Electronics',
+    coords: [43.69824981965482, -79.62570806485385],
+    zoom: 9,
+    imageUrl: 'images/wip.jpg',
+    description: `
+      <h2>Lanner Electronics</h2>
+      <p>Wip.</p>
+    `
+  }
+];
+
+// 4️⃣ Populate the company list
+const listEl = document.getElementById('company-list');
+companies.forEach((company, idx) => {
+  const btn = document.createElement('button');
+  btn.textContent = company.name;
+  btn.id = company.id;
+  btn.addEventListener('click', () => selectCompany(idx));
+  listEl.appendChild(btn);
+});
+
+// Holder for mapboxgl.Marker instances
+const markers = [];
+
+// Reference to the .map-wrapper for our fixed popups
+const mapWrapper = document.querySelector('.map-wrapper');
+
+/**
+ * Renders a fixed-position popup (does not move with the map)
+ */
+function showFixedPopup(company, [lng, lat]) {
+  // Remove any existing fixed popups
+  document.querySelectorAll('.fixed-popup').forEach(el => el.remove());
+
+  // Build the popup element
+  const popupEl = document.createElement('div');
+  popupEl.className = 'fixed-popup';
+  popupEl.innerHTML = `
+    <img 
+      loading="lazy"
+      src="${company.imageUrl}"
+      alt="Me at ${company.name}" />
+      <strong>${company.name}</strong>
+  `;
+
+  // Attach into the map wrapper (above the map canvas)
+  mapWrapper.appendChild(popupEl);
+}
+
+/**
+ * Handles company selection:
+ * - cleans up old markers/popups
+ * - flies the map
+ * - updates the blurb
+ * - adds marker + fixed popup (if not overview)
+ */
+function selectCompany(index) {
+  const { coords, zoom, description, id } = companies[index];
+  const [lat, lng] = coords;
+
+  // Remove existing markers
+  markers.forEach(m => m.remove());
+  markers.length = 0;
+
+  // Remove any existing popups
+  document.querySelectorAll('.mapboxgl-popup, .fixed-popup').forEach(el => el.remove());
+
+  // Fly to the new location
+  map.flyTo({
+    center: [lng, lat],
+    zoom,
+    speed: 1.5,
+    essential: true
+  });
+
+  // Update the description blurb
+  document.getElementById('blurb').innerHTML = description;
+
+  // Highlight the active button
+  document.querySelectorAll('.company-list button')
+    .forEach(b => b.classList.toggle('active', b.id === id));
+
+  // If it's the overview, skip marker + popup
+  if (index === 0) return;
+
+  // Add a marker
+  const marker = new mapboxgl.Marker()
+    .setLngLat([lng, lat])
+    .addTo(map);
+  markers.push(marker);
+
+  // Show our custom fixed popup
+  showFixedPopup(companies[index], [lng, lat]);
+}
+
+// Initialize on load with the overview
+selectCompany(0);