3 Replies Latest reply on Sep 17, 2016 12:37 AM by VectorP

    Map tiles not showing in built app


      Installing my simple mapping app in my device after building it via PhoneGap Build, everything works but the map tiles don't show. 


      The app is at:  GitHub - Satyam/seguimiento: Seguimiento de la posición de un table (Phonegap app)


      Before building it I tested the application in my browser using `phonegap serve` and it works fine, tiles an all.


      Once build and installed in Android, it works, except for the missing map tiles.


      I added an event listener to catch clicks on map elements via the mapping app and they respond nicely.  The location marker shows where it is expected as do the zoom controls but the tiles never show.    I enclosed the whole mapping part in a try-catch block to show any possible errors that might otherwise pass unnoticed, and nothing happens. The latitude and longitude are displayed fine and the values are correct, so the geolocation part is good.


      The app uses Leaflet to access OpenStreetMap tiles. I've seen plenty of questions about how to access map tiles locally but it seems that is an option and several articles mention using plain Leaflet with remote tiles as quite a normal thing, but I can't seem to get it right. 


      I added   `<access origin="*" subdomains="true" /> ` to the config file from comments in one of those articles, with no visible change.


      I shortened the list of plugins to the ones I really use or intend to.  Perhaps I have gone too far? 


      seguimiento/config.xml at master · Satyam/seguimiento · GitHub


      Thanks in advance for your help



        • 1. Re: Map tiles not showing in built app
          VectorP Level 4

          ...after building it via PhoneGap Build


          Your directory structure is not what PGB expects.

          Instead: move your config.xml into /www, adjust the paths to icons/splashes and send only the contents of /www to PGB.


          You are using compound qualifiers in the density attribute, which will not work. Use the qualifier attribute. See the PGB Docs, Icons and Splash section.

          density="land-ldpi" should be qualifier="land-ldpi"


          You are missing the whitelist plugin, and the allow-navigation rule for the map tiles.

          See cordova-plugin-whitelist

          • 2. Re: Map tiles not showing in built app
            DevaSatyam Level 1

            The whitelist plugin worked!  Thanks!


            PhoneGap Build doesn't seem to mind the directory structure of my repository, after all, it is building it.  And now, with the whitelist plugin, it works.


            As for the density="land-ldpi" attribute, that came unmodified from the Hello World template (as did the directory structure) and I plan to drop it anyway.  You might want to do a pull request on that template.





            • 3. Re: Map tiles not showing in built app
              VectorP Level 4

              As for the density="land-ldpi" attribute, that came unmodified from the Hello World template...


              There are many, many templates online. Old ones, new ones, copied ones, modified ones....and Phonegap provides several, of which some a wrong. Yes, it's a mess. That's why the suggestion to use the proper 'qualifier' attribute has been documented in the PGB Docs ( Icons and Splash | PhoneGap Docs  ) and has been repeated here at the forum over and over again (use Search function).