CODEWITHSUNDEEP
javascripthtmlgeolocationleaflet
Pedro
Pedro

Reputation: 7

Adding marker to user's location in leaflet

I'm pretty new to leaflet and just hit a brick wall with trying to get this marker to work.

I have the following code so far but when I check the console in my browser it throws up the error

Uncaught ReferenceError: position is not defined at mappage.html:153

mappage is the name of the html file.

    <div id="mapid"></div>

    <script>
        var mymap = L.map('mapid').setView([57.149860, -2.102930], 13);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(mymap);

        //var to capture user position
        var userPosition = position.coords.latitude + "," + position.coords.longitude;


        var marker = L.marker([userPosition]).addTo(mymap);
    <script>

I also used the following code in my js file to see if the geolocation api is working properly and it does correctly display all the requested details in the console log.

navigator.geolocation.getCurrentPosition(function (position) {
console.log(position);
console.log(position.coords.latitude)
console.log(position.coords.longitude)})

Upvotes: 0

Views: 1309

Answers (1)

Falke Design
Falke Design

Reputation: 11348

you have to set the marker in the getCurrentPosition function:

navigator.geolocation.getCurrentPosition(function (position) {
console.log(position);
console.log(position.coords.latitude)
console.log(position.coords.longitude)
var marker = L.marker([position.coords.latitude,position.coords.longitude]).addTo(mymap);
})

Upvotes: 2

Related Questions