javascript - How to get user geolocalisation on CodeIgniter 4?

I am developping a web application using Code Igniter 4. For some reason, I would like to get the user geolocalisation coordinates (latitude and longitude) in decimal angles.

I can define user coordinates manually (by entering numbers) but I would like to have the browser agent give them automatically when clicking on 'get_coords' button to make the user experience more friendly. Let's avoid users to have to go on Google Maps to get their coordinates and come back to my web app page.

I have tried some methods but I can't make it work. My analysis is that the position rendered by getLocation script function is not stored in the $_SESSION['USER_COORDS'] variable.

While running tests, I have got the"Permission denied by the user" error but the browser has never asked me to authorise geolocalisation use. The button does not do anything.

Both make_latitude and make_longitude functions are helper functions used to transform a coordinates string ('49.12345, 2.35468') in two decimal angles ('49.12345' and '2.35468').

In the rest of my application, I display error and success notifications by declaring session() FlashData in the controller before rendering the view :

    $this->data['session']->setFlashdata('msg', "My error message");
    $this->data['session']->setFlashdata('msg_type', "error");    
    return view ('myview', $this->data);
Copy code

Here is my code so far.

Controller file :

    // Get user position
    if($this->request->getVar('user-localise')){
        if($this->request->getVar('user-latitude') && $this->request->getVar('user-longitude')) {
            session()->set('USER_COORDS', $this->request->getVar('user-latitude') . ", " . $this->request->getVar('user-longitude'));
        } else {
            session()->set('USER_COORDS', null);
       }
   }
Copy code

View file :

<?= $this->extend('layouts/main.php');?>
<?= $this->section('content'); ?>
    <div class="mb-3">
        <?php if(session()->getFlashdata('msg')):?>
            <?php echo view("errors/alert",['session' => session()]);?>
        <?php endif;?>
    </div>

    <form method = "post">
        <div class = "cf-spar mb-3" style="margin-top:20px">
            <input type="hidden" name="user-localise" value="true">
            <button id="get_coords" onclick="getLocation()" class="btn btn-primary btn-md" style="margin-right:10px" type="submit"><?= lang("locale.user-position-me")?></button>
            <?php if($agent->isMobile()):?>
                <input type="text" id="user_lat" name="user-latitude" class="form-control" style="margin-right:10px" placeholder=<?= "'" . lang("locale.user-position-latitude-short") . "'" ?> value=<?= isset($_SESSION['USER_COORDS']) ? "'" . make_latitude($_SESSION['USER_COORDS']) . "'" : "" ?>>
                <input type="text" id="user_lon" name="user-longitude" class="form-control" style="margin-right:10px" placeholder=<?= "'" . lang("locale.user-position-longitude-short") . "'" ?> value=<?= isset($_SESSION['USER_COORDS']) ? "'" . make_longitude($_SESSION['USER_COORDS']) . "'" : "" ?>>
            <?php else:?>
                <input type="text" id="user_lat" name="user-latitude" class="form-control" style="margin-right:10px" placeholder=<?= "'" . lang("locale.user-position-latitude-long") . "'" ?> value=<?= isset($_SESSION['USER_COORDS']) ? "'" . make_latitude($_SESSION['USER_COORDS']) . "'" : "" ?>>
                <input type="text" id="user_lon" name="user-longitude" class="form-control" style="margin-right:10px" placeholder=<?= "'" . lang("locale.user-position-longitude-long") . "'" ?> value=<?= isset($_SESSION['USER_COORDS']) ? "'" . make_longitude($_SESSION['USER_COORDS']) . "'" : "" ?>>
            <?php endif;?>
            <button type="submit" name="save-user-coords" class = "btn btn-success btn-md"><?= lang("locale.save") ?></button>
        </div>
    </form>

    <script>
        var x = document.getElementById("get_coords");
        function getLocation(){
            if (navigator.geolocation){
                navigator.geolocation.getCurrentPosition(showPosition,showError);
            }
        }
        function showPosition(position){
            lat = position.coords.latitude;
            lon = position.coords.longitude;

            document.getElementById("user_lat").value = lat;
            document.getElementById("user_lon").value = lon;
        }

        function showError(error){
            switch(error.code){
                case error.PERMISSION_DENIED:
                    Session['msg']="Permission denied by user."
                    break;
                case error.POSITION_UNAVAILABLE:
                    Session['msg']="Position is unavailable."
                    break;
                case error.TIMEOUT:
                    Session['msg']="Timeout delay."
                    break;
                case error.UNKNOWN_ERROR:
                    Session['msg']="Unknown error."
                    break;
            }
            Session['msg_type'] = "error";
        }
    </script>
<?= $this->endSection('content'); ?>

Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.