This little article will show you how to build a simple web page that will automatically locate your position, paint it on a map, and show you the text address corresponding to the map’s coordinates.

First of all, Let’s define some terms:

Geolocation identifies or estimates an object’s real-world geographic location, such as a building or mobile phone.

**Geocoding **is the process of taking input text, such as an address or the name of a place, and returning a latitude/longitude location on the Earth’s surface for that place.

Reverse-Geocoding is the process of converting addresses (like “ 10 Downing Stree**”**) into his latitude and longitude geographic coordinates, which you can use to place markers on a map or position the map.

Having clarified the previous terms, we will need the following to build our location page:

• MapBox for maps. It would help if you had a free API token to use his API.
• Basic JavaScript knowledge.
• Jquery and JqueryUI to display a dialog with the selected address. You can use an “alert” if you do not want to use Jquery.
• We are going to use a JS online editor for trying it (optional). In the references at the end of the article, I leave a link to the web app created in this tutorial.
• We are going to use LitElement to build a Web Component. LitElement is a simple implementation that follows the Web Components standards specification.

#javascript #mapbox #web-development #geolocation #web-components