diff --git a/openweathermap.org/WeatherWidgetContents.js b/openweathermap.org/WeatherWidgetContents.js index 62cb8ee7d0eeab653055485ae136606e538492bb..88ba32a2bd48eb28969367788e411e18a290f507 100644 --- a/openweathermap.org/WeatherWidgetContents.js +++ b/openweathermap.org/WeatherWidgetContents.js @@ -1,19 +1,37 @@ +//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: '© OpenStreetMap 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 : `