Last active
March 8, 2023 15:20
-
-
Save asathoor/ca529f70e1018171612cf5c724d50031 to your computer and use it in GitHub Desktop.
Where am I? Mapbox tutorial - geolocation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet"> | |
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script> | |
<div> | |
<style> | |
#map { height: 500px; width: 100%; } | |
#marker { | |
background-image: url('https://thoth.dk/wp-content/uploads/2023/01/astronaut-wp-1-150x150.jpeg'); | |
background-size: cover; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
cursor: pointer; | |
} | |
.mapboxgl-popup { | |
max-width: 200px; | |
} | |
</style> | |
<h1>Lost at your Festival?</h1> | |
<p>Here you are ....</p> | |
<button id="myBtn">Click, wait a moment and see</button> | |
<div id="map"></div> | |
<script> | |
let monument; | |
// get position | |
var x = document.getElementById("demo"); | |
$('#myBtn').click(function(){ | |
//alert('click detected') | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(showPosition); | |
} else { | |
console.log('error, your browser does not support geolocation') | |
} | |
}); | |
function showPosition(position) { | |
let lat = position.coords.latitude; | |
let lon = position.coords.longitude; | |
console.log(lat + " " + lon); // :-) | |
monument = [lon,lat]; | |
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNhdGhvb3IiLCJhIjoiY2oyd3hlbzU3MDA5NzJxbm9iMjczanJndCJ9.HahDB7Z1rrD5THIYQh6t4g'; | |
const map = new mapboxgl.Map({ | |
container: 'map', | |
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio | |
style: 'mapbox://styles/mapbox/light-v11', | |
center: monument, | |
zoom: 15 | |
}); | |
// create the popup | |
const popup = new mapboxgl.Popup({ offset: 25 }).setText( | |
'You are here!' | |
); | |
// 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> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- wp:heading {"level":3} --> | |
<h3>Are you totally lost?</h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph --> | |
<p>Here is your position!</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:html --> | |
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet"> | |
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script> | |
<div> | |
<style> | |
#map { height: 500px; width: 100%; } | |
#marker { | |
background-image: url('https://thoth.dk/wp-content/uploads/2023/01/astronaut-wp-1-150x150.jpeg'); | |
background-size: cover; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
cursor: pointer; | |
} | |
.mapboxgl-popup { | |
max-width: 200px; | |
} | |
</style> | |
<h1>Lost at your Festival?</h1> | |
<p>Here you are ....</p> | |
<button id="myBtn">Click, wait a moment and see</button> | |
<div id="map"></div> | |
<script> | |
let monument; | |
// get position | |
var x = document.getElementById("demo"); | |
$('#myBtn').click(function(){ | |
//alert('click detected') | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(showPosition); | |
} else { | |
console.log('error, your browser does not support geolocation') | |
} | |
}); | |
function showPosition(position) { | |
let lat = position.coords.latitude; | |
let lon = position.coords.longitude; | |
console.log(lat + " " + lon); // :-) | |
monument = [lon,lat]; | |
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNhdGhvb3IiLCJhIjoiY2oyd3hlbzU3MDA5NzJxbm9iMjczanJndCJ9.HahDB7Z1rrD5THIYQh6t4g'; | |
const map = new mapboxgl.Map({ | |
container: 'map', | |
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio | |
style: 'mapbox://styles/mapbox/light-v11', | |
center: monument, | |
zoom: 15 | |
}); | |
// create the popup | |
const popup = new mapboxgl.Popup({ offset: 25 }).setText( | |
'You are here!' | |
); | |
// 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> | |
</div> | |
<!-- /wp:html --> | |
<!-- wp:buttons --> | |
<div class="wp-block-buttons"><!-- wp:button --> | |
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://gist.github.com/asathoor/ca529f70e1018171612cf5c724d50031" target="_blank" rel="noreferrer noopener">Get the code!</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --> |
The files:
- where.html : the code for the Custom HTML Block
- WordPress Markup : the code as a WP pattern.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this code to a page or post in WordPress.