Precise location data and powerful developer tools to change the way we navigate the world.
Documentation for MapboxCopy-paste the following <link> near the end of your pages under Nayzak Plugins CSS to enable it.
<link href="assets/plugins/mapbox/mapbox-gl.css" rel="stylesheet" type="text/css" media="all">
Copy-paste the following <script> near the end of your pages under Nayzak Javascript Plugins to enable it.
<script src="assets/plugins/mapbox/mapbox.gl.js"></script>
Finally, we need to initialize Mapbox in JS:
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'pk.eyJ1Ijoidmlja3lzaGFybWEiLCJhIjoiY2tyYnhhNDA1NGJodjJ4cXVmNDcxY2loNiJ9.t10tapf8tFJwCEjYbwNMqA';
const monument = [-76.0353, 36.8895];
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: monument,
zoom: 15
});
// create the popup
const popup = new mapboxgl.Popup({ offset: 50 }).setHTML('Netherlands Suite 101 Nayzak Street London REU UK');
// create DOM element for the marker
const el = document.createElement('div');
el.id = 'marker';
// create the marker
new mapboxgl.Marker(el)
.setLngLat(monument)
.setPopup(popup) // sets a popup on this marker
.addTo(map);
</script>
Now, we need to add basic Mapbox layout to our app:
<div id="map"></div>
<section id="map" data-aos="fade-up" data-aos-delay="50" data-aos-duration="800"> </section>