Open the file resources/splash.png and edit it as you wish. The dimensions are 2208x2208 pixels. The icon is called.. you guessed it.. icon.png and is located in the same folder. The dimensions for the icon is 1024x1024 pixels.
I’m aiming to release Dogwalk quickly, and then update the app functions and look after the app is already published. So I put little effort into the design of the icon and splash screen. They turned out like this:
Ionic 2 dogwalk icon
Ionic 2 dogwalk splash screen
Now when the following command is executed Ionic will take care of generating the correct dimensions for the splash screen and icon.
If you run that command without having created a splash screen and icon yourself Ionic will use the default ones.
This tutorial covers how to add markers on a Google map in an Ionic 2 app. We’ll continue where we left of the last with a Google map that is displayed in our app. If you haven’t already got that take a look at that tutorial first.
1. Markers JSON
To keep it simple we’ll store the marker information in a json file. Add a file called markers.json in the folder src/assets/data/ (create the folder data since it is not created by default).
The data we need at this point for a marker is, latitude, longitude and name. If you need help to find the latitude and longitude for your markers you can use maapcoordinates.net. My markers.json looks like this:
2. Loading JSON in Ionic 2 and Angular 2
To load our .JSON file we’ll be using angular http and something called an Observable which we’ll map with rxjs/add/operator/map. You can read more about these classes in the Http class documentation of Angular 2
Start by importing these into src/pages/home/home.ts
Then we also need to add Http to our constructor:
Now create a method called getMarkers in home.ts. In that method we’ll load the json file:
We are subscribing to an observable to get the markers. And in the subscribe method we will use the marker data to display them on the map.
3. Displaying markers on a Google map
Create a method called addMarkersToMap() in home.ts. In that method the markers will be looped through and added to the map.
Now we need to call this method from the subscribe callback of getMarkers():
That is all that is needed to display a marker on a Google map in Ionic 2 with Angular 2.
Ionic is a cross platform tool to create mobile apps for iOS, Android and Windows Phones. Lets take a look at installing Ionic.
I thought I’d build an app called Dogwalk. I wanted it to run on both Android and iOS phones so I decided to learn Ionic. I also thought I’d blog about all the steps I take to create it. You will get to know more about the app as we go along.
Start by installing Node.js. After that open up a terminal and use npm to install cordova and ionic:
Creating an app
To create an app using Ionic there are three templates you can start with, blank, tabs and sidemenu. The name of the templates kind of explains themselves.
For dogwalk I’d like to start with the blank template by typing this in the terminal:
When this is done you can run an almost empty app in the iOS simulator or in your browser. Running it in the browser is a great way to speed up development since you do not have to wait for the simulator to start every time.
Command to run it in your browser:
To run the app in ios simulator: (make sure you have it installed)
There was also a few apps that I could install on my Android phone which provided an error console to the old browser or was a browser with a console on their own. But those didn’t work either.
The Android browser is built on Chromium. If you type chrome:version into the address field you get to know what version of Chromium it is running.
This is what mine looked like:
Chromium version - android
So at this point I figured I wasn’t going to debug it in the Android browser at all. If you look at the screenshot above you can see i have a Chromium version from 2013 installed.