Extract latitude and longitude data using Mapbox's autocomplete feature

Question

Extract latitude and longitude data using Mapbox's autocomplete feature

Currently, I have integrated Mapbox with autocomplete in a Vue component:

<template>
    <div>
        <div id='geocoder'></div>
    </div>
</template>

<script>
    import mapboxgl from 'mapbox-gl';

    export default {
        data() {
            return {
                map: null
            }
        },

        created() {
            Event.$on('map-created', (map) => {
                this.map = map;

                let geocoder = new MapboxGeocoder({
                    accessToken: mapboxgl.accessToken,
                });

                document.getElementById('geocoder').appendChild(geocoder.onAdd(this.map));
            });
        }
    }
</script>

The current functionality is satisfactory, but I am facing an issue. How can I retrieve the longitude and latitude when a user clicks on a result?

Is there a specific event that I should listen for? I couldn't find relevant information in the documentation.

Thanks in advance for your help!

javascript vue.js mapbox-gl-js

Answer 1

Answer №1

If you're looking to retrieve the longitude and latitude of a selected location from an autocomplete feature, the following code snippet will do just that:

var geolocation = new GoogleGeocoder({
    apiKey: googleMapsAPIKey,
    type: 'location',
    googleMaps: google.maps
});

//Wait for the result event to be triggered by the geocoder.
//'result' event occurs when a user selects a location
geolocation.on('result', function(event) {
    var coordinates = event.result.coordinates;
});

Answer 2

If you're looking to retrieve the longitude and latitude of a selected location from an autocomplete feature, the following code snippet will do just that:

var geolocation = new GoogleGeocoder({
    apiKey: googleMapsAPIKey,
    type: 'location',
    googleMaps: google.maps
});

//Wait for the result event to be triggered by the geocoder.
//'result' event occurs when a user selects a location
geolocation.on('result', function(event) {
    var coordinates = event.result.coordinates;
});

Answer 3

Answer №2

Give this a shot:

this.map.on('click', '[YOUR LAYER ID]', (event) => {

    console.log(event.features[0].geometry.coordinates);

});

This little trick has been really handy for me when I'm working with my custom layers.

Answer 4

Give this a shot:

this.map.on('click', '[YOUR LAYER ID]', (event) => {

    console.log(event.features[0].geometry.coordinates);

});

This little trick has been really handy for me when I'm working with my custom layers.

Answer 5

Answer №3

Implement Autocomplete Feature with Mapbox API

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Add Autocomplete with Geocoder</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

    <script src="https://code.jquery.com/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font: 16px Arial;
        }

        /* Styling for autocomplete input field */
        .autocomplete {
            position: relative;
            display: inline-block;
        }

        input {
            border: 1px solid transparent;
            background-color: #f1f1f1;
            padding: 10px;
            font-size: 16px;
        }

        input[type=text] {
            background-color: #f1f1f1;
            width: 100%;
        }

        input[type=submit] {
            background-color: DodgerBlue;
            color: #fff;
            cursor: pointer;
        }

        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
        }

        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
        }

        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

        .autocomplete-active {
            background-color: DodgerBlue !important;
            color: #ffffff;
        }
    </style>
</head>
<body>

<h2>Autocomplete Example</h2>

<p>Start typing to see suggestions:</p>

<form autocomplete="off" action="/action_page.php">
    <div class="autocomplete" style="width:300px;">
        <input id="myInput" type="text" name="myCountry" placeholder="Enter Country Name">
    </div>
    <input type="submit">
</form>

