IonMaps - GPS, Maps and Directions, is a cross-platform mobile application made by integrating Mapbox GL JS with Ionic-Angular.
This project, which was carried out within the scope of application development with Ionic Framework, includes many features such as Geocoding and Navigation Directions, which are more advanced features, as well as basic features in maps application.
Some of the many features the project includes:
- Geocoding control, enabling users to search the map for a place. - ( forward geocoding and reverse geocoding )
- Switchable map style - ( Street, Dark, Satallite )
- Navigation directions between origin and destination
- Clickable map control that enables a user to toggle fullscreen mode on and off.
- Zoom and rotation controls
- Smooth interpolation between locations
- English localization of geocoder
- Marking the location of the search result with marker
- Geolocating the user and then tracking their current location on the map
- Ionic v5 - Ionic Framework is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies.
- Angular v11 - Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
- TypeScript - TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.
- Mapbox - Mapbox is a location data platform that powers the maps and location services used in many popular apps.
The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You either need your own tile server such as the one provided by openmaptiles.org or a Mapbox API access token ( they have a free Starter plan! ), so sign up with Mapbox. Once you've registered go to your Account > Apps > New token. The 'Default Secret Token' is what you'll need.
You will also need to set up your development environment. To import the access token you created into the project, open the environment.ts file and type the access token:
//.src/environment/environment.ts
export const environment = {
mapbox: {
accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
}
};
After importing your own token into the development environment, to run this project in production or development mode you have to make sure, ionic
and cordova
are installed globally on your computer.
Before proceeding, also check if Node.js (bundled with npm) is installed. It is recommended to select the LTS version to ensure best compatibility.
- To check if it is installed:
node --version
npm --version
- Install ionic and cordova command line interface globally:
npm install -g ionic cordova
To get this project, clone the repository directly using git or download a zip copy from the master branch on Github.
git clone https://github.com/enessfk/IonMaps.git IonMaps
To install the dependencies, run this in the application folder from the command-line:
npm install
ionic serve
Add an iOS or Android platform to the project:
ionic cordova platform add ios
# or
ionic cordova platform add android
Run the app on your device:
ionic cordova run ios
# or
ionic cordova run android
For further information please read ionic's deployment guide.
Want to contribute? Great! To fix a bug or enhance an existing module, follow these steps:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/enhanced-feature
) - Commit your Changes (
git commit -m 'Add some enhanced-feature'
) - Push to the Branch (
git push origin feature/enhanced-feature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.