Search code examples
javascriptgeolocation

Javascript use onclick and geolocation to retrieve current location

I have to add a click handler to the button provided that will retrieve the users current location using the geolocation api. Here's my code, I'm trying to use geolocation to set the current location of the user to the map but the button for some reasons does not work. Can anyone point out what I'm doing wrong and help me out?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <style>
        #mapid { height: 600px; }
    </style>

    <script>
        const Mapping = {
            map : null,
            initializeMap : () => {
                Mapping.map = L.map('mapid').setView([51.505, -0.09], 13);
                L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                    subdomains: ['a','b','c']
                }).addTo( Mapping.map );
            },
            resetLocation : ({lat,lon}) => {
                Mapping.map.setView([lat,lon], 13);
            }
        }

        window.onload = () => {
            Mapping.initializeMap();

            userCode();
        }

        function userCode() {
            // JS CODE START
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    let pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    Mapping.setPosition(pos);
                    Mapping.open(Mapping.map);
                    Mapping.map.setPosition(pos);
                })
                }

            // JS CODE END

        }

    </script>
</head>
<body>

<!-- HTML CODE GOES HERE-->
<button onclick="userCode()">Get Location</button>

<div id="mapid" style="width: 600px; height: 400px;"></div>

</body>
</html>

Solution

  • Use

    Mapping.resetLocation({lat:pos.lat,lon:pos.lng});

    Instead of

    Mapping.setPosition(pos);