CODEWITHSUNDEEP
androidangularjscordovaleafletopenstreetmap
sebwas
sebwas

Reputation: 99

OpenStreetMap not showing up on Android

I'm trying to create an app whose main ability is to show items on a map. I decided to use ionic (on top of Apache Cordova) as my base framework and OpenStreetMap as the map provider. When using ionic to serve the app to my Browser (Chrome, btw) everything works as expected. Map is showing up the way I want it. Using my cellphone (LG Nexus 4) to preview the app results in tiles not showing up. What is strange is that controls work (I used the angular binding to two input fields to check that), which means I can navigate around, zoom and all that, it simply does not show anything.

Browser view: Here it works
Phone view: Here it doesn't

Here's some of the code I used:

map.html:

<ion-view ng-controller="StringController as s" view-title="{{s.strings.map}}">
<ion-content ng-controller="MapController">
    <leaflet center="center" defaults="defaults">
        <input type="text" ng-model="center.lat" style="margin-left:200px;" />
        <input type="text" ng-model="center.lng" style="margin-left:200px;" />
    </leaflet>
  </ion-content>
</ion-view>

controller.js (excerpt):

.controller('MapController', ['$scope', function($scope){
  angular.extend($scope, {
    center: {
      lat: 51.1642292,
      lng: 10.4541194,
      zoom: 6
    },

    defaults: {
      zoomControl: false
    }
  });
}]);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="lib/leaflet/leaflet.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- openstreetmaps vendor plugin -->
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="lib/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/strings.js"></script>
  </head>

  <body ng-app="finder">
    <ion-side-menus>
        <ion-side-menu-content></ion-side-menu-content>
        <ion-side-menu side="left"></ion-side-menu>
    </ion-side-menus>

    <ion-nav-view></ion-nav-view>
  </body>
</html>

AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="info.wphp.finder" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="21" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>

As you might be able to tell, I'm fairly new to app delevopment with Cordova. I'd like any sort of help here, because this is driving me insane. If you'd like to see more code, please let me know.

Upvotes: 2

Views: 3777

Answers (1)

sebwas
sebwas

Reputation: 99

I know found what was causing the problem. Somehow Cordova does not interpret URLs of the form "//example.com/page" correctly, so I had to fix it using a "special" version of the OSM layer.

The updated files here:

map.html:

<ion-view ng-controller="StringController as s" view-title="{{s.strings.map}}">
  <ion-content ng-controller="MapController">
    <leaflet center="center" defaults="defaults" layers="layers">
        <input type="text" ng-model="center.lat" style="margin-left:200px;" />
        <input type="text" ng-model="center.lng" style="margin-left:200px;" />
    </leaflet>
  </ion-content>
</ion-view>

controller.js (excerpt):

.controller('MapController', ['$scope', function($scope){
  angular.extend($scope, {
    center: {
      lat: 51.1642292,
      lng: 10.4541194,
      zoom: 6
    },

    defaults: {
      zoomControl: false
    },

    layers: {
      baselayers: {
        osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz'
        }
      }
    }
  });
}]);

Upvotes: 4

Related Questions