Added popup on click feature

Removed direction api

index.html

@@ -31,18 +31,27 @@
     hash: true
 })
 
+map.on('click', function(e) {
+    var features = map.queryRenderedFeatures(e.point, { filter: ["has", "name"]});
+    if (features.length) {
+        var feature = features[0];
+        new mapboxgl.Popup({ closeOnClick: true })
+            .setLngLat(e.lngLat)
+            .setHTML('<p>' + feature.properties.name + '</p>')
+            .addTo(map);
+    }
+});
+
 var popup = new mapboxgl.Popup({closeOnClick: false})
-    .setLngLat([76.94,13.32])
-    .setHTML('<h1>Welcome to Gubbi!</h1><p>Close this message to continue.</p>')
-    .addTo(map);
+    .setLngLat([76.94, 13.32])
+     .setHTML('<h1>Welcome to Gubbi!</h1><p>Close this message to continue.</p>')
+     .addTo(map);
 
 map.addControl(new mapboxgl.Geocoder());
-map.addControl(new mapboxgl.Directions());
+// map.addControl(new mapboxgl.Directions());
 map.addControl(new mapboxgl.Geolocate({ position: 'bottom-right'}));
 map.addControl(new mapboxgl.Navigation({ position: 'top-right' }));
 
-
-
 </script>
 
 </body>