title: empty map while using phonegap and ol3
body: <p>I am using <a href="https://github.com/netgis/ol3" rel="nofollow">https://github.com/netgis/ol3</a> sample to create my mapping application. But while I try to create the .apk file from phonegap I get empty map while launching it.</p>
  
  <p>My Folder structure in application looks like this in my application:</p>
  
  <pre><code>**APP**
  -- css
  -- img
  -- js
  -- config.xml
  -- icon.png
  -- index.html
  </code></pre>
  
  <p>I have the following codes in my application:
  <strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="css/jquery.mobile.min.css" /&gt;
  &lt;link rel="stylesheet" href="css/ol3.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="css/map.css" type="text/css"&gt;
  &lt;script src="js/cordova-2.4.0.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.mobile.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/ol3.js" &gt;&lt;/script&gt;
  &lt;script src="js/map.js" &gt;&lt;/script&gt;
  &lt;script src="js/compass.js" &gt;&lt;/script&gt;
  &lt;title&gt;OL3 Map&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Mappage --&gt;
  &lt;div data-role="page" id="mappage" data-theme="c"&gt; 
    &lt;!-- /left panel --&gt;
    &lt;div data-role="panel" data-position="left" data-position-fixed="true" data-display="overlay" data-theme="c" id="nav-panel"&gt;
      &lt;ul data-role="listview" data-theme="c" class="nav-search"&gt;
        &lt;li data-icon="delete"&gt;&lt;a href="#" data-rel="close"&gt;Menu&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;br&gt;
      &lt;label for="gpsstatus"&gt;Watch GPS:&lt;/label&gt;
      &lt;select name="gpsstatus" id="gpsstatus" data-role="slider" data-mini="true" &gt;
        &lt;option value="off" selected&gt;Off&lt;/option&gt;
        &lt;option value="on"&gt;On&lt;/option&gt;
      &lt;/select&gt;
      &lt;div id="gpsmessage"&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;label for="compassstatus"&gt;Watch Compass:&lt;/label&gt;
      &lt;select data-role="slider" name="compassstatus" id="compassstatus" data-mini="true" &gt;
          &lt;option value="off" selected&gt;Off&lt;/option&gt;
          &lt;option value="on"&gt;On&lt;/option&gt;      
      &lt;/select&gt;
  
      &lt;div id="compassmapstatusdiv"&gt;
      &lt;label for="compassmapstatus"&gt;Rotate Map:&lt;/label&gt;
      &lt;select data-role="slider" name="compassmapstatus" id="compassmapstatus" data-mini="true" &gt;
          &lt;option value="off" selected&gt;Off&lt;/option&gt;
          &lt;option value="on"&gt;On&lt;/option&gt;      
      &lt;/select&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;fieldset data-role="controlgroup"  data-mini="true" &gt;
        &lt;legend&gt;Layer:&lt;/legend&gt;
        &lt;input name="bglayer" id="mapquest" type="radio" value="0" checked&gt;
        &lt;label for="mapquest"&gt;OSM MapQuest&lt;/label&gt;
        &lt;input name="bglayer" id="osm" type="radio" value="1" &gt;
        &lt;label for="osm"&gt;OSM Standard&lt;/label&gt;
        &lt;input name="bglayer" id="openaereal" type="radio" value="2" &gt;
        &lt;label for="openaereal"&gt;MapQuest Open Aerial&lt;/label&gt;
      &lt;/fieldset&gt;
    &lt;/div&gt;
    &lt;!-- /Ende left panel --&gt; 
  
    &lt;!-- /info popup --&gt;
      &lt;div data-role="popup" id="popupMenu" data-theme="c" class="ui-corner-all"&gt;
      &lt;a href="#" data-rel="back" data-role="button" data-theme="c" data-icon="delete" data-iconpos="notext" class="ui-btn-right"&gt;Close&lt;/a&gt;
          &lt;div data-role="header" data-theme="c" class="ui-corner-top"&gt;
              &lt;h1&gt;Tools&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"&gt;
              &lt;div style="font-size:14px; padding: 12px;" &gt;
                  &lt;strong&gt;AppInfos&lt;/strong&gt;&lt;br&gt;
                  Open Source Software:&lt;br&gt;
                  OpenLayers r3.0.0-alpha.1&lt;br&gt;
                  jQuery mobile 1.3.1&lt;br&gt;
                  Phonegap/ Cordova 2.4.0&lt;br&gt;&lt;br&gt;             
                  Contact:&lt;br&gt;
                  Sven Schroeter&lt;br&gt;
                  &lt;a href="https://twitter.com/sven_s8" target="_blank"&gt;@sven_s8 &lt;/a&gt;&lt;br&gt;&lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;!-- /Ende info popup --&gt;
  
    &lt;!-- /Map page --&gt;
    &lt;div id="head" data-theme="c" data-role="header" data-position="fixed"&gt;
      &lt;h3&gt;OL3 Map &lt;/h3&gt;
      &lt;a href="#nav-panel" data-icon="bars" class="ui-btn-left"&gt;Menu&lt;/a&gt; &lt;a href="#popupMenu" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="info" data-transition="pop"  data-iconpos="notext" &gt;Info&lt;/a&gt; &lt;/div&gt;
    &lt;div data-role="content"&gt;
      &lt;div id="compassneedle"&gt;&lt;/div&gt;  
      &lt;div id="map"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /Ende Map page --&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my <strong>config.xml</strong> looks like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;!-- config.xml reference: https://build.phonegap.com/docs/config-xml --&gt;
  &lt;widget xmlns     = "http://www.w3.org/ns/widgets"
          xmlns:gap = "http://phonegap.com/ns/1.0"
          id        = "com.phonegap.offlinemapping"
          version   = "1.0.0"&gt;
  
      &lt;name&gt;mobile-ol3&lt;/name&gt;
  
      &lt;description&gt;
          Allows map tiles to be accessed from a local SQL database
      &lt;/description&gt;
  
      &lt;author email="miller.james01@gmail.com"&gt;
          Jim Miller
      &lt;/author&gt;
  
      &lt;!--
          Enable individual API permissions here.
          The "device" permission is required for the 'deviceready' event.
      --&gt;
      &lt;feature name="http://api.phonegap.com/1.0/device" /&gt;
  
      &lt;!--
          If you do not want any permissions to be added to your app, add the
          following tag to your config.xml; you will still have the INTERNET
          permission on your app, which PhoneGap requires.
      --&gt;
      &lt;preference name="permissions"                value="none"/&gt;
  
      &lt;!-- Customize your app and platform with the preference element. --&gt;
      &lt;!-- &lt;preference name="phonegap-version"      value="3.4.0" /&gt; --&gt;      &lt;!-- all: current version of PhoneGap --&gt;
      &lt;preference name="orientation"                value="default" /&gt;        &lt;!-- all: default means both landscape and portrait are enabled --&gt;
      &lt;preference name="target-device"              value="universal" /&gt;      &lt;!-- all: possible values handset, tablet, or universal --&gt;
      &lt;preference name="fullscreen"                 value="true" /&gt;           &lt;!-- all: hides the status bar at the top of the screen --&gt;
      &lt;preference name="webviewbounce"              value="true" /&gt;           &lt;!-- ios: control whether the screen 'bounces' when scrolled beyond the top --&gt;
      &lt;preference name="prerendered-icon"           value="true" /&gt;           &lt;!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen --&gt;
      &lt;preference name="stay-in-webview"            value="false" /&gt;          &lt;!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in --&gt;
      &lt;preference name="ios-statusbarstyle"         value="black-opaque" /&gt;   &lt;!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar --&gt;
      &lt;preference name="detect-data-types"          value="true" /&gt;           &lt;!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system --&gt;
      &lt;preference name="exit-on-suspend"            value="false" /&gt;          &lt;!-- ios: if set to true, app will terminate when home button is pressed --&gt;
      &lt;preference name="show-splash-screen-spinner" value="true" /&gt;           &lt;!-- ios: if set to false, the spinner won't appear on the splash screen during app loading --&gt;
      &lt;preference name="auto-hide-splash-screen"    value="true" /&gt;           &lt;!-- ios: if set to false, the splash screen must be hidden using a JavaScript API --&gt;
      &lt;preference name="disable-cursor"             value="false" /&gt;          &lt;!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app --&gt;
      &lt;preference name="android-minSdkVersion"      value="7" /&gt;              &lt;!-- android: MIN SDK version supported on the target device. MAX version is blank by default. --&gt;
      &lt;preference name="android-installLocation"    value="internalOnly" /&gt;   &lt;!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. --&gt;
      &lt;preference name="AndroidPersistentFileLocation" value="Internal" /&gt;
  
      &lt;!-- Plugins can also be added here. --&gt;
      &lt;!--
          &lt;gap:plugin name="Example" /&gt;
          A list of available plugins are available at https://build.phonegap.com/docs/plugins
      --&gt;
  
      &lt;!-- Define app icon for each platform. --&gt;
      &lt;icon src="icon.png" /&gt;
      &lt;icon src="icon.png"   gap:platform="android"    gap:density="ldpi" /&gt;
      &lt;icon src="icon.png"   gap:platform="android"    gap:density="mdpi" /&gt;
      &lt;icon src="icon.png"   gap:platform="android"    gap:density="hdpi" /&gt;
      &lt;icon src="icon.png"  gap:platform="android"    gap:density="xhdpi" /&gt;
      &lt;icon src="icon.png"     gap:platform="blackberry" /&gt;
      &lt;icon src="icon.png"     gap:platform="blackberry" gap:state="hover"/&gt;
      &lt;icon src="icon.png"            gap:platform="ios"        width="57" height="57" /&gt;
      &lt;icon src="icon.png"            gap:platform="ios"        width="72" height="72" /&gt;
      &lt;icon src="icon.png"         gap:platform="ios"        width="114" height="114" /&gt;
      &lt;icon src="icon.png"         gap:platform="ios"        width="144" height="144" /&gt;
      &lt;icon src="ico.png"          gap:platform="webos" /&gt;
      &lt;icon src="icon.png"  gap:platform="winphone" /&gt;
      &lt;icon src="icon.png" gap:platform="winphone"   gap:role="background" /&gt;
  
      &lt;!-- Define app splash screen for each platform. --&gt;
      &lt;gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" /&gt;
      &lt;gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" /&gt;
      &lt;gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" /&gt;
      &lt;gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" /&gt;
      &lt;gap:splash src="res/screen/blackberry/screen-225.png"         gap:platform="blackberry" /&gt;
      &lt;gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" /&gt;
      &lt;gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" /&gt;
      &lt;gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" /&gt;
      &lt;gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" /&gt;
      &lt;gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" /&gt;
  
      &lt;gap:plugin name="org.apache.cordova.file" source="npm"/&gt;
      &lt;gap:plugin name="org.apache.cordova.file-transfer" source="npm"/&gt;
  
      &lt;!--
          Define access to external domains.
  
          &lt;access /&gt;            - a blank access tag denies access to all external resources.
          &lt;access origin="*" /&gt; - a wildcard access tag allows access to all external resource.
  
          Otherwise, you can specify specific domains:
      --&gt;
      &lt;access origin="http://127.0.0.1*"/&gt;&lt;!-- allow local pages --&gt;
      &lt;access origin="*" subdomains="true"/&gt; 
      &lt;!--
          &lt;access origin="http://phonegap.com" /&gt;                    - allow any secure requests to http://phonegap.com/
          &lt;access origin="http://phonegap.com" subdomains="true" /&gt;  - same as above, but including subdomains, such as http://build.phonegap.com/
          &lt;access origin="http://phonegap.com" browserOnly="true" /&gt; - only allows http://phonegap.com to be opened by the child browser.
      --&gt;
  
  &lt;/widget&gt;
  </code></pre>
  
  <p>When I open my index.html in browser I can see the map. But When I make .apk I can't see anything. I can see the controls of OL like zoom buttons and scale.</p>
  
  <p>Here is my map.js file:</p>
  
  <pre><code>//Globals
  var map;
  var gpswatch;
  var gpsmarker;
  var startview = setnewView(739207,6404074,4);
  var zoomres = 4.777314267823516;
  var maxZoomlevel = 19;
  var rotateMap = false;
  var compasswatchID = null;
  
  var layers = [
          new ol.layer.TileLayer({
            source: new ol.source.MapQuestOSM(),
            visible:true
          }),
          new ol.layer.TileLayer({
            source: new ol.source.OSM(),
            visible:false
          }),
          new ol.layer.TileLayer({
            source: new ol.source.MapQuestOpenAerial(),
            visible:false
          })
        ];
  
  // Wait for Cordova to load
  document.addEventListener("deviceready", onDeviceReady, false);
  
   // Cordova is ready
   function onDeviceReady() {   
      navigator.splashscreen.show();  
   }
  
  //Initialisieren
  $(document).ready(function(){
      setmapsize();
      $('#compassneedle').hide(); 
      map = new ol.Map({
        controls: ol.control.defaults({}, [
          new ol.control.ScaleLine({
            units: ol.control.ScaleLineUnits.IMPERIAL
          })
        ]),
        layers: layers,
        renderers: ol.RendererHints.createFromQueryData(),
        target: 'map',
        view: startview 
      });
  
      //Resizen der Map
      $(window).resize(function() {
          setmapsize();
      });
  
      map.getView().setRotation(getRadians(0));
      //map.getView().setCenter(getTranspoint(8,51,4326,900913));
  
      //GPS Marker
      gpsmarker = new ol.Overlay({
        map: map,
        element: /** @type {Element} */ ($('&lt;i/&gt;').addClass('gpspoint').get(0))
      });
  
      //GPS Status ändern
      $("#gpsstatus").change(function(){
          var mystatus = this.value;
          if(mystatus === "on"){
              startgpsWatch();
          }
          else{
              stopgpsWatch();
          }
      });
  
      //Compass Status ändern
      $("#compassstatus").change(function(){
          var mystatus = this.value;
          if(mystatus === "on"){
              startCompassWatch();
              $('#compassmapstatusdiv').show();
          }
          else{
              stopCompassWatch();
              map.getView().setRotation(getRadians(0));
              $('#compassmapstatusdiv').hide();
          }
      });
  
      //Karte Rotieren
      $("#compassmapstatus").change(function(){
          var mystatus = this.value;
          if(mystatus === "on"){
              rotateMap = true;
          }
          else{
              rotateMap = false;
              map.getView().setRotation(getRadians(0));
          }
      });
  
      $('#compassmapstatusdiv').hide();
  
      //Change Layer quick and dirty
      $('input[name=bglayer]:radio').click(function(){
          jQuery.each(layers, function(index, value) {
                 this.setVisible(false);
           });
          layers[$(this).val()].setVisible(true);
      });
  
  
  });
  
  //Aktuelle Mapparameter ausgeben (Hilfsfunktion)
  function getMapinfo(){
      var msg = '&lt;div id="infomessagebox"&gt;' +
      'Actual Resolution: ' + startview.getResolution() + "&lt;br&gt;" +
      //'Actual Zoom: ' + startview.zoom + "&lt;br&gt;" +
      '&lt;/div&gt;';
      $('#infomessage').html(msg);
  }
  
  //Auf Punkt zoomen
  function zoomPoint(point,zoomres){
  //Ansicht wechseln mit Animation
   var duration = 1000;
    var start = +new Date();
    var pan = ol.animation.pan({
      duration: duration,
      source: startview.getCenter(),
      start: start
    });
    var bounce = ol.animation.bounce({
      duration: duration,
      resolution: 4 * startview.getResolution(),
      start: start
    });
    //Flightmodus
    //map.addPreRenderFunctions([pan, bounce]);
    //Panmodus
    //map.addPreRenderFunction(pan);
    //Falls aktuelle Zoomresolution kleiner als übergebene
    if(startview.getResolution() &lt; zoomres){
        zoomres = startview.getResolution();
    }
    startview.setResolution(zoomres);
    startview.setCenter(point);  
  }
  
  //Radians ermitteln
  function getRadians(d){
      var radians = d * (Math.PI / 180);
      return radians;
  }
  
  //Punkt ermitteln
  function getTranspoint(x,y,i,o){
   var mypoint = ol.projection.transform(
      [x, y], 'EPSG:'+i, 'EPSG:'+o);
      return mypoint;
  }
  
  //neuen View erzeugen
  function setnewView(x,y,z){
  var myview = new ol.View2D({
        center: [x, y],
        zoom: z,
        maxZoom: maxZoomlevel
      })
      return myview;
  }
  
  //GPS Start Watch Funktion
  var startgpsWatch = function(){
      if(navigator.geolocation){
          $('#gpsmessage').html('&lt;div id="gpsmessagebox"&gt;start watching...&lt;/div&gt;');
          gpswatch = navigator.geolocation.watchPosition(gpsokCallback, gpsfailCallback, gpsOptions);
      }
  }
  
  //GPS Stop Watch  Funktion
  var stopgpsWatch = function(){
      navigator.geolocation.clearWatch(gpswatch);
      $('.gpspoint').hide();
      $('#gpsmessage').html("");
  }
  
  //GPS Erfolgs Callback
  var gpsokCallback = function(position){
      var msg = '&lt;div id="gpsmessagebox"&gt;' +
      'Lat: ' + position.coords.latitude + "&lt;br&gt;" +
      'Lon: ' + position.coords.longitude + "&lt;br&gt;" +
      'Accuracy: ' + Math.round(position.coords.accuracy) + " m&lt;br&gt;" +
      //'Höhe: ' + Math.round(position.coords.altitude) + " m NN&lt;br&gt;" +   
      //'Präzision Höhenmessung: ' + Math.round(position.coords.altitudeAccuracy) + "&lt;br&gt;" +
      //'Richtung: ' + Math.round(position.coords.heading) + "&lt;br&gt;" +
      //'Geschwindigkeit: ' + Math.round(position.coords.speed) + 
      '&lt;a href="#" id="setGpspoint" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true"  data-mini="true" &gt;Zoom to position&lt;/a&gt;&lt;/div&gt;';
      $('#gpsmessage').html(msg);
      var gpscoord = getTranspoint(position.coords.longitude,position.coords.latitude,4326,900913);
      gpsmarker.setPosition(gpscoord);
      $('.gpspoint').show();
      $("#setGpspoint").bind( "click", function(event, ui) {
          zoomPoint(gpscoord,zoomres);
      });
      $("#setGpspoint").button();
  };
  
  //GPS Fehler Callback
  var gpsfailCallback = function(e){
      var msg = 'Fehler ' + e.code + ': ' + e.message;
      //console.log(msg);
  };
  
  //GPS Optionen
  var gpsOptions = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
  };
  
  //Mapsize auf vollen Contentbereich skalieren.
  function setmapsize(){
      window.scrollTo(0,0);
      var winhigh = $.mobile.getScreenHeight(); //Get available screen height, not including any browser chrome
      var headhigh = $('[data-role="header"]').first().outerHeight(); //Get height of first page's header
      var foothigh = $('[data-role="footer"]').first().outerHeight(); //Get height of first page's header
      var $content=$('[data-role="content"]');
      var contentpaddingheight=parseInt($content.css("padding-top").replace("px", ""))+parseInt($('[data-role="content"]').css("padding-bottom").replace("px", ""));
      winhigh = winhigh - headhigh - foothigh - contentpaddingheight; 
      $("#map").css('height',winhigh + 'px'); //Change div to maximum visible area
  }
  </code></pre>
  
  <p>Can anyone suggest what is wrong in my code because it is exactly the same copy from the github. But when I try to make .apk file it doesn't show mapp in my device.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>Regards,
  A-J</p>