1

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.

Subhash
  • 51
  • 1
  • 4
  • Welcome to SO! When you say "mobile", do you mean you access your HTML page through a mobile browser (like Chrome for Android), or through a hybrid app (typically built with Cordova)? – ghybs May 27 '19 at 18:33
  • I accessed it through a mobile browser. – Subhash May 27 '19 at 18:36
  • What happens when you try accessing [OSM website](https://www.openstreetmap.org/) through your mobile browser? – ghybs May 27 '19 at 18:40
  • I can see the map. Also I have another website where I succeeded in adding a map. – Subhash May 27 '19 at 19:15
  • 2
    Then there is definitely something else than the code you show that it creating the issue. Make sure you are not in [this situation](https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493). Otherwise, please make sure to provide an [MCVE](https://stackoverflow.com/help/minimal-reproducible-example). – ghybs May 27 '19 at 19:18
  • I created a MCVE and it works! The original map is inside a wordpress site: A MCVE inside Wordpress does not work. So this helps a little. I know my leaflet code is right but there is some problem with WP or a plugin. Thank you very much for helping! – Subhash May 27 '19 at 19:46

2 Answers2

4

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".

Subhash
  • 51
  • 1
  • 4
1

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.

Beginner
  • 151
  • 2
  • 6