Laying the Foundations
Explore how to set up a new Ionic project with Angular and Capacitor for cross-platform development. Understand the installation of NGX-Leaflet to add interactive map features using Mapbox, configure environment files with Mapbox tokens, and manage Angular services and interfaces for app functionality.
Creating a new application
Let’s create a new Ionic project, install the required plugins and libraries, and create the Angular services for the app using the following commands:
ionic start appy-mapper blank --type=angular
cd ./appy-mapper
npx cap init appy-mapper com.saintsatplay.appyMapper
ionic build
npm install @capacitor/ios
npx cap ios
npm install @capacitor/android
npx cap android
npm install --save leaflet @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet
npm install --save @ionic/storage
ionic generate service services/distances
ionic generate service services/manager
ionic generate service services/places
ionic generate service services/storage
ionic generate interface interfaces/countries
ionic generate interface interfaces/locations
ionic generate interface interfaces/store
Note: ...