Using Mapbox GL JS to Showcase Latitude and Longitude Coordinates

I successfully added a feature to display the LAT LON readout of the cursor location on my website by following the tutorial provided in This Mapbox GL JS Tutorial

However, the output I receive is in this format:

{"lng:-74.949147382928,"lat":40.43829220439884}

In the tutorial example, they demonstrate this format. Is there a way to extract only the LAT and LON values? Ideally, I want the output to look like this:

-74.949147382928, 40.43829220439884

Although I am not very skilled with javascript, I attempted to use substring function to modify the output as follows. However, my attempt was unsuccessful. If possible, is there an easier method to achieve this? The experimental code snippet I tried is shown below, but it seems that using substring in this context does not work. In summary, I am seeking any solution that can deliver just the LAT and LON values.

Unsuccessful Code :

topleftmapbox.on('mousemove', function (e) {
    document.getElementById('info').innerHTML =
        JSON.stringify(e.lngLat.substring(6,17)); // aiming to extract only the values
});

Answer №1

To access the properties lng and lat of the lngLat object, you don't need to use JSON.stringify(). You can directly access them like this:

const info = document.getElementById('info');
info.textContent = `${e.lngLat.lng} ${e.lngLat.lat}`;

In this example, textContent is used instead of innerHtml, and JavaScript template literals (backticks) are utilized to format the string for display.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to format specific text as bold within an input text field?

I am attempting to make certain text bold within an input text field. However, I'm uncertain about how to achieve this because HTML code is not recognized inside a text field. Therefore, using <b> will not be effective. Is there a way to bold sp ...

Ways to transfer ID to a different HTML page

I have some Javascript code in a file named nextPage.js. When this code is executed by clicking on something, it should transfer the value of category_id to another page called reportlist.html. Can you please provide assistance with this? var base_url = " ...

When triggered, the onClick event will launch multiple Material-UI dialogs simultaneously

I'm working on creating a user-friendly employee directory using Material-UI's dialog modals. However, I'm facing an issue where clicking on any employee card opens all dialog boxes instead of just the one related to that specific employee. ...

The usage of $('').switchClass in IE8 may cause an error when the switched class includes a color property

I have the following unique css classes .swap-format{ background-color: green; } .swap-format1{ background-color: orange; } .swap-format2{ color: purple; } Using these classes, I want to create an animation on the given div <div id="swap-clas ...

Implementing dynamic ID routes in React Router using JSON data

As a beginner in React, I have been working hard to improve my skills every day. However, I am currently facing a challenge with creating dynamic routes using JSON characters (specifically from Dragon Ball Z). Although my routes are set up correctly, I wo ...

Steps to resolve the issue: The current experimental syntax 'classProperties' is not supported

I encountered an issue where the experimental syntax 'classProperties' is not supported when trying to run my react js application. My goal is to increment the value inside a <span> when a ` button is clicked. Below is the excerpt of my c ...

Passing Data from $http.get to Angular Controller Using a Shared Variable

One issue I'm facing is the inability to pass the content of a variable inside $http.get() to the outside scope, as it always returns undefined. I attempted using $rootScope, but that approach was not successful. controller('myControl', fu ...

Filter a div based on multiple conditions using JavaScript/jQuery

In my filtering system, I have two sections: place and attraction. When I select a place, the corresponding div is displayed according to the selected place. Similarly, when I select an attraction, only the attractions are filtered accordingly. <ul clas ...

Utilizing dynamic components in React JS

I'm a beginner in React JS and I'm facing an issue where I'm trying to call a React component from an HTML string that is being generated by another JavaScript class. However, the component is not rendering on the screen. class Form extends ...

Having trouble directing the focus on an HTML5 element using Javascript and Selenium webdriver

On my website, I have a specific structure in place: https://i.sstatic.net/bZhHvNlU.png Whenever the button with the ID addProfButton is clicked in the following manner: Using JavaScript: document.getElementById("addProfButton").click(); Usi ...

Create a function to produce a list of dates within two specified date ranges using JavaScript

Looking for assistance as a beginner in JavaScript. Can anyone guide me on how to generate a list of dates between dateA and dateB? For instance: dateA = 07/01/2013 dateB = 07/01/2014 Desired outcome: 07/01/2013, 07/02/2013, 07/03/2013, 07/04/2013...a ...

Effortless method to handle package.json configurations

Is there a better approach for seamlessly transitioning between using npm link and git, or another solution that caters well to both front end and back end developers? The dilemma I'm facing revolves around developing a website that utilizes multiple ...

Error: The specified function in the schema is not valid for the current operation mode

I'm facing an issue with validating a material ui form using Formik and Yup. The error keeps popping up. This is the schema I imported from another file: export const validationSchema = Yup.object({ email: Yup.string() .email('Invalid Ema ...

Modifying the property value in a child component using the parent component in VueJS

Hey there, I'm facing an issue where I need to update a prop in my child component when the parent component changes the value. However, I'm attempting to do this in a unique way and running into a problem where the child prop is not being update ...

Ways to create a table with columns from various fields obtained through an API call

Looking to preprocess data received from an API, the raw data is structured as follows: Desiring to dynamically generate a table with columns based on the fields task_name and saved_answers. It's important to note that saved_answers might contain var ...

Use hyphens instead of spaces in angular js data binding

<form role="form" method="POST" action="{{ url('/roles/save') }}" data-ng-app=""> <div class="form-group"> <label>Page-Title:</label> <input type="text" required value="" data-ng-model="title" name="pag ...

A helpful guide on presenting chart data in HTML table format using Chart.js

Is there a way to convert chart data into an HTML table upon button click using Chart.js? I have successfully created a line chart with Chart.js, with the x-axis representing colors and the y-axis representing votes and points. Here is a link to a workin ...

Guide to implementing a variable delay or sleep function in JQuery within a for loop

I've noticed that many people have asked similar questions, but none of the solutions provided seem to work in my specific case. My goal is to incorporate a delay within a for loop with varying time lengths. These time lengths are retrieved from an a ...

Encountered an issue with trying to access the 'map' property of an undefined value while using Express and VueJS

Currently, I am in the process of developing a fullstack application utilizing Express, VueJS, and Mongoose. The app functions as a news feed platform. A couple of days ago, I encountered an error which was resolved with the help of your guidance. However, ...

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...