How to modify weather icons within API?

HTML & CSS
1

I am testing new icons based on API for a weather conditions. How to replace default icons for meteorological conditions?

Data feed source:$url = “https://api.openweathermap.org/data/3.0/onecall?lat=$lat&lon=$lon&units=metric&appid=$apiKey”;

            <div class='image1'>
                <img src='https://openweathermap.org/img/wn/$icon@2x.png' width='60' height='60'>
            </div>
2

Without seeing the code that generates the output from the feed, not sure we can help you.

3 
$response = file_get_contents($url);
$data = json_decode($response, true);

if (!isset($data[‘daily’]) || !is_array($data[‘daily’])) {
echo ‘No forecast data available’;
return;
}

foreach (array_slice($data[‘daily’], 0, 2) as $index => $day) {

$label   = ($index === 0) ? 'Today' : 'Tomorrow';
$maxTemp = round($day['temp']['max']);
$minTemp = round($day['temp']['min']);
$icon    = $day['weather'][0]['icon'];

echo "
<div class='container'>
    <div class='header'>{$label}</div>
    <img src='https://openweathermap.org/img/wn/{$icon}@2x.png'>
    <div>Max: {$maxTemp}°C</div>
    <div>Min: {$minTemp}°C</div>
</div>
";

}

So, an issue arise how to replace with the specific icons like https://icomoon.io/

5

Based on how you describe your goals, you will likely need to replace the <img src=’’> with your own version of the icons (for example, create your own /img/icons/ folder and then do <img src='/img/icons/{$icon}.png'> where $icon would be the filename for the .png (and also would be whatever the definition of $icon actually is in the PHP, likely passed in as something like “moon” or “sun” based on what you describe)

This is just a quick way of doing it, but based on what you’re trying to really do, there will likely be much better ways to implement - this is just to show you what is going on here.

Say you wanted to do it using CSS, you could do something like this in place of the <img> (just an example):

<div class=’{$icon}’></div>

and then in CSS:

div.moon {
background: url(‘url_to_moon.png‘);
}

In the above .moon would be whatever the $icon variables are as it loops through the foreach. This would allow you to create your own images.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.