How to display weather icons using accuweather api? - weather-api

In Weather project I have all the information required to display current and forecast weather data from Accuweather API, but, the main reuirement is to display weather icons corresponding to weather condtion which is displayed as WeatherIcon number in console. How to extract that icon?
Weather api when consoled
console.log('DATA IN HOURLYFORECAST', data)
DateTime: "2020-02-03T20:00:00+05:30"
EpochDateTime: 1580740200
WeatherIcon: 36
IconPhrase: "Intermittent clouds"
HasPrecipitation: false
IsDaylight: false
Temperature: {Value: 76, Unit: "F", UnitType: 18}
RealFeelTemperature: {Value: 76, Unit: "F", UnitType: 18}
As seen above for the weather icon api link is not given, only digit is shown. Any possible solution?

They have clearly mentioned that
Note: Please do not link directly to these images from your applications. The URLs can and will change.
reference - https://apidev.accuweather.com/developers/weatherIcons
Current possible solution is to add images locally into your application, map them with icon number (coming from accuweather api response) and show onto the application UI

Related

How to generate chart/graph on node.js as an html file

I need to render a chart as a .html file on the node.js side.
Are there any libraries which can do that?
I was doing some research, and every one of them is saving it as a .png file.
What I want to achieve is that I want to allow users to hover on chart etc. that's why I cannot use .png file
You can use highcharts-export-server to generate a chart in SVG format, but the case with interaction is complicated - please check this thread: https://github.com/highcharts/highcharts/issues/7058
However, I think the amount of data that you want to show on a chart is not so huge. Highcharts provide boost module and dataGrouping in Highstock, which will effectively improve performance:
Highcharts.chart('container', {
boost: {
seriesThreshold: 1
},
series: [...]
});
Live demo: http://jsfiddle.net/BlackLabel/mhgraqbs/

Can you get the high resolution cover photo for your page through the Graph API?

When I get the cover photo for my page, for example (with Node.js):
FB.api(pageId, { fields: cover } )
The resulting JSON has a source property which is an image, but it's 720 by 405 and has JPG artifacts. When I inspect the actual Facebook page in the browser it uses a clearer 1920 by 1080 image.
How do I get that with the API?
One of the properties on the cover is an id. You can fetch this endpoint with the images field to return an array of sizes for that image, from 1080 height down to 130 (as of this writing).
FB.api(coverId, { fields: images } )
Unfortunately that's 2 requests to get 1 image - if anyone knows a better way, please let me know.

Displaying user information on Google Map on click of the location using node js, express and mongodb

I am doing a small project which takes user information like name, age, location etc and display it on the Google map on click of that location.
I have completed the first part i.e., taking user information using node js, express and Mongo db.
I am not understanding how to go to next part and display that information on Google maps on click of that location.
Any tutorial or pointers would be helpful on how to go forward. Thanks.
If you are asking how to display markers on webpage you might want to check google documentation:
To create a marker on map documentation is here, also if you
want to add a custom marker image sample is here.
To display the information on the google maps on marker sample
here.
I'm assuming you are storing the marker information in your DB, so you can retrieve it from there, just create a schema for marker and markerinfo.
Way to add a marker to map with onClick event:
map.addListener('click', function(e) {
placeMarker(e.latLng, map);
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position, // {lat: -100.000, lng: 100.000};
map: map
});
map.panTo(position);
}
Getting marker from express api with jQuery:
$.getJSON("/api/marker/1", function(json) {
placeMarker(json,map);
});
Ping me if you have questions;
Good luck;

Apostrophe CMS slideshow singleton not accessible

I'm attempting to add an image to a page type using a singleton set to the slideshow widgetType
The interface is working fine (can upload image, limits uploads to the set variable), but I cannot access the object in the templates
I am logging the page object with the below script in the page template, every other custom field works fine, just not the slideshow widget.
var data = {{ page | json }};
console.log(data);
Here is what is set in app.js
project: {
extend: 'apostrophe-fancy-page',
name: 'project',
label: 'Project',
addFields: [
{
name: 'thumb',
label: 'Thumbnail',
type: 'singleton',
widgetType: 'slideshow',
options: {
limit: 1
}
}
]
}
Any advice?
Hmm. You don't specify, but my suspicion is that you're trying to access the thumbnail from the template for a different page that has access to it as related-page information, e.g. page.ancestors or page.children. If the singleton were being rendered on the template for the page itself, you would have no trouble with this.
The thing about related-page information is that for performance reasons, Apostrophe limits how much information it includes in those arrays.
However, you can specify that you want more information. Here is an example from the pages property of the app.js file of one of our projects:
pages: {
// other config like page types goes here, then...
ancestorOptions: {
children: true,
areas: [ 'thumbnail' ]
},
descendantOptions: {
depth: 2,
areas: [ 'thumbnail' ]
}
}
Here we are enabling:
Include a .children array for each ancestor in page.ancestors, for accordion nav
Include the area called thumbnail for each ancestor
Include the area called thumbnail for each child of the current page (page.children)
Also include grandchildren page.children[0].children for dropdown nav
When you load more data, the price you pay is a little more time. This is a good compromise setup when you need a lot but you don't want to fetch thousands of pages and "hydrate" all of their widgets by fetching even more data.
If I'm mistaken and you are doing this on the page template for the page itself and it still doesn't work, please provide some examples and I can review those.
(I am one of the lead developers on Apostrophe. Apologies for not seeing this question sooner. StackOverflow is a good place for it and we'll be monitoring more closely in the future now that 2.0 stable has been released.)

Google Visualization API SETBACKS in financial applications

I did one small application for myself using Google Visualization API (Org Chart). I like it and now i feel this API help me to address one of the business use case. Please suggest me on following questions.
1. Is it advisable to have these Google Visualization API in financial applications.
2. Google Visualization API need any licensing for commercial usage purpose.
3. Since it is not an open source framework, i am unable to track or assume how Google Visualization API is using my application data to render the chart.
a) Will it store the data that is being passed from my site?
b) How secure my data if i pass key values to org charts to prepare and render the chart on my website page.
I sincerely request you to provide your valuable suggestions.
Sample Example (not actual code):
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
function drawChart(dataValues) {
data = new google.visualization.DataTable();
chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
data.addColumn('string', 'PlanName');
data.addColumn('string', 'PaymentAmount');
data.addColumn('string', 'ValidationId');
data.addColumn('string', 'AccountName');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([{ v: dataValues[i].PlanName, f: dataValues[i].Name }, dataValues[i].AccountName]);
}
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {
allowHtml: true, allowCollapse: true, size: 'medium', explorer: {
maxZoomOut: 100,
keepInBounds: true
}
});
google.visualization.events.addListener(chart, 'select', selectHandler);
}
The Google Visualization API is fine for use within financial applications and is completely free, according to the home page.
And as stated in the Data Policy at the bottom of most every example...
All code and data are processed and rendered in the browser. No data is sent to any server.
So your data is secure, from the standpoint it will not be exposed by the Google Visualization API.
The terms of service apply to all Google APIs, not just the Visualization API...

Resources