saifulaiub123/Angular13-Ionic-Open_street-Map-Integration

OpenStreet Map integration in angular 13 with place searching

Google map is not free right? People like me don't want to spend money but want to implement map like google for personal project or startup business. That's why i implement OpenStreetMap so that anyone can integrate map for their own purpose.

Technology Used

Node: 16.14.2 (Use NVM if you've other version of Node installed)

Angular 13

Ionic : used for converting app in android version

Open Street Map : used for map api

leaflet js : used for visualizing the map

Nominatim Api: used for global place search

How to Use

You can pull the docker image for checking how it's look like. run the below command.
docker run -d -p 8888:80 saifulaiub123/open-street-map-angular-13

otherwise for developing purpose follow the below instruction :

run "npm install"

npm start

pass out intro pages

login to get access

click on "Rent Car" . It will navigate to map page

By default map marker will be in your current place.you need to grant permit to access your device or browser location

Seacth pickup location then destination

depending one the search route will be generated

you can seed the total distance in console

marker is draggable that meand if you change the marker then route will be regenerated

Web View


Android View