Use Geolocation, Geocoding and Reverse Geocoding in Ionic Capacitor
Tags: ionic, capacitor, geolocation, geocoding
Published: 2020-03-29 22:36:06

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="d993" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="cdd2" class="graf graf--p graf-after--figure">Howdy coders! We are going to discuss very basics of location based functionalities using Google Maps and Geolocation in Ionic with Capacitor. This is a simple, but very important post for early developers. In this post, you will learn how to</p><ul class="postList"><li name="9ee4" class="graf graf--li graf-after--p">Implement Geolocation in Ionic Capacitor apps using Capacitor APIs</li><li name="dcf0" class="graf graf--li graf-after--li">Convert map coordinates to location address (Reverse Geocoding)</li><li name="de55" class="graf graf--li graf-after--li">Convert location address to map coordinates (Geocoding)</li><li name="e3d7" class="graf graf--li graf-after--li">Displaying user position on Google Maps</li><li name="6c5e" class="graf graf--li graf-after--li">Continuous tracking of a user location by periodic location updates</li></ul><p name="9bed" class="graf graf--p graf-after--li">We will test the functionalities in Web and Android device. iOS works pretty similar to Android, except the permissions required in <code class="markup--code markup--p-code">info.plist</code></p><blockquote name="0fa7" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete code for this tutorial is available on Github repo </em></strong><a href="https://github.com/enappd/ionic-capacitor-geolocation"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">ionic-angular-capacitor-geolocation</em></strong></a></blockquote><h4 name="3e17" class="graf graf--h4 graf-after--blockquote">Disclaimer</h4><p name="c222" class="graf graf--p graf-after--h4">Since this post is a mix of three frameworks&#8202;—&#8202;Ionic, Angular and Capacitor, it is possible you landed here by mistake. If you are looking for Geolocation etc in</p><ul class="postList"><li name="f09a" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Geolocation in Ionic</strong> <strong class="markup--strong markup--li-strong">Angular / </strong>Geolocation plugin with Ionic 4(Cordova) apps&#8202;—&#8202;Please check <a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--li-strong">this post</strong></a></li><li name="d7a0" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Geolocation in React Native</strong> / Geolocation API in a React Native apps&#8202;—&#8202;Please check <a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--li-strong">this post</strong></a></li><li name="7149" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Ionic Angular (Capacitor) apps</strong>&#8202;—&#8202;<strong class="markup--strong markup--li-strong">Continue reading</strong> 😎</li></ul><p name="05de" class="graf graf--p graf-after--li">Following my blogging ritual, I’ll take you through the basics of each framework we are using, namely&#8202;—&#8202;Ionic, Angular and Capacitor. If you already know about these, feel free to skip to the main content.</p><h3 name="8578" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m introducing Ionic 4 here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="f834" class="graf graf--h3 graf-after--p">Ionic Capacitor vs Apache&nbsp;Cordova</h3><p name="a887" class="graf graf--p graf-after--h3">For quite some time, Cordova has been the only choice available for hybrid app developers. Cordova builds Ionic web app into a device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.</p><p name="b3f3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What is Capacitor?</strong></p><p name="7f22" class="graf graf--p graf-after--p">Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, <em class="markup--em markup--p-em">and</em> the web. Ionic people call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps. We have seen how will it fit with ionic development.</p><blockquote name="ac5c" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Capacitor is very similar to Cordova, but with some key differences in the app workflow</em></strong></blockquote><p name="5508" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Cordova to Capacitor</strong></p><p name="8e52" class="graf graf--p graf-after--p">Here are the differences between Cordova and Capacitor (You’ll appreciate these only if you have been using Cordova earlier, otherwise you can just skip)</p><ol class="postList"><li name="45e4" class="graf graf--li graf-after--p">Capacitor considers each platform project a <em class="markup--em markup--li-em">source asset</em> instead of a <em class="markup--em markup--li-em">build time asset</em>. That means, Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time</li><li name="775f" class="graf graf--li graf-after--li">Because of the above, Capacitor does not use <code class="markup--code markup--li-code">config.xml</code> or a similar custom configuration for platform settings. Instead, configuration changes are made by editing <code class="markup--code markup--li-code">AndroidManifest.xml</code> for Android and <code class="markup--code markup--li-code">Info.plist</code> for Xcode</li><li name="9140" class="graf graf--li graf-after--li">Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like <code class="markup--code markup--li-code">ionic run ios</code>&nbsp;. You will have to run iOS apps using Xcode, and Android apps using Android studio</li><li name="05c2" class="graf graf--li graf-after--li">Since platform code is not a <em class="markup--em markup--li-em">source asset, </em>you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers</li></ol><p name="c44a" class="graf graf--p graf-after--li">In essence, Capacitor is like a fresh, more flexible version of Corodva.</p><h4 name="fdf5" class="graf graf--h4 graf-after--p">Cordova Plugins and Ionic&nbsp;Native</h4><p name="3a69" class="graf graf--p graf-after--h4">Cordova and <a href="https://ionicframework.com/docs/native"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic Native</a> plugins can be used in Capacitor environment by using Capacitor with Ionic. However, some of the Cordova Plugin are not compatible with Ionic Capacitor&#8202;—&#8202;<a href="https://capacitor.ionicframework.com/docs/cordova/known-incompatible-plugins/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Incompatible Cordova Plugins with Capacitor.</a> For Geocoding functionality, we’ll use the <a href="https://ionicframework.com/docs/native/native-geocoder/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic Native Geocode Plugin</a>.</p><h3 name="1ad7" class="graf graf--h3 graf-after--p">What is Geolocation? 🗺</h3><p name="86ef" class="graf graf--p graf-after--h3">The most famous and familiar location feature&#8202;—&#8202;Geolocation, is the ability to track a device’s whereabouts using GPS, cell phone towers, WiFi access points or a combination of these. Both mobile and desktop devices can use geolocation. There are apps which use location once, and there are apps which continuously track your location as well (😱)</p><p name="b122" class="graf graf--p graf-after--p">There are some famous Location-Based Apps.</p><p name="bbc2" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">5 Geolocation Apps </strong>you may have come across</p><ul class="postList"><li name="43f4" class="graf graf--li graf-after--p">Uber / Lyft&#8202;—&#8202;Cab booking (one time and continuous tracking)</li><li name="e8bd" class="graf graf--li graf-after--li">Google Maps (of course)&#8202;—&#8202;Map services</li><li name="90ff" class="graf graf--li graf-after--li">Swiggy / Zomato/ Uber Eats&#8202;—&#8202;Food delivery</li><li name="1801" class="graf graf--li graf-after--li">Fitbit&#8202;—&#8202;Fitness app</li><li name="fc18" class="graf graf--li graf-after--li">Instagram / Facebook&#8202;—&#8202;For tagging photos</li></ul><h4 name="116c" class="graf graf--h4 graf-after--li">What is Geocoding? What is Reverse geocoding?</h4><p name="d0ef" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Geocoding</strong> is the process of transforming a street address or other description of a location into a (latitude longitude) coordinate.</p><p name="4222" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Reverse Geocoding&#8202;—&#8202;Address Lookup of location Coordinates to Addresses<br>Reverse geocoding</strong> is the process of transforming a (latitude, longitude) coordinate into a (partial) address. As Reverse Geocoding converts geographic latitude longitude coordinates to address so the amount of detail in a reverse geocoded location description may vary, for example, one might contain the full street address of the closest building, while another might contain only a city name and postal code.</p><h3 name="6d27" class="graf graf--h3 graf-after--p">Post structure</h3><p name="3480" class="graf graf--p graf-after--h3">We will go in a step-by-step manner to explore the location features. This is my break-down of the blog</p><p name="87e0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">STEPS</strong></p><ol class="postList"><li name="6172" class="graf graf--li graf-after--p">Create a simple Ionic 4 app and integrate Capacitor</li><li name="b6ab" class="graf graf--li graf-after--li">Implement Geolocation API and get current location</li><li name="7e09" class="graf graf--li graf-after--li">Convert user Geolocation into an address (Reverse Geocoding)</li><li name="4af6" class="graf graf--li graf-after--li">Displaying user position on Google Maps</li><li name="c7ad" class="graf graf--li graf-after--li">Convert user entered address into Geocode (Geocoding)</li><li name="0d89" class="graf graf--li graf-after--li">Track user location</li></ol><p name="5a63" class="graf graf--p graf-after--li">So&nbsp;….. let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="7a0b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 340px; max-height: 273px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 80.30000000000001%;"></div><img class="graf-image" data-image-id="1*60nPmb9QPWKNHeilMIxFBQ.gif" data-width="340" data-height="273" src="https://cdn-images-1.medium.com/max/800/1*60nPmb9QPWKNHeilMIxFBQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">umm…. dive&nbsp;better</figcaption></figure><h3 name="5996" class="graf graf--h3 graf-after--figure">Step 1&#8202;—&#8202;Create a simple Ionic 4 app with Capacitor</h3><blockquote name="0a81" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">this blog</a>.</blockquote><p name="ac57" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.16.0 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm</li><li name="508a" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start ionic-capacitor-geolocation tabs</code></li></ul><p name="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">tabs</code> starter for the sake of this tutorial. I’ll use one tab each for</p><p name="b0b6" class="graf graf--p graf-after--p">Tab 1&#8202;—&#8202;Geolocation and reverse geocoding</p><p name="3da3" class="graf graf--p graf-after--p">Tab 2— Display location on Google Map and Geocoding</p><p name="d5c6" class="graf graf--p graf-after--p">Tab 3— Tracking location continuously</p><p name="817b" class="graf graf--p graf-after--p">Once the installation is done, run your app on browser using</p><pre name="f473" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="a0e9" class="graf graf--p graf-after--pre">You’ll see the default UI of Ionic starter. We’ll modify the UI as we go.</p><h4 name="4ec4" class="graf graf--h4 graf-after--p">Integrate Capacitor</h4><p name="4d65" class="graf graf--p graf-after--h4">Capacitor can be attached to an existing Ionic app as well. To attach Capacitor to your existing Ionic app, run</p><pre name="e29e" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">ionic integrations enable capacitor</code></pre><p name="2503" class="graf graf--p graf-after--pre">This will attach Capacitor to your Ionic app. After this, you have to <code class="markup--code markup--p-code">init</code> the Capacitor app with</p><pre name="c8ac" class="graf graf--pre graf-after--p">$ npx cap init</pre><p name="3872" class="graf graf--p graf-after--pre">It will ask you the app name and ID. Give app name whatever you want. App ID is the domain identifier of your app (ex: <code class="markup--code markup--p-code">com.example.app</code>). Note this ID as this will be required later when you create app in Facebook developer console.</p><h3 name="5de9" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Implement Geolocation API and get current&nbsp;location</h3><p name="751f" class="graf graf--p graf-after--h3">Capacitor’s in-built Geolocation APIs can be used to get device location. This works for web, iOS and Android. This API provides information about the device’s location, such as latitude, longitude, speed, heading, altitude etc.</p><p name="530b" class="graf graf--p graf-after--p">The code stays same for all types of devices. Just invoke the API from Capacitor in-built plugins and use it to get location.</p><figure tabindex="0" contenteditable="false" name="19e8" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/50c9edbc0acabf9c729a2fa172715101.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Geolocation code in Capacitor Ionic</figcaption></figure><h4 name="8eb1" class="graf graf--h4 graf-after--figure">2.1 Web</h4><p name="97fd" class="graf graf--p graf-after--h4">When you run the app using <code class="markup--code markup--p-code">ionic serve</code>&nbsp;, the geolocation API will ask location permission the first time. Fire the <code class="markup--code markup--p-code">locate</code> function to get your device’s location.</p><figure tabindex="0" contenteditable="false" name="8070" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 388px; max-height: 680px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.29999999999998%;"></div><img class="graf-image" data-image-id="1*6GzS5b6TTYGS_5FOfQDQMQ.png" data-width="388" data-height="680" alt="Get device latitude and longitude in web&#8202;—&#8202;using Ionic Capacitor" src="https://cdn-images-1.medium.com/max/800/1*6GzS5b6TTYGS_5FOfQDQMQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Get device latitude longitude in web&#8202;—&#8202;using Ionic Capacitor</figcaption></figure><p name="9af7" class="graf graf--p graf-after--figure">The result from Geolocation API looks like this</p><figure tabindex="0" contenteditable="false" name="a80f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 646px; max-height: 222px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 34.4%;"></div><img class="graf-image" data-image-id="1*anHjjAp7aj1UTc_oJKK2yQ.png" data-width="646" data-height="222" alt="Geolocation API result in Capacitor" src="https://cdn-images-1.medium.com/max/800/1*anHjjAp7aj1UTc_oJKK2yQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Geolocation API result in Capacitor</figcaption></figure><p name="1635" class="graf graf--p graf-after--figure">Notice there are extra parameters such as altitude, heading, speed etc. in the result. These are provided by the API whenever available.</p><h4 name="b468" class="graf graf--h4 graf-after--p">2.2 Android</h4><p name="3d4e" class="graf graf--p graf-after--h4">Build the app on Android using following commands</p><pre name="a4c4" class="graf graf--pre graf-after--p">// Build web assets<br>$ ionic build<br>// Add android platform<br>$ npx cap add android<br>// Copy all changes to Android platform<br>$ npx cap sync<br>// Open the project in Android studio<br>$ npx cap open android</pre><p name="c46b" class="graf graf--p graf-after--pre">Geolocation API requires the following permissions be added to your <code class="markup--code markup--p-code">AndroidManifest.xml</code>:</p><pre name="876b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><em class="markup--em markup--pre-em">&lt;!-- Geolocation API --&gt;</em><br>&lt;uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /&gt;<br>&lt;uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&gt;<br>&lt;uses-feature android:name="android.hardware.location.gps" /&gt;</code></pre><p name="15fe" class="graf graf--p graf-after--pre">Build the app from Android studio in your device and test.</p><figure tabindex="0" contenteditable="false" name="32c5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*LClqhusdSa2Ex9Ameje5RQ.gif" data-width="350" data-height="622" alt="Geolocation on Android&#8202;—&#8202;Ionic Capacitor" src="https://cdn-images-1.medium.com/max/800/1*LClqhusdSa2Ex9Ameje5RQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Geolocation on Android&#8202;—&#8202;Ionic Capacitor</figcaption></figure><p name="4e0a" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Android quirk</strong></p><p name="ff48" class="graf graf--p graf-after--p">There is one weird implementation issue in Capacitor Geolocation API in Android. Here are the steps to reproduce:</p><ul class="postList"><li name="2613" class="graf graf--li graf-after--p">Turn off location services on your device</li><li name="6bc5" class="graf graf--li graf-after--li">Open capacitor app that calls <code class="markup--code markup--li-code">getCurrentPosition()</code>- now it should fail because you turned off location services that’s okay so far</li><li name="d4eb" class="graf graf--li graf-after--li">Turn on location services and switch back to your app and run <code class="markup--code markup--li-code">getCurrentPosition()</code> again - now the call STILL FAILS even though location services are turned back on</li></ul><p name="1291" class="graf graf--p graf-after--li">This is because the API tries to run <code class="markup--code markup--p-code">getLastKnownLocation</code> which returns null, because no other App has requested a Location since you turned Location services back on. If you switch to Google maps and request your current location, <code class="markup--code markup--p-code">getCurrentPosition</code> starts working again because the Android location service has another location in memory. You can track the issue on official Capacitor Github Repo <a href="https://github.com/ionic-team/capacitor/issues/379"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a>.</p><h4 name="debb" class="graf graf--h4 graf-after--p">2.3 iOS</h4><p name="2f65" class="graf graf--p graf-after--h4">Apple requires privacy descriptions to be specified in <code class="markup--code markup--p-code">Info.plist</code> for location information. These two keys are important to be specified.</p><p name="1fab" class="graf graf--p graf-after--p">Name: <code class="markup--code markup--p-code">Privacy - Location Always Usage Description</code>&nbsp;<br>Key: <code class="markup--code markup--p-code">NSLocationAlwaysUsageDescription</code></p><p name="d24f" class="graf graf--p graf-after--p">Name: <code class="markup--code markup--p-code">Privacy - Location When In Use Usage Description</code>&nbsp;<br>Key: <code class="markup--code markup--p-code">NSLocationWhenInUseUsageDescription</code></p><p name="7c5a" class="graf graf--p graf-after--p">Build the app on iOS using following commands</p><pre name="cf09" class="graf graf--pre graf-after--p">// Build web assets<br>$ ionic build<br>// Add android platform<br>$ npx cap add ios<br>// Copy all changes to Android platform<br>$ npx cap sync<br>// Open the project in Android studio<br>$ npx cap open ios</pre><p name="9d49" class="graf graf--p graf-after--pre">The Geolocation function runs smoothly on iOS, same as Android</p><h3 name="c76f" class="graf graf--h3 graf-after--p">Step&#8202;—&#8202;3 Convert user Geolocation into an address&#8202;—&#8202;Reverse Geocoding</h3><p name="3b1b" class="graf graf--p graf-after--h3">This will be implemented using Ionic Native-geocoder plugin (Yes, it works with Capacitor too&nbsp;! 👻). Since this is a Cordova based plugin,<strong class="markup--strong markup--p-strong"> it won’t work in web</strong>. Install the plugin using</p><pre name="5984" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-nativegeocoder<br>$ npm install @ionic-native/native-geocoder</pre><p name="3e43" class="graf graf--p graf-after--pre">Add this plugin to your app’s module to <code class="markup--code markup--p-code">Providers</code> of your app like this</p><figure tabindex="0" contenteditable="false" name="526c" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a2feeb89377323f337e9be932f79277d.js %}</div></div></figure><p name="bb6b" class="graf graf--p graf-after--figure">Now time to import this plugin in your<code class="markup--code markup--p-code">tab1.page.ts</code> where we will convert user’s location to address.</p><p name="56ba" class="graf graf--p graf-after--p">First, we will import the plugin like this</p><pre name="255a" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';</code></pre><p name="3b1d" class="graf graf--p graf-after--pre">and inject it in our Constructor (Dependency injection) like this</p><pre name="34a8" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">constructor(private nativeGeocoder: NativeGeocoder) {}</code></pre><p name="3827" class="graf graf--p graf-after--pre">And use this code for reverse-geocoding coordinates into address</p><pre name="36d7" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">let options: NativeGeocoderOptions = {<br>    useLocale: true,<br>    maxResults: 5<br>};<br>this.nativeGeocoder.reverseGeocode(latitude, longitude, options)<br>  .then((result: NativeGeocoderResult[]) =&gt; console.log(JSON.stringify(result[0])))<br>  .catch((error: any) =&gt; console.log(error));</code></pre><h4 name="7ce7" class="graf graf--h4 graf-after--pre">Android</h4><p name="2ed3" class="graf graf--p graf-after--h4">Here’s the reverse geocoding result of the current user’s location.</p><figure tabindex="0" contenteditable="false" name="8b9a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 758px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*uZrVkQ3H8BXK3arc4tZIAg.jpeg" data-width="350" data-height="758" alt="Reverse geocoding in Capacitor" src="https://cdn-images-1.medium.com/max/800/1*uZrVkQ3H8BXK3arc4tZIAg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Reverse geocoding of coordinates in Capacitor</figcaption></figure><p name="9c7f" class="graf graf--p graf-after--figure">This is the result of reverse geocoding</p><figure tabindex="0" contenteditable="false" name="2c7f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 354px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50.6%;"></div><img class="graf-image" data-image-id="1*nmW2IlNmU-itA3xNSINAlw.png" data-width="743" data-height="376" alt="Reverse geocoding in Capacitor" src="https://cdn-images-1.medium.com/max/800/1*nmW2IlNmU-itA3xNSINAlw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Reverse geocoding response in Capacitor</figcaption></figure><h3 name="bec1" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Displaying user position on&nbsp;Maps</h3><p name="328a" class="graf graf--p graf-after--h3">Let’s move on to next tab. Here, we will show user’s location fetched from Geolocation API on Google Map. We will also use this Google Map for Geocoding i.e. Show a user entered address as a marker on the map.</p><p name="4bae" class="graf graf--p graf-after--p">4.1 Integrate Google Map</p><p name="869c" class="graf graf--p graf-after--p">Google Map can be easily integrated in an Angular Ionic app using Angular Google Maps. Install it using</p><pre name="6b96" class="graf graf--pre graf-after--p">$ npm install @agm/core</pre><p name="65c1" class="graf graf--p graf-after--pre">Import <code class="markup--code markup--p-code">AgmCoreModule</code> in <code class="markup--code markup--p-code">app.module.ts</code></p><pre name="4c6c" class="graf graf--pre graf-after--p">import { AgmCoreModule } from '@agm/core';</pre><p name="77b2" class="graf graf--p graf-after--pre">and add the following to <code class="markup--code markup--p-code">imports</code> in same file <code class="markup--code markup--p-code">app.module.ts</code></p><pre name="4aec" class="graf graf--pre graf-after--p">...<br>AgmCoreModule.forRoot({<br>  apiKey: 'YOUR GOOGLE MAP API KEY',<br>  libraries: ['places']<br>}),<br>...</pre><p name="1af4" class="graf graf--p graf-after--pre">After this, import <code class="markup--code markup--p-code">AgmCoreModule</code> in <code class="markup--code markup--p-code">tab2.module.ts</code> as well, and add <code class="markup--code markup--p-code">AgmCoreModule</code> in <code class="markup--code markup--p-code">imports</code> in same file.</p><p name="c6d0" class="graf graf--p graf-after--p">AGM map can be easily displayed in Tab 2 using following small piece of code</p><pre name="c470" class="graf graf--pre graf-after--p">&lt;agm-map [latitude]="lat" [longitude]="lng" [zoom]="15" [disableDefaultUI]="false"&gt;<br>&lt;agm-marker [latitude]="lat" [longitude]="lng" [markerDraggable]=true&gt;&lt;/agm-marker&gt;<br>&lt;/agm-map&gt;</pre><p name="f4b5" class="graf graf--p graf-after--pre">where <code class="markup--code markup--p-code">lat</code> and <code class="markup--code markup--p-code">lng</code> are the map center, as well as, market location.</p><h4 name="403e" class="graf graf--h4 graf-after--p">4.2 Showing user current location on google&nbsp;maps</h4><p name="8a7a" class="graf graf--p graf-after--h4">Similar to the first tab, we can get the current location from Capacitor Geolocation API. The latitude longitude thus obtained can be used as center of the map, as well as, marker location. Here’s the result</p><figure tabindex="0" contenteditable="false" name="528a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 387px; max-height: 680px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.7%;"></div><img class="graf-image" data-image-id="1*xUenWdQ4v9oEFt1tupmMvw.png" data-width="387" data-height="680" alt="Showing current geolocation on AGM Google Map in Capacitor&#8202;—&#8202;Web" src="https://cdn-images-1.medium.com/max/800/1*xUenWdQ4v9oEFt1tupmMvw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Showing current geolocation on AGM Google Map in Capacitor&#8202;—&#8202;Web</figcaption></figure><p name="1b4f" class="graf graf--p graf-after--figure">Code for this section can be found combined in next step.</p><h3 name="7b82" class="graf graf--h3 graf-after--p">STEP 5&#8202;—&#8202;Geocode and show Geocoded location on&nbsp;Map</h3><p name="333b" class="graf graf--p graf-after--h3">Geocoding uses the same plugin as reverse geocoding&#8202;—&#8202;<strong class="markup--strong markup--p-strong">Ionic native-geocoder. </strong>So let’s geocode addresses in google maps.</p><p name="3f88" class="graf graf--p graf-after--p">Import the plugin in <code class="markup--code markup--p-code">tab2.page.ts</code> in the same fashion as Tab1. Connect the screen’s text input to a variable, and Geocode the variable with following code</p><pre name="8194" class="graf graf--pre graf-after--p">this.nativeGeocoder.forwardGeocode(this.address, options)<br>.then((result: NativeGeocoderResult[]) =&gt; {<br> console.log('lat='+result[0].latitude+'long='+result[0].longitude);<br>})<br>.catch((error: any) =&gt; console.log(error));</pre><p name="0643" class="graf graf--p graf-after--pre">Overall <code class="markup--code markup--p-code">tab2.page.ts</code> code will look like this, containing both current location display on map and geocoding</p><figure tabindex="0" contenteditable="false" name="b723" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/93d00d0707634203047b9222af791c6b.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Geocoding and displaying current location on Google Map</figcaption></figure><p name="5852" class="graf graf--p graf-after--figure">Notice, I have used <code class="markup--code markup--p-code">parseFloat(result[0].latitude)</code> for coordinates. Some specific issues cause the AGM map not to re-center or change marker location if the coordinates are in <strong class="markup--strong markup--p-strong">string</strong> format. So make sure you convert them in <code class="markup--code markup--p-code">number</code> to see changes on map.</p><p name="de70" class="graf graf--p graf-after--p">Here’s how the geocoding and map re-centering looks like on Android</p><figure tabindex="0" contenteditable="false" name="7ff4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*_4ikahKzdQAkMhoXbkpxfw.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*_4ikahKzdQAkMhoXbkpxfw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Geocode address and show location on Google Map&#8202;—&#8202;Android Google Map&nbsp;, in Capacitor app</figcaption></figure><h3 name="727d" class="graf graf--h3 graf-after--figure">Step 6&#8202;—&#8202;How to <strong class="markup--strong markup--h3-strong">Track user location&nbsp;?</strong></h3><p name="0435" class="graf graf--p graf-after--h3">We’ll see now real time location tracking in Tab 3. If you want continuous sharing of your real time location with others or tracking of the user location, you can use the Capacitor geolocation API itself to display user position on Maps.</p><pre name="1eb8" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0">let watch = this.geolocation.<strong class="markup--strong markup--pre-strong">watchPosition</strong>();<br>watch.subscribe((data) =&gt; {<br> // data is output only when position changes<br>  </code>this.lat = position.coords.latitude;<br>  this.lng = position.coords.longitude;<br><code class="markup--code markup--pre-code">});</code></pre><p name="4d2a" class="graf graf--p graf-after--pre">So this function will give you user current location latitude longitude. You can call <code class="markup--code markup--p-code">clearWatch</code> on any given watch to stop tracking user location.</p><p name="2ca4" class="graf graf--p graf-after--p">Generally, <code class="markup--code markup--p-code">watchPosition</code> will only give you results when there is a change in location. So if you are testing on a browser, you’ll have to fake change location to see the actual effect. If you are testing on mobile device, start running&nbsp;! 🏃</p><p name="0d12" class="graf graf--p graf-after--p">Here’s the code for starting and stopping the watch&#8202;—&#8202;<code class="markup--code markup--p-code">tab3.page.ts</code></p><figure tabindex="0" contenteditable="false" name="966c" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a815789bf84fa23eb2050da214684df8.js %}</div></div></figure><h4 name="ae3f" class="graf graf--h4 graf-after--figure">Web Browser</h4><p name="c863" class="graf graf--p graf-after--h4">Here’s my track user testing on browser</p><figure tabindex="0" contenteditable="false" name="4e4e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 382px; max-height: 674px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.4%;"></div><img class="graf-image" data-image-id="1*lQ6Gstv-lIfzbJunKpOKFg.gif" data-width="382" data-height="674" src="https://cdn-images-1.medium.com/max/800/1*lQ6Gstv-lIfzbJunKpOKFg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Track user location using Capacitor Geolocation API on&nbsp;browser</figcaption></figure><p name="6aef" class="graf graf--p graf-after--figure">As you can see from the values, I’m clearly <a href="https://www.impigertech.com/resources/blogs/how-to-set-fake-location-for-testing-location-based-web-applications"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">fake changing the browser geolocation using Chrome tools</a>.</p><h4 name="704b" class="graf graf--h4 graf-after--p">Android</h4><p name="47b1" class="graf graf--p graf-after--h4">Here’s the same code on Android device</p><figure tabindex="0" contenteditable="false" name="d419" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*teQMsjmhJSDJW67V2ytNQw.gif" data-width="350" data-height="622" alt="Track user location using Capacitor Geolocation API on Android" src="https://cdn-images-1.medium.com/max/800/1*teQMsjmhJSDJW67V2ytNQw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Track user location using Capacitor Geolocation API on Android / Tracking device location for&nbsp;Android</figcaption></figure><p name="8be1" class="graf graf--p graf-after--figure">Hooray&nbsp;! That’s your geolocation application right there which is continuously Tracking a User Location. 🎉</p><p name="6870" class="graf graf--p graf-after--p">Conclusion</p><p name="7b07" class="graf graf--p graf-after--p">In this blog, we learned how to implement Geolocation in Capacitor apps with Ionic and Angular frameworks. We learnt how to convert coordinates into location address (Reverse Geocoding) and location address into coordinates (Geocoding) in a simple Ionic app and tested on Web and Android Google Map&nbsp;. We can use this for tracking users location and showing on google maps in android / javascript. These apps can collect location data with Ionic 4 and Capacitor.</p><p name="8638" class="graf graf--p graf-after--p">You can use these functionalities in a number of professional apps, be it food delivery, e-commerce, ticket booking or just a chat app or simply share your real-time location with others or for real time journey tracking. Refer this for building an Ionic App for Real time Google Maps Geolocation Tracking App.</p><blockquote name="d788" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete code for this tutorial is available on Github repo </em></strong><a href="https://github.com/enappd/ionic-capacitor-geolocation"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">ionic-angular-capacitor-geolocation</em></strong></a></blockquote><h3 name="84b4" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="3e7f" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Geolocation functionalities in Ionic Capacitor app with Angular, you can also try following blogs for other <strong class="markup--strong markup--p-strong">Ionic apps</strong></p><h4 name="a417" class="graf graf--h4 graf-after--p">Ionic Angular Capacitor</h4><ul class="postList"><li name="c59a" class="graf graf--li graf-after--h4"><a href="https://enappd.com/blog/play-music-in-ionic-capacitor-apps/112"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Music Player</a></li><li name="ddc2" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/html5-games-in-ionic-capacitor-using-phaser/115"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create HTML5 games in Ionic Capacitor apps using Phaser</a></li><li name="22e8" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/qr-code-and-barcode-scanning-with-ionic-capacitor/127"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode and QR code scanning in Ionic Capacitor apps</a></li><li name="ce34" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-capacitor-apps-with-ionic-angular/128"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook Login</a></li></ul><p name="18ee" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Capacitor app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/capacitor-full-app-with-ionic-angular/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Full App</a></p><figure tabindex="0" contenteditable="false" name="7553" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 761px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.7%;"></div><img class="graf-image" data-image-id="1*9eKBtNJaAYPMzyZvyifWIQ.png" data-width="736" data-height="800" alt="Capacitor Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/1*9eKBtNJaAYPMzyZvyifWIQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capacitor Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="35e7" class="graf graf--h4 graf-after--figure">Ionic React Capacitor</h4><ul class="postList"><li name="93d7" class="graf graf--li graf-after--h4"><a href="https://enappd.com/blog/facebook-login-in-ionic-react-capacitor-apps/118"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook Login in Ionic React Capacitor apps</a></li><li name="0f16" class="graf graf--li graf-after--li is-selected"><a href="https://enappd.com/blog/twitter-login-in-ionic-react-capacitor-app/121"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter Login in Ionic React Capacitor apps</a></li><li name="a9e7" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/google-login-in-ionic-react-capacitor-apps/122"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Login in Ionic React Capacitor apps</a></li><li name="8885" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-ionic-apps-in-react-using-capacitor/26"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">How to make basic apps in ionic-react-capacitor</a></li><li name="6594" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/camera-and-gallery-in-ionic-react-app-using-capacitor/110"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Camera and Image gallery in Ionic-React-Capacitor</a></li><li name="4f4f" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/firebase-push-notification-in-ionic-react-capacitor/111"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Push notification in Ionic-React-Capacitor apps</a></li><li name="c5a7" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Adding Icon and Splash in Ionic React Capacitor apps</a></li></ul><p name="d39b" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 React app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic React Full App</a></p><figure tabindex="0" contenteditable="false" name="074b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="0*AxzmDBUVguZ1kw_i.jpeg" data-width="600" data-height="600" src="https://cdn-images-1.medium.com/max/800/0*AxzmDBUVguZ1kw_i.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 React Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="9d27" class="graf graf--h4 graf-after--figure">Ionic Angular&nbsp;Cordova</h4><ul class="postList"><li name="85a8" class="graf graf--li graf-after--h4">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="5acf" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="dfc7" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="6667" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="91ad" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="a628" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="779c" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="38ee" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="0711" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="12ae" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 Angular app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="001a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 560px; max-height: 353px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="0*lqQcM0JyxN7nFQdL.jpeg" data-width="560" data-height="353" src="https://cdn-images-1.medium.com/max/800/0*lqQcM0JyxN7nFQdL.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Full App with huge number of layouts and&nbsp;features</figcaption></figure><p name="5b9d" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>