Openstreet with leaflet not appearing on some desktop and all mobile browser

Question

I have set up osm on ubuntu below is how my codes are. The issue the map appears perfectly on desktop browser but it doesnt appear on mobile phone browser. What could be issue? Is there any tweak needed for some those desktop or laptop and all mobile support?

                               <div id="map" style="position:absolute;top:0px;left:230px;right: 0; bottom: 0;width:calc(100%-230px);height:65%;">

                         </div> 
                         <div id="dataTable" style="overflow: auto;position:absolute;left:230px;right: 0; bottom: 0;width:calc(100%-230px);height:35%;background:#eeeeee;">
                    <div class="x_panel">
                          <div class="x_title">
                            <h2>Vehicle List </h2>
                            <ul class="nav navbar-right panel_toolbox">
                              <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                              </li>
                              <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                  <li><a href="#">Settings 1</a>
                                  </li>
                                  <li><a href="#">Settings 2</a>
                                  </li>
                                </ul>
                              </li>
                              <li><a class="close-link" onclick='closeDataTable()'><i class="fa fa-close"></i></a>
                              </li>
                            </ul>
                            <div class="clearfix"></div>
                          </div>
                          <div class="x_content" id="tableContent">

                            <table id="dashboardGrid" class="table " >
                                  <thead>
                                    <tr>
                                        <th>#</th>
                                      <th>Group</th>
                                      <th>Sub Group</th>
                                      <th>Stat.</th>
                                      <th>Veh. #</th>
                                      <th>View</th>

                                      </tr>
                                  </thead>
                                  <tbody >


                                  </tbody>
                                </table>


                          </div>
                       </div>
                         </div>

                       </div>

Below is how is my init function for map to appear in the div.

function init() {
             var map = L.map('map');

             //add a tile layer to add to our map, in this case it's the 'standard' OpenStreetMap.org tile server
             L.tileLayer('http://*.*.*.*/hot/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                maxZoom: 18
             }).addTo(map);

             map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text. Attribution overload

             var london = new L.LatLng(-1.935114,30.082111); // geographical point (longitude and latitude)
             map.setView(london, 13);
             var redMarker = L.ExtraMarkers.icon({
                    icon: 'fa-motorcycle',
                    markerColor: 'orange-dark',
                    shape: 'circle',
                    prefix: 'fa'
                   });
                   var myPopup = L.DomUtil.create('div', 'infoWindow');
           myPopup.innerHTML = "<div id='info'><p id='title'>title</p><p>address</p></div>";
                   L.marker([-1.935114,30.082111], {icon: redMarker,}).addTo(map).bindPopup(myPopup);
                   //L.marker([-1.935114,30.082111], {icon: redMarker,}).addTo(map).bindPopup('<strong>Science Hall</strong><br>Where the GISC was born.');




                }

I have even tried a very basic example.

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('http://*.*.*.*/hot/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                maxZoom: 18
             }).addTo(mymap);

    L.marker([51.5, -0.09]).addTo(mymap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

    L.circle([51.508, -0.11], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");



</script>

Answer 1

This worked for me, it's your code. I hit OSM a little different then you but..

  <!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>

<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
</div>

<script>

 var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
    osm.addTo(mymap);

  //  L.tileLayer('http://*.*.*.*/hot/{z}/{x}/{y}.png', {
  //              attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  //              maxZoom: 18
 //            }).addTo(mymap);

    L.marker([51.5, -0.09]).addTo(mymap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

    L.circle([51.508, -0.11], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");


</script>
</body>
</html>

Answer 2

I don't see anything obviously wrong but I've got a hunch that width:calc(100%-230px) may be evaluating to 0. Have you tried using a divide-and-conquer approach? i.e. iteratively remove half of the non-essential code until the problem disappears. That should at least help isolate the problematic code.

Answer 3

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.