I am completely new to coding and this is my first project, so please help me out with a very simple answer.
I have created a map in Codepen which does very nicely what I want her to do. Once I add it to my website it does not even show up. I have checked with F12, but my issue is, I do not understand the error messages. Here the particular post: https://agora-tours.com/get-to-know-all-visitor-sites-of-the-galapagos-islands-2/
And how I added it for now:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galapagos Visitor Sites</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
font-family: "Montserrat", Arial, sans-serif;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
width: 33%;
height: 100%;
background-color: #5e95c2;
z-index: 2;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#sidebar.hidden {
display: none;
}
#sidebar img {
width: 100%;
object-fit: cover;
}
#sidebar h2,
#sidebar h3,
#sidebar h4 {
color: #fff;
text-align: left;
}
#sidebar h2 {
text-transform: uppercase;
font-size: 18px;
margin: 10px 0;
}
#sidebar h3 {
font-size: 18px;
}
#sidebar h4 {
font-size: 18px;
margin: 10px 0 5px;
}
#sidebar p {
color: #fff;
font-size: 18px;
text-align: left;
}
hr {
border: none;
border-top: 1px solid #fff;
margin: 10px 0;
width: 100%;
}
#close-sidebar {
align-self: flex-start;
background-color: #2b4e6e;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 18px;
cursor: pointer;
margin-bottom: 20px;
border-radius: 4px;
}
.marker-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
background-color: #000;
z-index: 1;
}
.marker-dot.active {
background-color: #000;
}
.cruise {
background-color: #ff8000;
}
.day-tour {
background-color: #5e95c2;
}
.day-tour-diving {
background-color: #2b4e6e;
}
.liveaboard {
background-color: #f9b233;
}
</style>
</head>
<body>
<div id="sidebar" class="hidden">
<button id="close-sidebar">×</button>
<div id="sidebar-content">
<img id="sidebar-image" src="placeholder.jpg" data-image-url="" alt="Visitor Sites of the Galapagos Islands">
<h2 id="site-name"></h2>
<p id="site-description"> </p>
<hr />
<h4>Island</h4>
<p id="site-island"></p>
<hr />
<h4>Accessibility via</h4>
<p id="site-accessibility"></p>
<hr />
<h4>Activities</h4>
<p id="site-activity"></p>
</div>
<div class="marker-dot cruise"></div>
<div class="marker-dot day-tour"></div>
<div class="marker-dot day-tour-diving"></div>
<div class="marker-dot liveaboard"></div>
</div>
<div id="map"></div>
<script>
/* jshint esversion: 6 */
mapboxgl.accessToken =
"pk.eyJ1IjoiYWdvcmE5OCIsImEiOiJjbTBsY3VoZTkwNDRvMmtweWFraGxoZG1zIn0.swUOxThaoMCZLt4h9yq4lQ";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
center: [-90.9, -0.5],
zoom: 7
});
// Define category colors
const categoryColors = {
Cruise: "cruise",
"Day Tour": "day-tour",
"Day Tour Diving": "day-tour-diving",
Liveaboard: "liveaboard"
};
// List of destinations
const destinations = [
{
name: "Las Tintoreras",
island: "Isabela",
accessibility: "Day Tour, Day Tour Diving & Cruise",
activity: "Snorkeling, Walking & Kayaking",
description:
'Las Tintoreras is a group of small islets located just off the coast of Puerto Villamil on Isabela Island, known for their stunning volcanic landscapes and abundant wildlife. Accessible by kayak or a short boat ride, this site offers a unique opportunity to observe white-tip reef sharks (locally called "tintoreras") resting in calm lava channels. Visitors can also spot sea turtles, marine iguanas, and Galapagos penguins. The islets are also home to vibrant birdlife, including blue-footed boobies and pelicans.',
coordinates: [-90.9596, -0.9689],
image: "https://agora-tours.com/wp-content/uploads/2024/12/IMG_7758-1-scaled.jpg",
category: "Day Tour"
}
];
const sidebar = document.getElementById("sidebar");
const sidebarImage = document.getElementById("sidebar-image");
const siteName = document.getElementById("site-name");
const siteIsland = document.getElementById("site-island");
const siteAccessibility = document.getElementById("site-accessibility");
const siteActivity = document.getElementById("site-activity");
const siteDescription = document.getElementById("site-description");
const closeSidebarButton = document.getElementById("close-sidebar");
// Store the initial map center
let initialCenter = map.getCenter();
// Create markers and add event listeners
destinations.forEach((destination) => {
const markerElement = document.createElement("div");
markerElement.classList.add(
"marker-dot",
categoryColors[destination.category]
);
const marker = new mapboxgl.Marker(markerElement)
.setLngLat(destination.coordinates)
.addTo(map);
markerElement.addEventListener("click", () => {
document
.querySelectorAll(".marker-dot")
.forEach((dot) => dot.classList.remove("active"));
// Add 'active' class to the clicked dot
markerElement.classList.add("active");
// Fly map marker location
map.flyTo({
center: destination.coordinates,
zoom: 10,
essential: true
});
// Show sidebar with destination details
showSidebar(destination);
});
});
function showSidebar(destination) {
sidebar.classList.remove("hidden");
sidebarImage.src = destination.image;
siteName.textContent = destination.name;
siteIsland.textContent = destination.island;
siteAccessibility.textContent = destination.accessibility;
siteActivity.textContent = destination.activity;
siteDescription.textContent = destination.description;
}
// Close sidebar
closeSidebarButton.addEventListener("click", () => {
sidebar.classList.add("hidden");
// Fly the map back to default
map.flyTo({
center: initialCenter,
zoom: 7,
essential: true
});
});
</script>
</body>
</html>
I verified my code, checked with F12 but unfortunately don’t understand the error messages or what exactly I would need to change to get the map displayed. Please help me to learn.