Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ericdiedrich's avatar

Weather API icon inside canvas not showing up

Hi there, im following a small project of building a weather app with laravel and vue. Using darksky weather api and their skycons for the icons.

Im trying to add the skycon icon into my canvas but the icon isnt showing up.

export default {
    mounted() {
        this.fetchData()
    },
    data() {
        return {
            currentTemperature: {
                actual: '',
                feels: '',
                summary: '',
                icon: '',

            },
            location: {
                name: 'Los Angeles, America',
                lat: 37.8267,
                lng: -122.4233
            }
        }
    },
    methods: {
        mounted() {
            fetchData() {
                let skycons = new Skycons({'color': 'white'})
                fetch(`/vue-weather-app/public/api/weather?lat=${this.location.lat}&lng=${this.location.lng}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        // console.log(data.currently.icon)
                        this.currentTemperature.actual = Math.round(data.currently.temperature)
                        this.currentTemperature.feels = Math.round(data.currently.apparentTemperature)
                        this.currentTemperature.summary = data.currently.summary
                        this.currentTemperature.icon = data.currently.icon
    
                        skycons.add('iconCurrent', 'clear-day');
                        // skycons.add("iconCurrent", Skycons.PARTLY_CLOUDY_DAY);
                        // skycons.add('iconCurrent', this.currentTemperature.icon);
                        skycons.play()
                    })
            }
        // },
        
        // toKebabCase(stringToConvert) {
        //     return stringToConvert.split(' ').join('-')
        }
    }
}

<canvas ref="iconCurrent" id="iconCurrent" width="96" height="96"></canvas>

0 likes
2 replies
Sinnbeck's avatar

Start by checking the console by hitting f12 and selecting the console tab

ericdiedrich's avatar

my console.log(data) doesnt even appear in the console even when i tried consol logs on different things they dont even show up in my console

Please or to participate in this conversation.