Projects coordinates on mapbox

<!-- Demo Map for Projects -->

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">

<style>
#map-container {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 450px;
		margin-bottom: 2em;
	}
	
	#map {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
	}

	.marker {
		background-image: url('mapbox-icon.png');
		background-size: cover;
		background-color: red;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		cursor: pointer;
	}


.mapboxgl-popup-close-button {
	color: #404040;
	padding: 3px;
}

	.mapboxgl-popup {
		max-width: 200px;
	}

	.mapboxgl-popup-content {
		text-align: center;
		padding: 15px;
		font-weight: 500;
	}

	.mapboxgl-popup-content a {
		text-decoration: none;
		color: #404040;
	}
</style>


<div id="map-container">
	<div id="map"></div> <!-- Mapbox loads here -->
</div>


<script>
	var endpoint = "/projects-json/" // The URL of the JSON template
	mapboxgl.accessToken =
		'pk.eyJ1IjoidHJpbGxpdW10cmFuc2l0IiwiYSI6ImNqc2R4cGExZTBidDQ0OXBsa2s5Nmo1eGwifQ.9hsJuRJXnFcTc6RCNPWVFQ';

	var map = new mapboxgl.Map({
		container: 'map',
		style: 'mapbox://styles/mapbox/light-v10',
		center: [-122.3, 38.4],
		zoom: 8
	});

	fetch(endpoint)
		.then(response => response.json())
		.then(data => {
			console.log(data);
			data.forEach(landmark => {
				var marker = new mapboxgl.Marker()
					.setLngLat(landmark.geometry.coordinates) // Get landmark coordinates
					.setPopup(
						new mapboxgl.Popup({
							offset: 25
						}) // add popups
						.setHTML('<a href="' + landmark.permalink + '">' + landmark.name + '</a>') // Get landmark titles + permalinks and add to map popup
					)
					.addTo(map)
			});
		});
</script>