<script>

    var geocodingClient = mapboxSdk({accessToken: 'ADD_YOUR_ACCESS_TOKEN_HERE'});

    function autocompleteSuggestionMapBoxAPI(inputParams, callback) {
        geocodingClient.geocoding.forwardGeocode({
            query: inputParams,
            countries: ['In'],
            autocomplete: true,
            limit: 5,
        })
        .send()
        .then(response => {
            const match = response.body;
            callback(match);
        });
    }

    function autocompleteInputBox(inp) {
        // Functionality for autocomplete
        var currentFocus;
        inp.addEventListener("input", function (e) {
            var a, b, i, val = this.value;
            closeAllLists();
            if (!val) {
                return false;
            }
            currentFocus = -1;
            a = document.createElement("DIV");
            a.setAttribute("id", this.id + "autocomplete-list");
            a.setAttribute("class", "autocomplete-items");
            this.parentNode.appendChild(a);

            // Call Mapbox API endpoint for suggestions
            autocompleteSuggestionMapBoxAPI($('#myInput').val(), function (results) {
                results.features.forEach(function (key) {
                    b = document.createElement("DIV");
                    b.innerHTML = "<strong>" + key.place_name.substr(0, val.length) + "</strong>";
                    b.innerHTML += key.place_name.substr(val.length);
                    b.innerHTML += "<input type='hidden' data-lat='" + key.geometry.coordinates[1] + "' data-lng='" + key.geometry.coordinates[0] + "'  value='" + key.place_name + "'>";
                    b.addEventListener("click", function (e) {
                        let lat = $(this).find('input').attr('data-lat');
                        let long = $(this).find('input').attr('data-lng');
                        inp.value = $(this).find('input').val();
                        $(inp).attr('data-lat', lat);
                        $(inp).attr('data-lng', long);
                        closeAllLists();
                    });
                    a.appendChild(b);
                });
            })
        });

        // Keyboard functionality
        inp.addEventListener("keydown", function (e) {
            var x = document.getElementById(this.id + "autocomplete-list");
            if (x) x = x.getElementsByTagName("div");
            if (e.keyCode == 40) {
                currentFocus++;
                addActive(x);
            } else if (e.keyCode == 38) { 
                currentFocus--;
                addActive(x);
            } else if (e.keyCode == 13) {
                e.preventDefault();
                if (currentFocus > -1) {
                    if (x) x[currentFocus].click();
                }
            }
        });

        function addActive(x) {
            if (!x) return false;
            removeActive(x);
            if (currentFocus >= x.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = (x.length - 1);
            x[currentFocus].classList.add("autocomplete-active");
        }

        function removeActive(x) {
            for (var i = 0; i < x.length; i++) {
                x[i].classList.remove("autocomplete-active");
            }
        }

        function closeAllLists(elmnt) {
            var x = document.getElementsByClassName("autocomplete-items");
            for (var i = 0; i < x.length; i++) {
                if (elmnt != x[i] && elmnt != inp) {
                    x[i].parentNode.removeChild(x[i]);
                }
            }
        }

        document.addEventListener("click", function (e) {
            closeAllLists(e.target);
        });
    }

    autocompleteInputBox(document.getElementById("myInput"));
</script>


</body>
</html>

Answer 6

Implement Autocomplete Feature with Mapbox API

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Add Autocomplete with Geocoder</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

    <script src="https://code.jquery.com/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font: 16px Arial;
        }

        /* Styling for autocomplete input field */
        .autocomplete {
            position: relative;
            display: inline-block;
        }

        input {
            border: 1px solid transparent;
            background-color: #f1f1f1;
            padding: 10px;
            font-size: 16px;
        }

        input[type=text] {
            background-color: #f1f1f1;
            width: 100%;
        }

        input[type=submit] {
            background-color: DodgerBlue;
            color: #fff;
            cursor: pointer;
        }

        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
        }

        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
        }

        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

        .autocomplete-active {
            background-color: DodgerBlue !important;
            color: #ffffff;
        }
    </style>
</head>
<body>

<h2>Autocomplete Example</h2>

<p>Start typing to see suggestions:</p>

<form autocomplete="off" action="/action_page.php">
    <div class="autocomplete" style="width:300px;">
        <input id="myInput" type="text" name="myCountry" placeholder="Enter Country Name">
    </div>
    <input type="submit">
</form>

