Skip to content

Instantly share code, notes, and snippets.

@oelna
Last active April 2, 2020 22:14
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save oelna/be7e41e281450545968a3a3c5f1d185e to your computer and use it in GitHub Desktop.
A simple Mapbox GL JS map with a single marker, suitable for small business websites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Map</title>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css" />
<style>
#map-container {
width: 100%;
height: 50vh;
}
.marker {
/* ideally use an image where the center is the point of the icon */
background-image: url('https://i.imgur.com/ltaPoM8.png');
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
width: 5rem;
height: 5rem;
cursor: pointer;
}
</style>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js" defer></script>
</head>
<body>
<div id="map-container"></div>
<script>
window.addEventListener('DOMContentLoaded', function () {
// add your own access token here!
mapboxgl.accessToken = 'pk.eyJ1Ijoib2VsbmEiLCJhIjoiTUNWYlc3RSJ9.BzwUgA9dNudDlZ7T2EHRgg';
const map = new mapboxgl.Map({
'container': 'map-container',
'style': 'mapbox://styles/mapbox/streets-v11',
'center': [8.462075, 49.491682], // [lng, lat]
'zoom': 14
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function () {
// add a marker
const marker = document.createElement('div');
marker.classList.add('marker');
new mapboxgl.Marker(marker).setLngLat([8.462, 49.4917]).addTo(map);
});
});
</script>
</body>
</html>
@oelna
Copy link
Author

oelna commented Apr 2, 2020

I always have to piece this together. Markers in Mapbox are not intuitive at all. I hope if I need to put a map somewhere in the future, I will find this post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment