In this lesson, we are going to add the Map component to the checkout page,
so the user can select the shipping address on the map
Please share your feedback to make this better every day.
Github Code Changes: https://bit.ly/3yLsMfE
Demo: https://foodmine-new.herokuapp.com
Contact:
[email protected]YOU WILL See
00:00 Intro
00:23 Adding Leaflet package
00:48 Adding Leaflet types
01:10 Adding leaflet's CSS to angular.json
02:08 Adding AddressLatLng to Order Model
02:48 Generating Map component
03:11 Adding Map to the checkout page
04:07 Adding map div to HTML file
04:48 Adding map's div ViewChild() to ts file
05:49 Adding Leaflet's map
06:01 Initializing map method
08:48 Adding map dimensions
09:50 Adding Find My Location
20:16 Moving Marker by clicking
21:17 Setting current location to Order
25:10 Adding Auth Guard
Contact me:
Website: https://codewithnasir.com
Linkedin: https://www.linkedin.com/in/nasirjd
Github: https://github.com/nasirjd