CODEWITHSUNDEEP
androidmobileleafletopenstreetmap
Subhash
Subhash

Reputation: 51

Leaflet map not showing on android

My leaflet map shows on desktop (with Firefox) but not on Android. There only controls and attribution are shown but no map and no marker, only gray.

I searched and read everything with the tags "[leaflet]" and "mobile" on stackoverflow but no suggested solution worked for me.

My code:

<div id="karte_weitra" style="height: 400px; width: 96%; margin: 1em auto 1.2em;"></div>
<script type="text/javascript">
var mymap = L.map('karte_weitra').setView([48.7008, 15.09], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy;&nbsp;<a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    maxZoom: 18
}).addTo(mymap);
var markerWeitra = L.marker([48.70071, 14.9038]).addTo(mymap);
markerWeitra.bindPopup("<strong>Jägerfabrik</strong><br />Wilhelm Szabo Str.&nbsp;230<br />3970&nbsp;Weitra, Austria", {
    minWidth: 170,
    className: "marker_weitra_popup",
    maxHeight: 60
});
</script>

No error messages in konsole.

Upvotes: 1

Views: 3618

Answers (2)

Jos&#233; Maria
Jos&#233; Maria

Reputation: 181

In my case it was because in production my server had https certificate and in development doesn't. What happens is in my mobile app it did not appear the message that it was an unsecure connection. When I copied a link of one tile image from geoserver WMS and paste to the mobile browser the message of unsecure connection appeared. After I selected that I approve to go to the unsecure connection, in that tile image, and later entered in the web app it started to appear all tile images from GeoServer.

Upvotes: 1

Subhash
Subhash

Reputation: 51

The culprit was a CSS rule forcing images to 90% width on small displays.

Again thanks for the help especially the hint at MCVE with an useful link to "How to debug small programs".

Upvotes: 4

Related Questions