Have you ever wondered how websites get your location when shopping online and you choose to locate a store? Well websites use geolocation to find a store. Geolocation is "the process or technique of indentifying the geographical location of a person or device by means of digital information through the internet." In short terms, when you agree to give the website your location, it gives them access to your gps and they're able to find the closest store(s) to wherever you're at.
Now that you know what geolocation is, lets get to how websites and companies around the globe implement this into what's below.
Code is to place the map as a final example for users to refer to-->An Application programming interface also known as API, is "a set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or other service." In simple terms, an API lets you access the tools, procedures, etc. of another application so you can implement it into your own website or application.
Now that you have an idea on what API's are, lets get into this tutorial that will let you show a map with your users location on your website/application.
The first step you want to do is copy and past the code below into the head of your website. This code links you to maptiler code that lets you use the maptiler API.
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" />
Once you have that ready to go, you want to give the map a place to appear. If you don't do this you won't be able to see the map even if you code it correctly in your JS. For that, you want use an empty div (HTML) and give it an ID of map. You also want to add the additional code to give credit to maptiler. Use css to create an empty space for the map to fill it. Below is an example.
<div id="map"></div>
<p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>
<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
#map {
min-height: 250px;
width: 500px;}
Give the user an example of the empty space that the map will fill-->
Now that you have created an empty div and created space for the map to fill, you want to add a button that will run a function that will get the users location. A very important note when doing any sort of application or website that had to access the users location is since there can be a privacy concern, the website will always ask the user for permission. If the user denies access, the website won't run the function. This is done using an if else statement inside the function.
With JS, you want to create a function that has an if else statement inside and link it to the function that actually gets the users location. (Hint: w3 schools template)
Once you have that, you want to create the function that is link to the if else statement function. Below is an example.
function mapPosition(position) {
var coordsArray = [position.coords.latitude, position.coords.longitude];
var map = L.map('map').setView(coordsArray, 14);
var gl = L.mapboxGL({attribution: '
© MapTiler
© OpenStreetMap contributors',accessToken: 'not-needed',
style: 'https://api.maptiler.com/maps/streets/style.json?key=qZjWTwtNTmBxDi3ZpTB5'}).addTo(map);
var marker = L.marker(coordsArray).addTo(map);
}
Lets break down the code that's above. The way geolocation works is that it uses the longitude and latitude of the users position. The variable "coordsArray" stores the users longitude and latitude. They are being stored by using built-in JS, which position is a devices positon and coords is coordinates.So you're telling the computer to get the devices position using coordinates with longitude and latitude. The variable "map" zooms out to 14 and the variable "gl" sets the copyright etc. Finally, the "marker" variable sets a physical marker on the users location.
You're done! You have now successfully integrated a map using a users location into your webpage using the maptiler API! See above for fully working map.