NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

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.

asked 11 Jun '20, 11:14

Mahnoor%20Atiq's gravatar image

Mahnoor Atiq
11112
accept rate: 0%


Somewhere in your html (not in the snippet in your question) you have a reference to http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css , which is http not https (and is a very old version of leaflet).

permanent link
This answer is marked "community wiki".

answered 11 Jun '20, 11:55

SomeoneElse's gravatar image

SomeoneElse ♦
36.9k71370866
accept rate: 16%

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×19
×6

question asked: 11 Jun '20, 11:14

question was seen: 2,786 times

last updated: 11 Jun '20, 11:55

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum