Skip to content

saifulaiub123/Angular13-Ionic-Open_street-Map-Integration

Repository files navigation

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


    ![Capture](https://user-images.githubusercontent.com/10800787/163940217-67c93ae1-cb61-4522-a32f-67bbfc278d6e.PNG)

    Android View