CODEWITHSUNDEEP
javascriptleaflet
AngusYoung14
AngusYoung14

Reputation: 21

Leaflet map grey on mobile browsers

This leaflet map is working fine on desktop browsers, it is not on mobile browsers, don't understand where is the error!

var map = new L.Map("tour-map",{ zoomControl: false, maxZoom: 15 });

var basemaps = {
    opentopomap: L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'),
    hikebike: L.tileLayer('http://{s}.tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png'),
    worldimagery: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
};

L.control.layers(basemaps).addTo(map);

basemaps.opentopomap.addTo(map);

Chrome console doesn't show any errors...

This is the css:

#tour-map { position: relative; margin: 0 auto; width: 100%; height: 360px; }

Upvotes: 1

Views: 1055

Answers (1)

AngusYoung14
AngusYoung14

Reputation: 21

The problem was caused by mixing HTTP and HTTPS protocols. Thanks a lot to ghybs for helping me!

Upvotes: 1

Related Questions