Why OSM is not rendering on secure URLs?

Hello Everyone!

I am a beginner in using openstreet maps. I have encountered an issue with my website i.e. when I am loading my website with secure https then the maps have stopped loading. While it was working fine with http.

This is my code: <script> // initialize Leaflet var greenIcon = L.icon({ iconUrl: 'cloud.png', iconSize: [30, 20] }); var map = L.map('map').setView({ lon: 67.022095, lat: 24.926294 }, 10);

            // add the OpenStreetMap tiles
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
            }).addTo(map);

            // show the scale bar on the lower left corner
            L.control.scale().addTo(map);

            var data = <?php echo JSON_encode($donnees); ?>;

            console.log(data[0].lat);
            for (var i = 0; i < data.length; i++) {
                //data[i].name
                L.marker({
                    lon: data[i].lng,
                    lat: data[i].lat
                }, {
                    icon: greenIcon
                }).bindPopup("<b>Location Name: </b>" + data[i].name + "<br> <b>Number of Fans: </b>"+ data[i].count_fan").addTo(map);
            }
        </script>

This is the error: Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css'. This request has been blocked; the content must be served over HTTPS.