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 mobile support?

 <div id="right" style="overflow: auto;width:calc(100%-230px);height: 100vh; background:#eeeeee;">
                                       <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.');




                }
This question is marked "community wiki".

asked 25 Aug '17, 14:36

newbie14's gravatar image

newbie14
319912
accept rate: 0%


This question has been cross-posted on GIS StackExchange and has an accepted answer there.

permanent link

answered 26 Aug '17, 12:49

Tordanik's gravatar image

Tordanik
10.6k1294131
accept rate: 33%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×531
×161
×54
×42
×33

question asked: 25 Aug '17, 14:36

question was seen: 1,615 times

last updated: 26 Aug '17, 12:49

powered by OSQA