<script>

    var geocodingClient = mapboxSdk({accessToken: 'ADD_YOUR_ACCESS_TOKEN_HERE'});

    function autocompleteSuggestionMapBoxAPI(inputParams, callback) {
        geocodingClient.geocoding.forwardGeocode({
            query: inputParams,
            countries: ['In'],
            autocomplete: true,
            limit: 5,
        })
        .send()
        .then(response => {
            const match = response.body;
            callback(match);
        });
    }

    function autocompleteInputBox(inp) {
        // Functionality for autocomplete
        var currentFocus;
        inp.addEventListener("input", function (e) {
            var a, b, i, val = this.value;
            closeAllLists();
            if (!val) {
                return false;
            }
            currentFocus = -1;
            a = document.createElement("DIV");
            a.setAttribute("id", this.id + "autocomplete-list");
            a.setAttribute("class", "autocomplete-items");
            this.parentNode.appendChild(a);

            // Call Mapbox API endpoint for suggestions
            autocompleteSuggestionMapBoxAPI($('#myInput').val(), function (results) {
                results.features.forEach(function (key) {
                    b = document.createElement("DIV");
                    b.innerHTML = "<strong>" + key.place_name.substr(0, val.length) + "</strong>";
                    b.innerHTML += key.place_name.substr(val.length);
                    b.innerHTML += "<input type='hidden' data-lat='" + key.geometry.coordinates[1] + "' data-lng='" + key.geometry.coordinates[0] + "'  value='" + key.place_name + "'>";
                    b.addEventListener("click", function (e) {
                        let lat = $(this).find('input').attr('data-lat');
                        let long = $(this).find('input').attr('data-lng');
                        inp.value = $(this).find('input').val();
                        $(inp).attr('data-lat', lat);
                        $(inp).attr('data-lng', long);
                        closeAllLists();
                    });
                    a.appendChild(b);
                });
            })
        });

        // Keyboard functionality
        inp.addEventListener("keydown", function (e) {
            var x = document.getElementById(this.id + "autocomplete-list");
            if (x) x = x.getElementsByTagName("div");
            if (e.keyCode == 40) {
                currentFocus++;
                addActive(x);
            } else if (e.keyCode == 38) { 
                currentFocus--;
                addActive(x);
            } else if (e.keyCode == 13) {
                e.preventDefault();
                if (currentFocus > -1) {
                    if (x) x[currentFocus].click();
                }
            }
        });

        function addActive(x) {
            if (!x) return false;
            removeActive(x);
            if (currentFocus >= x.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = (x.length - 1);
            x[currentFocus].classList.add("autocomplete-active");
        }

        function removeActive(x) {
            for (var i = 0; i < x.length; i++) {
                x[i].classList.remove("autocomplete-active");
            }
        }

        function closeAllLists(elmnt) {
            var x = document.getElementsByClassName("autocomplete-items");
            for (var i = 0; i < x.length; i++) {
                if (elmnt != x[i] && elmnt != inp) {
                    x[i].parentNode.removeChild(x[i]);
                }
            }
        }

        document.addEventListener("click", function (e) {
            closeAllLists(e.target);
        });
    }

    autocompleteInputBox(document.getElementById("myInput"));
</script>


</body>
</html>

Extract latitude and longitude data using Mapbox's autocomplete feature

Answer №1

Answer №2

Answer №3

Similar questions

When an HTML input button within a table fails to trigger any jQuery function upon being clicked

Vue.js - storing information within a component instead of utilizing a dynamically created modal

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

Generate a custom website using React to display multiple copies of a single item dynamically

Combining arrays based on a key in Node.js

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

Deciphering unconventional JSON formats

Learn how to pass data as props to child components in Vue3

Updating data scope in AngularJS using $http request not functioning properly

Combining the keys of two objects in JSON

Encountering difficulties importing in Typescript and ts-node node scripts, regardless of configuration or package type

How can I substitute a specific capture group instead of the entire match using a regular expression?

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

Issue detected with Bundler: Configuration object is not valid. The initialization of Webpack used a configuration object that does not align with the API schema

Identify modifications in the input and at the same time update another input

Can a div with float: left; be centered?

A sleek Javascript gallery similar to fancybox

What steps do I need to take to link my form with Ajax and successfully submit it?

In Reactjs, you can prevent users from selecting future dates and times by modifying the KeyboardDateTimePicker component

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the