0

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>
  • I have some basic demos I've been making for a school project, they may help. gistechsolutions.com/leaflet/DEMO – Bill Chappell Aug 25 '17 at 18:51
  • @BillChappell I have added below is my basic example even that is not working but both the circle and pop-up is appearing. – user8012596 Aug 25 '17 at 18:53
  • Your OSM tile layer URL is not valid. http://*.*.*.* – Bill Chappell Aug 25 '17 at 19:00
  • @BillChappell no its valid is a local ip to my local server. The reason cause it works on my desktop perfectly. – user8012596 Aug 25 '17 at 19:01
  • If you are using a local IP to hit your server, can the mobile also hit the same IP? Are you running your page from localhost or from the same server your tiles are at? – Bill Chappell Aug 25 '17 at 19:05
0

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/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/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>
  • I got time out with your codes. – user8012596 Aug 25 '17 at 19:03
  • I presume that http://*.*.*.* is handled automagically by leaflet; is that so? And what does Leaflet replace it with? (should I RTFM or should this be its own question?) – Alex Hajnal Aug 25 '17 at 19:05
  • @Alex I just hide my local ip thats all it works via my desktop actually. – user8012596 Aug 25 '17 at 19:09
  • That's probably your issue then. If you're hosting your page off an RFC1918 address (e.g. 192.168.x.x) then you won't be able to access it over the cell network. Try turning WiFi on on your mobile. – Alex Hajnal Aug 25 '17 at 19:14
  • @Alex yes I have turned my wifi but on my desktop even when I am out from the vpn it works. – user8012596 Aug 25 '17 at 19:15
0

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.

  • yes the 230px is indeed my right hand side panel where I show some relevant data. Which half should I remove I am not quite sure on this ? – user8012596 Aug 25 '17 at 18:34
  • I have tried a very basic example is the same issue though. I have updated my question with my basic example too. – user8012596 Aug 25 '17 at 18:36
  • I would try removing the width:… clause entirely. The idea is to get the code to work, not to get it to work and look absolutely perfect. If that bit of code is indeed causing problems then you can try achieving the same effect using a different approach. If removing it doesn't fix things then you'll know that the problem (probably) lies elsewhere. – Alex Hajnal Aug 25 '17 at 18:39
  • I have updated with my very basic example too. Its the same the code is very basic. When I tried to run the basic example the circle and pop-up appear but the page does not get loaded is like keep loading how to check the error on mobile phone? – user8012596 Aug 25 '17 at 18:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.