Тёмный
No video :(

Angular 4 Tutorial - GPS Activity Mapping App 

Wes Doyle
Подписаться 40 тыс.
Просмотров 54 тыс.
50% 1

In this video, I build a simple GPS route mapping application using Angular 4. We'll use the Angular CLI to scaffold the project and then create custom Components and Services to build an application with a list of runs with calculated totals, and a detail view with a customized map containing a route loaded from GPX data .
Link to code on GitHub: github.com/wes...
Check out my premium Angular + .NET Core Web API Premium Course at ProductiveDev:
productivedev....
Get 15% off a Pro Membership subscription by using promo code 'DEV2017' at checkout.
We'll use GPX File Format to plot routes - an XML schema for GPS data. If you need sample GPX data, you can find some here: www.wandermap.n...
Note that I'm using bash commands on the command line - for this, you'll need a terminal emulator like Bash on Ubuntu on Windows, Git for Windows, or Cmder.
Post a link to your code if you make improvements - I may mention your repository in a future video!
Some ideas for improvement:
- Store and retrieve data from a back-end database service
- Create functions to parse GPX data to calculate distance, elevation gain, etc.
Dependencies:
- Typescript - typescriptlang...
- Node.js - nodejs.org/en/
Third Party Libraries:
- Leaflet - leafletjs.com/
- Mapbox - www.mapbox.com...
- Bootstrap 3 - getbootstrap.com/

Опубликовано:

 

27 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 126   
@putinscat1208
@putinscat1208 3 года назад
i just started listening to this, but thanks for a video longer than 5 mins, and thanks for talking in a language I can understand.
@mahmoudtokura
@mahmoudtokura 7 лет назад
I just recently switched to Angular and Typescript from My usual JAVA, I have been looking for project based tutorials to get a better grasp of the frame work and your channel is just Awesome. So much projects to sharpen my skills. Thanks I just subscribed.
@WesDoyle
@WesDoyle 7 лет назад
+Mahmoud Tokura glad to hear, good luck!
@inframatic
@inframatic 6 лет назад
Mushrooooms! This tutorial is better than your others because you are using more creative ways to explain to us what you are doing. The whiteboard idea is great!
@TheRkreddy
@TheRkreddy 7 лет назад
Great man. This is cool and way advanced without bullshitting on how you like new framework. Thanks. Looking forward to learn more on other aspects of framework like http, forms, directive components , animations..
@WesDoyle
@WesDoyle 7 лет назад
+Rk Reddy Bairi glad you enjoyed it! All the best
@SW-qd2ut
@SW-qd2ut 7 лет назад
Thanks for posting this up, i take a lot of training from work and they are no where as exciting and useful as this. I'm already checking your other projects!
@WesDoyle
@WesDoyle 7 лет назад
+S W glad to hear it! Good luck and let me know if you have any questions
@DanielRLuke
@DanielRLuke 6 лет назад
This a very rare tutorial wherein which the code works perfectly after you dl from git cd into the folder, and run npm install. Bravo, Wes. This is at least true as of 11/22/2017
@appledrug2
@appledrug2 6 лет назад
still perfectly works after 446 days
@HK-sw3vi
@HK-sw3vi 4 года назад
FUCK! as a person who enjoys urban exploration and a guy who's getting into angular. this tutorial is a match made in heaven
@WesDoyle
@WesDoyle 4 года назад
Glad to hear it HK
@inframatic
@inframatic 6 лет назад
I like that you make full screens of text that say where we are going and what we are doing there (15:03). When I skip through the videos thumbnails to find a place in the tutorial i like, I can see these full screen texts and navigate easier. Yes I know im posting too many comments. Sorry!
@DongoBongKong
@DongoBongKong 6 лет назад
Very nice tutorial and very inspirational. Your style of teaching/explaining is very pleasant. I feel that I am in a friendly place
@WesDoyle
@WesDoyle 6 лет назад
Thanks, Peter!
@khayryazzez
@khayryazzez 4 года назад
we love you man
@troybryantIII
@troybryantIII 6 лет назад
this was pretty cool. Got the data out of my smart watch and updated the app with my data thanks keep up the great vids man
@WesDoyle
@WesDoyle 6 лет назад
Awesome
@luismanzanero95
@luismanzanero95 7 лет назад
This is exactly what i needed! Your Channel will explode soon with all this great content :D Thanks a lot!
@WesDoyle
@WesDoyle 7 лет назад
+Luis Manzanero glad you enjoyed it
@TariqueMahmud313
@TariqueMahmud313 7 лет назад
I just love the intro! you are awesome bro!! Respect from Bangladesh :)
@WesDoyle
@WesDoyle 7 лет назад
+Tarique Mahmud thank you! All the best!
@inframatic
@inframatic 6 лет назад
I love these angular tutorials. This is my third one. Keep em up!
@becayebalde3820
@becayebalde3820 2 года назад
I love it man, thanks!!
@player2gamer652
@player2gamer652 7 лет назад
luckily i found that tutorial, smart moves, your tutorials better than others
@WesDoyle
@WesDoyle 7 лет назад
Glad to hear! Thanks!
@player2gamer652
@player2gamer652 7 лет назад
Thanks to you
@JOBELGE
@JOBELGE 6 лет назад
I Think that a Tutorial with Angular + MapBox for Geocoding more specifically would be very interesting as well :) We can find resource for Google Maps API but as it became very expensive, I would like to try another solution...
@mohbareche2777
@mohbareche2777 5 лет назад
github.com/haoliangyu/ngx-leaflet-starter
@KiranKumarDashBG
@KiranKumarDashBG 7 лет назад
Great Work. Subbed. I would definitely love to see more tutorials on different angular apps. And yes. I laughed at getFirstDate()... even though you didn't tell the joke. Hahaha...
@WesDoyle
@WesDoyle 7 лет назад
lol Thanks Kiran!
@piotrgownia5877
@piotrgownia5877 7 лет назад
Your vids help me to learn angular so much! :D
@WesDoyle
@WesDoyle 7 лет назад
+ Piotr Glownia - That's great, I'm glad you enjoy the videos. Good luck in your learning!
@binni6860
@binni6860 7 лет назад
Fantastic, Inspired me a lot. I want to make an app combining the PhotoGallary and Mapping App~
@WesDoyle
@WesDoyle 7 лет назад
+NiBin good idea! Good luck!
@DesignJoel
@DesignJoel 6 лет назад
Great Video Wes! I really like these tutorials, more creative than alot of other channels or tutorials. I was wondering how long a project like this might take you? Because for me, even coding along I run into errors (most my own fault) that I need to debug, took me probably 4 -5 hours to do this one after solving some errors. Also I hope you provide a part 2 with this video for a backend to add activities :) Nice video
@WesDoyle
@WesDoyle 6 лет назад
@Joel Buzzanco - thanks, I appreciate it! I'd say it also takes me about the same amount of time - perhaps even a bit longer - to complete an app like this from start to finish in terms of what's shown in the video. My process is generally to built the app for a video once before recording, and then I work through it again to make the recording, which takes a few hours, but goes a bit faster than the initial design and build. Some of my longer video series take quite a bit longer; it just depends on the size of the project and the particular technology. One of the things that speeds up text editing is the use of Vim keybindings. All the best!
@codehan
@codehan 5 лет назад
Thank you! Great turorial with very good explanations. Please make a detailed tutorial about Angular 7 in combination with Leaflet and displaying GEOTiff data. This topic is of interest to many people but unfortunately there are not enough sources or examples. That would be great!
@pavulurisaibabu5256
@pavulurisaibabu5256 5 лет назад
Tq so much Wes Doyle. This video saves my time, once again thanks a lot.
@GarrettSanderson
@GarrettSanderson 7 лет назад
Wes! You live in a beautiful place!
@WesDoyle
@WesDoyle 7 лет назад
Ha, thanks Garrett. It can be nice sometimes. It's all about where you look, I suppose. Great looking channel you have, by the way!
@GarrettSanderson
@GarrettSanderson 7 лет назад
Wes Doyle haha! I hear ya! Thanks, yours is quite good lookin' as well :)
@GarrettSanderson
@GarrettSanderson 7 лет назад
Ha! I hear ya! Your channel is quite good lookin' as well!
@reach_perumal
@reach_perumal 7 лет назад
Fantastic walkthrough!! thanks for doing a great tuts.
@WesDoyle
@WesDoyle 7 лет назад
+vinayaga perumal thanks, glad you enjoyed the video!
@harshitvijayvargiya1188
@harshitvijayvargiya1188 7 лет назад
Your tutorials are awesome. Thanks a lot. Keep posting :)
@WesDoyle
@WesDoyle 7 лет назад
+harshit vijayvargiya will do thanks for your support!
@Fourier88
@Fourier88 6 лет назад
Great Tutorial !! Thanks Wes !! Keep it UP !
@WesDoyle
@WesDoyle 6 лет назад
Thanks for your support!
@princek3684
@princek3684 7 лет назад
Thanks, Wes D! Very good video tutorial. I really want to see more videos for angular 4 js. If you are possible, could you create new video for angular 4? If you do it, I'm so thanks.
@WesDoyle
@WesDoyle 7 лет назад
+David Castillo thanks! I sure will. I'm working on more Angular videos. They'll be out soon.
@princek3684
@princek3684 7 лет назад
Thanks..so much! if you created new videos, I hope you will let me know the youtube url. I'm so interested in your angular-4 projects.
@WesDoyle
@WesDoyle 7 лет назад
+David Castillo so glad to hear, I'll keep you posted! All the best
@sandeepnaidu3364
@sandeepnaidu3364 7 лет назад
Hi Wes, i really appreciate you doing cool project based tutorial spending your time. looking forward such more. I would like to know are there any libraries where we can store the live GPS feeds to database and show the data back when requested(like history play) thank you
@WesDoyle
@WesDoyle 7 лет назад
+Sandeep Naidu great question; I'm not aware of any such libraries, but will let you know if I find anything
@pandarzzz
@pandarzzz 6 лет назад
Thank you for sharing this informative video! 😺🖐
@manjunathah5857
@manjunathah5857 7 лет назад
Wonderful tutorial love it, thank you very much
@WesDoyle
@WesDoyle 7 лет назад
+Manjunatha H - thank you, I'm glad you enjoyed the video!
@user-em2ii1ry3k
@user-em2ii1ry3k 7 лет назад
Awesome videos. Thank you.
@jaredsilva7162
@jaredsilva7162 4 года назад
The serve command requires to be run in an Angular project, but a project definition could not be found. Angular 8 :(
@m19i93
@m19i93 7 лет назад
You can initialize the earliest date with allActivities[0].date, and it will be work fine too.
@murthy900
@murthy900 6 лет назад
Thanks for showing me pexels!!!
@deepakkiranagi5500
@deepakkiranagi5500 4 года назад
adding the api-key in the angular part is safe ? if not then can you tell me how can i get that through spring boot and mysql?
@L1th1umz
@L1th1umz 5 лет назад
can i do this with ionic ??
@maxeminem777
@maxeminem777 6 лет назад
Great video, subscribed :)
@jafar1607
@jafar1607 7 лет назад
Mix up some jokes too :).. your videos are really helpful. Keep posting more..!
@WesDoyle
@WesDoyle 7 лет назад
+Jafar Chembatty - Will do! Thank you.
@parapadirapa
@parapadirapa 5 лет назад
Just a heads up: No time dimension on Wanderer's GPX files so they're not the best example if you mean to track location across time
@WesDoyle
@WesDoyle 5 лет назад
Thanks!
@jukashield1503
@jukashield1503 5 лет назад
Hello, I completed this tutorial and I liked it so much. Only issue that I am having is the gpx data, the activity name and details next to the map including the map are not showing anything. I double checked all my imports, variables and interpolation syntax, but i couldnt find the solution. There is not much on the internet either. What could be the problem with that, I used three different types of gpx data( from Strava directly, and from 2 other sample sites) Please help, I would appreciate it. :)
@user-em2ii1ry3k
@user-em2ii1ry3k 7 лет назад
Do you prefer installing your third party packages over using a CDN? Thanks.
@SaiPrakash16
@SaiPrakash16 6 лет назад
Thanks for posting ! really helpful. Did you encounter this too while developing this tutorial - ERROR in src/app/services/activity.service.ts(16,12): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures. in the service ?
@WesDoyle
@WesDoyle 6 лет назад
Try ‘number’ lowercase
@revakriid
@revakriid 5 лет назад
Is there an update for this in angular 7?
@Proud_Fenian
@Proud_Fenian 5 лет назад
im having an issue with mapboxes token keys . how do insert my own valid key
@benrusle
@benrusle 5 лет назад
hi, thanks for your sharing..nice tutorial and I am very new in typeScript..by the way I need a favor from you. How to call the activity array into app.component.ts? Actually I have import multiple component in that file(app.component.ts) and when I run the app, the table body not bind properly and shown at inspect element bar. Seek your help on this.
@grubitania
@grubitania 7 лет назад
Awesome video
@WesDoyle
@WesDoyle 7 лет назад
+Marko Grubešić glad you enjoyed it!
@walterwhite4604
@walterwhite4604 6 лет назад
if the API key is part of the client application, will users of application be able to see it in the code and requests and possibly abuse it ?
@GameMasters825
@GameMasters825 2 года назад
This is still actual? Angular 4?
@Ruhgtfo
@Ruhgtfo 3 года назад
Is there anyway to get rid of the karma.conf.js
@zenhsuld
@zenhsuld 7 лет назад
hello.., great tutorial. how to retrieve data from back-end? how to upload gps data to server? (phone). sorry my bad english
@WesDoyle
@WesDoyle 7 лет назад
+Enhsuld Zorigtbal great question, I'll make another video implementing a back end soon. All the best!
@zenhsuld
@zenhsuld 7 лет назад
Wes D springboot mongodb possible?
@DanielWeikert
@DanielWeikert 7 лет назад
Great Tutorial. While I was coding along i got stuck with the following error: "Cannot find name 'defaultCoords' and Cannot find name 'defaultZoom' ". When I installed npm i leaflet-omnivore i got deprecated warnings. Could this be the issue? Thanks
@WesDoyle
@WesDoyle 7 лет назад
Hi Daniel - In this case, I think it's looking for the defaultCoords and defaultZoom variables you are passing to the Leaflet setView method, as in L.map('map').setView(defaultCoords, defaultZoom); in the map service. You'll want to be sure to define those variables before using them. See around the 50:50 mark in the video. Let me know if you're still stuck after ensuring those variables have been set. For more info on the setView method, the leaflet docs - leafletjs.com/reference-1.1.0.html - show the method definition for setView(). Let me know if you get it working!
@ericwilliam1697
@ericwilliam1697 7 лет назад
Is this tutorial done using Angular 2 instead of Angular 4?
@bastooopanooo2311
@bastooopanooo2311 11 месяцев назад
how do we then drive on that route?
@Kacisse
@Kacisse 6 лет назад
Hey, somebody knows how to buid a "Turn-By-Turn" navigation with Leaflet ? :s Thanks experts
@aes9270
@aes9270 6 лет назад
hey man, im just learning ionic with angular js, I wanted to create the same as this video, only that I'm using ionic,i don't know how make it work with ionic, pls help :(
@reach_perumal
@reach_perumal 7 лет назад
could you pls make something on shared modules/lazy loaded modules with routing?
@WesDoyle
@WesDoyle 7 лет назад
+vinayaga perumal great suggestion, I will consider it for a future video!
@reach_perumal
@reach_perumal 7 лет назад
Wes D Thank you so much for considering. your efforts much appreciated!! thank you again.
@elbalagardo43
@elbalagardo43 6 лет назад
you are a cappo thanks to share
@prograamerxxxi5950
@prograamerxxxi5950 4 года назад
you look so pretty
@anastasiusvivaldus3364
@anastasiusvivaldus3364 5 лет назад
I love ~1-hour build-an-app projects -- best/most-fun way to learn. This one was . Thx so much. Please keep them coming! +1 Subscribe!
@zacharielaneville6755
@zacharielaneville6755 5 лет назад
hey there, really great tutorial! I only have one question: Have you ever gotten the error "Uncaught TypeError: Cannot set property 'L' of undefined". I think it relates back to the scripts I'm importing (particularly to Leaflet). I don't think the import is working, as my second window isn't showing the map at all or any of the activity parameters when clicked on from the original list.
@matevzmak6781
@matevzmak6781 4 года назад
I have the same problem, maybe it relates to angular version.
@atulnarang1538
@atulnarang1538 7 лет назад
Nice Videos Bro! Please make an app using MongoDB, Express as well.
@WesDoyle
@WesDoyle 7 лет назад
+Atul Narang - Great suggestion, thanks!
@alejandroocanas8990
@alejandroocanas8990 5 лет назад
Hi! It is an amazing tutorial! I'm new in Angular and I got this error at map.service.ts: "ERROR ReferenceError: L is not defined", I have the plotActivity method same as the video.
@chetex
@chetex 5 лет назад
Same for me... Any solution?? Thanks
@veda_dom
@veda_dom 7 лет назад
hy Wes, thank you for this Video. i have Angular project i am developing and i would like to use map to direct customers to sellers. i really need your assistance on how i can make it. the video on GPS i really like but it does enter data status, How about to load it from server ? thank you brother
@WesDoyle
@WesDoyle 7 лет назад
+Nsengimana Veda Dominique Thanks for the comment - sound great - I'll be releasing a video shortly demonstrating the use of Firebase as a backend live database which may be useful to you. I'll be making another video about forms for inputting data as well. All the best.
@veda_dom
@veda_dom 7 лет назад
also brother may u show us how to create chat in angular 4 because using IONIC is kind complicated. Thank you very much for your time and consideration.
@WesDoyle
@WesDoyle 7 лет назад
+Nsengimana Veda Dominique nice idea, will definitely consider it for a future video!
@danielrod2614
@danielrod2614 7 лет назад
Hi awesome video, any ideas why map doesnt display on hitting link. Thanks a lot.
@WesDoyle
@WesDoyle 7 лет назад
+Daniel Dodd - check out the page inspector by right-clicking on the page that isn't working for you, and select Inspect, then click on the Console tab. Make note of any errors you see there - this is how I often debug issues while developing.
@DanielRLuke
@DanielRLuke 7 лет назад
Were you in northern China five years ago?
@sagartimalsina
@sagartimalsina 7 лет назад
Apps works fine but I am seeing this error in console, please help me out MapComponent.html:12 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Lake Shore'. at viewDebugError (core.es5.js:8418) at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8396) at checkBindingNoChanges (core.es5.js:8560) at checkNoChangesNodeInline (core.es5.js:12421) at checkNoChangesNode (core.es5.js:12395) at debugCheckNoChangesNode (core.es5.js:13172) at debugCheckRenderNodeFn (core.es5.js:13112) at Object.eval [as updateRenderer] (MapComponent.html:12) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094) at checkNoChangesView (core.es5.js:12217)
@jkracing
@jkracing 7 лет назад
great video, but i have a problem displaying content from the activity-list.component.html file. It doesn't show any errors
@WesDoyle
@WesDoyle 7 лет назад
+jkracing - if you'd like me to review your code, feel free to create a github repo and send a link! I'll see if I can help!
@jkracing
@jkracing 7 лет назад
wow I didn't expect a response so quickly! will do thanks!
@jkracing
@jkracing 7 лет назад
github.com/JEK1000/exercise-tracker
@WesDoyle
@WesDoyle 7 лет назад
Hey man, quickly looking at your repo, it looks like you just need to complete your app.component.html file. It's currently empty, meaning your page isn't going to render anything inside your app-root tags. Check it out starting around 37:52 in this video. It looks like you don't have any routes defined yet, also. If you run into any issues once you get that page filled out, send me a message from my channel and let me know, happy to try and help out.
@jkracing
@jkracing 7 лет назад
thanks, subscribed! looking forward for more quality videos in the near future!
@JustCallMePCra
@JustCallMePCra 7 лет назад
Video is great somehow though everything compiles but nothing shows in my activity-list component.html. I was following along good until the 28 min mark... lol
@WesDoyle
@WesDoyle 7 лет назад
+Lj Craft if you push your code to a github repo I'd be happy to help troubleshoot!
@JustCallMePCra
@JustCallMePCra 7 лет назад
That would be awesome man thank you github.com/LjCraft12/gps-activity-tracker
@JustCallMePCra
@JustCallMePCra 7 лет назад
What a quick reply I really appreciate that alot and even offering to help.
@WesDoyle
@WesDoyle 7 лет назад
No problem - it looks like your current issue is in your app.component.html. Looking at your repo, your app.component.html contains the same contents as your activity-list-component.html. As a starting point, replace what you have in app.component.html with to see that component get rendered - that appears to be working! A bit later, you'll use the router module to choose which component is activated. Let me know if you're still having issues, and best of luck!
@SaiPrakash16
@SaiPrakash16 6 лет назад
getTotalActivities(allActivities: IActivity[]) { return allActivities.length(); } for this above.
@inframatic
@inframatic 6 лет назад
You tell us to copy an paste stuff from your github but this code is like 5 steps beyond what you have actually pasted, which leads to an error. quite annoying. for instance, you tell us to copy and paste activity-list.component.html from github but this contains a reference to routerLink which cannot be used yet. Naturally an error is thrown.
@louisferreira9055
@louisferreira9055 7 лет назад
you're typing a lot of angular stuff, but not explaining what they are.... not a very good 'tutorial' is it?
@WesDoyle
@WesDoyle 7 лет назад
Sorry, Louis! Let me know if there is anything you don't understand and I'll try to help you out.
Далее
Angular 4 Tutorial - Image Search App with Http
49:06
Ionic 4: Should you Build a Hybrid App?
10:35
Просмотров 254 тыс.
Angular in 100 Seconds
2:00
Просмотров 752 тыс.
What’s new in Angular v18
20:08
Просмотров 118 тыс.
We choose to go to the moon (John F. Kennedy)
0:56
Просмотров 84 тыс.
Angular Map using Leaflet and OpenStreetMap
2:22
Просмотров 16 тыс.
Angular Image Upload Made Easy
12:43
Просмотров 418 тыс.