Update WeatherWidgetContents.js

openweathermap.org/WeatherWidgetContents.js

+//this component will be called for DETAIL_SUMMARY_WIDGET registration.
 var Contacts_Component_WeatherWidgetContents = VTAP.Component.Core.extend({
     data() {
         weather_data : ''
-    },	
+    },
+    //when the Component html is mounted on DOM this function will be called.
     created() {
+        //Request to get current record (if you have opened detail page of a record
         VTAP.Detail.Record().then( (record) => {
-            //fetch weather details from openweathermap 
+            //this will call get_weather custom api we added from Api Designer.
             VTAP.CustomApi.Get('get_weather', {'city' : record.mailingcity}, 
                 (error, response) => {
                 if(response && response.content) {
                     this.weather_data = JSON.parse(response.content);
+                    setTimeout(() => {
+                        this.showMap();
+                    }, 2000);
                 }
             });
         });
     },
     methods : {
+        //shows open street map based on the lat lng received from openweather api
+        showMap() {
+            var element = document.getElementById('osm-map');
+            var map = L.map(element);
+            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+            // set's GPS coordinates.
+            var target = L.latLng(this.data.coord.lat, this.data.coord.lon);
+            map.setView(target, 13);
+            L.marker(target).addTo(map);
+        },
         getDisplayTime(timestamp) {
             let d = new Date(timestamp * 1000).toISOString().slice(0, 19).replace('T', ' ').split(' ');
             return d[1];
@@ -22,6 +40,7 @@ var Contacts_Component_WeatherWidgetContents = VTAP.Component.Core.extend({
             return Math.round(temp - 273.15);
         }
     },
+    //html rendered in summary widget
     template : 
         `<div class='p-2 bg-white'>
             <div class='p-2 d-flex align-items-center justify-content-center'><h4>Weather details</h4></div>