I am trying to get the users current position to show up in a map using maptiler, however I seem to be able to get the longitude and latitude to show up in text but not on the map... what am I not seeing or getting here? it shows the right location.... if only I could get it into the map!
<script>
//plug in coordinated generated my below code
var coordsArray = [];
var x = document.getElementById("map");
//generate coordinates to plug into map
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
//coordinates to put into map
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
//Creates the map object with the intended coordinates and sets zoom level to 14
var map = L.map('map').setView(coordsArray, 14);
//Creates the required WebGL metadata and chains it to the map object
var gl = L.mapboxGL({
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
accessToken: 'not-needed',
style: 'https://api.maptiler.com/maps/streets/style.json?key=qZjWTwtNTmBxDi3ZpTB5'
}).addTo(map);
//Creates the marker for the intended coordinates and chains it to the map object
var marker = L.marker(coordsArray).addTo(map);
</script> #map {
min-height:300px;
width:600px;
}<body>
<div class="main">
<p>Click on hte button to see where you are on a map!</p>
<button onclick="getLocation()">Show me where I am</button>
<div id="map"></div>
<p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
</div>
</body>