documentation updated 3

Author: Codehackerone

public/js/allgarage.js

@@ -1,6 +1,8 @@
 async function getSlotInfo(key) {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = async function () {
+        //readyState == 4 means the request is done.
+        //status == 200 means the request is successful.
         if (this.readyState == 4 && this.status == 200) {
             document.getElementById(key).innerHTML = this.responseText;
         }

public/js/clustermap.js

@@ -7,9 +7,12 @@ const map = new mapboxgl.Map({
     zoom: 3,
 });
 
+// Add zoom and rotation controls to the map.
 map.addControl(new mapboxgl.NavigationControl());
 
 map.on('load', function () {
+    // Add a new source from our GeoJSON data and set the
+    // 'cluster' option to true. GL-JS will add the point_count property to your source data.
     map.addSource('garages', {
         type: 'geojson',
         data: garages,
@@ -18,11 +21,13 @@ map.on('load', function () {
         clusterRadius: 50,
     });
 
+    // Add a cluster layer. This layer will cluster all point features in the source layer
     map.addLayer({
         id: 'clusters',
         type: 'circle',
         source: 'garages',
         filter: ['has', 'point_count'],
+        // cluster style configurations
         paint: {
             'circle-color': [
                 'step',
@@ -45,6 +50,7 @@ map.on('load', function () {
         },
     });
 
+    // Add a layer for the clusters' count labels
     map.addLayer({
         id: 'cluster-count',
         type: 'symbol',
@@ -57,6 +63,7 @@ map.on('load', function () {
         },
     });
 
+    // Add a layer for the unclustered point features.
     map.addLayer({
         id: 'unclustered-point',
         type: 'circle',
@@ -69,6 +76,8 @@ map.on('load', function () {
             'circle-stroke-color': '#fff',
         },
     });
+
+    // inspect a cluster on click on clustered point
     map.on('click', 'clusters', function (e) {
         const features = map.queryRenderedFeatures(e.point, {
             layers: ['clusters'],
@@ -86,19 +95,23 @@ map.on('load', function () {
             }
         );
     });
+
+    // inspect a cluster on click on an unclustered point
     map.on('click', 'unclustered-point', function (e) {
         const { popUpMarkup } = e.features[0].properties;
         const coordinates = e.features[0].geometry.coordinates.slice();
         while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
             coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
         }
 
+        // Populate the popup and set its coordinates
         new mapboxgl.Popup()
             .setLngLat(coordinates)
             .setHTML(popUpMarkup)
             .addTo(map);
     });
 
+    // Change the cursor to a pointer when the mouse is over the places layer.
     map.on('mouseenter', 'clusters', function () {
         map.getCanvas().style.cursor = 'pointer';
     });

public/js/viewgarage.js

@@ -1,11 +1,15 @@
 var garage = JSON.parse(garage_raw);
 mapboxgl.accessToken = mapboxtoken;
+
+// Initialize the map
 var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/streets-v11',
     center: garage.geometry.coordinates,
     zoom: 9,
 });
+
+// Add garage marker to map
 var marker = new mapboxgl.Marker()
     .setLngLat(garage.geometry.coordinates)
     .setPopup(