I am making a very simple website with 2 API's working together. Everything went rather well until I tried to add some CSS styling to the general website. Then the mapbox map dissapeared and no matter what I do I can't get it back. I would greatly appreciate any help I could get since I have to make this for a deadline tomorrow.
[here's a link to a codepen version][1]
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Where to land</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js"></script>
<script src="scripts/main.js" defer></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css" rel="stylesheet" />
<link href="styles/stylesheet.css" rel="stylesheet" />
<!-- Geocoder assets -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" />
</head>
<body>
<h1>Kies een locatie</h1>
<div class="buttonGrid">
<button id="denhaag">Den Haag</button>
<button id="parijs">Parijs</button>
<button id="newyork">New York</button>
<button id="berlijn">Berlijn</button>
</div>
<div id="map"></div>
</body>
</html>
CSS
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
#map{
display: block;
height: 300px;
width: 300px;
top: 300px;
}
h1{
font-weight: normal;
text-align: center;
font-family: 'Nanum Gothic', sans-serif;
}
.buttonGrid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5%;
}
button{
border: none;
height: 75px;
font-family: 'Nanum Gothic', sans-serif;
}
JS
// Set api token for mapbox
mapboxgl.accessToken = 'pk.eyJ1IjoicmFkYXJ0cmlua2V0cyIsImEiOiJjazhyODV0YTIwN21wM2VwNjlyNjR4YmZ2In0.YY70N_F9VoD5-YRisQVojg';
// api token for openWeatherMap
var openWeatherMapUrl = 'https://api.openweathermap.org/data/2.5/weather';
var openWeatherMapUrlApiKey = '4f25a5e50352a1b20b607ffd8388234e';
// Determine cities
var cities = [
{
name: 'Den Haag',
coordinates: [4.300700, 52.070498]
},
{
name: 'Parijs',
coordinates: [2.352222, 48.856614]
},
{
name: 'New York',
coordinates: [-74.005941, 40.712784]
},
{
name: 'Berlijn',
coordinates: [13.404954, 52.520007]
},
];
// Initiate map
//var map = new mapboxgl.Map({
//container: 'map',
//style: 'mapbox://styles/radartrinkets/ck914s0450uy91irugye9rhkb',
// center: [4.895168, 52.370216],
// zoom: 11,
//});
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [5.508852, 52.142480],
zoom: 7
});
document.getElementById('denhaag').addEventListener('click', function(){
map.flyTo({
center: [4.300700, 52.070498], essential:true
});
});
document.getElementById('parijs').addEventListener('click', function(){
map.flyTo({
center: [2.352222, 48.856614], essential:true
});
});
document.getElementById('newyork').addEventListener('click', function(){
map.flyTo({
center: [-74.005941, 40.712784], essential:true
});
});
document.getElementById('berlijn').addEventListener('click', function(){
map.flyTo({
center: [13.404954, 52.520007], essential:true
});
});
// get weather data and plot on map
map.on('load', function () {
cities.forEach(function(city) {
// Usually you do not want to call an api multiple times, but in this case we have to
// because the openWeatherMap API does not allow multiple lat lon coords in one request.
var request = openWeatherMapUrl + '?' + 'appid=' + openWeatherMapUrlApiKey + '&lon=' + city.coordinates[0] + '&lat=' + city.coordinates[1];
// Get current weather based on cities' coordinates
fetch(request)
.then(function(response) {
if(!response.ok) throw Error(response.statusText);
return response.json();
})
.then(function(response) {
// Then plot the weather response + icon on MapBox
plotImageOnMap(response.weather[0].icon, city)
})
.catch(function (error) {
console.log('ERROR:', error);
});
});
});
function plotImageOnMap(icon, city) {
map.loadImage(
'http://openweathermap.org/img/w/' + icon + '.png',
function (error, image) {
if (error) throw error;
map.addImage("weatherIcon_" + city.name, image);
map.addSource("point_" + city.name, {
type: "geojson",
data: {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Point",
coordinates: city.coordinates
}
}]
}
});
map.addLayer({
id: "points_" + city.name,
type: "symbol",
source: "point_" + city.name,
layout: {
"icon-image": "weatherIcon_" + city.name,
"icon-size": 1.3
}
});
}
);
}
[1]: https://codepen.io/radartrinkets/pen/rNOxGGy
