MapQuest and AngularJS

By: Johnathon Wright on: May 07, 2013

For my current project, I need to show MapQuest maps next to an address form. As the user enters an address, I need the map to attempt to show the address.

Note: When testing, I often use console.log... so if you don't have developer tools installed, some of these won't work for you.

Step One: Basic Gist

Using this basic angularjs gist as a starting place, I added the basic code from MapQuest's open data API. It works!

Source Outcome

Step Two: using AngularJS templates ( the single-page-app thing )

In this case, you can see that the angular app is active... the word "World" replaces {{name}}. Importantly, though the content here is generated on the server side, not the client side. In my project, the map must be rendered by angularjs on the client side as part of a "single-page-app." This has something to do with HTML5 and hashtag-urls. I'm still not totally comfortable with these concepts yet, but I have seen their coolness and am getting there.

Steps to transition this from server-side to client-side rendering: * Move the content to a template file (map.html) * create a router that will recognize the current location and pick the right template to render * add

or equivalent on the server side so Angular knows where to place its content.

Here are the changes:

Outcome

Not surprisingly, the map disappears. Note this line of javascript:

  MQA.EventUtil.observe(window, 'load', function() {

so the map is drawn on window load. And angular is still loading so the #map div isn't available at that time. You can tell that the map.html view is being rendered, though, because "Here is the map" acts as a canary.

Step Three: get my map back.

based on the referenced Stack Overflow pages, looks like $routeChangeSuccess might be a winner.

Diff

However, the $routeChangeSuccess event is called twice. The first time, it is unsuccessful, since there is no #map present. ( this is the redirect in the router. )

"Here's one possible fix.":https://gist.github.com/mustmodify/5535599 It won't work once we have multiple routes, though.

Step Four: Add Address Form

Step Five: Map Address

Adding ng-model="location.zipcode" to the input tags for the form, we can then reference that data from angularjs via $scope.location.zipcode. We shouldn't bother mapping until we have at least a complete zipcode:

For diff, see https://gist.github.com/mustmodify/5533979/revisions revisions 676bf92 and 49f3f96

Step Six: Cartography

This is actually version 3 of our app. Previous versions integrated with MapQuest with heavy-handed jQuery. Instead of reusing that code I'm investing time in getting a MapQuest situation working... hopefully that pays off. It's a risk, but I think a useful one.

AngularJS has Directives which, in theory, should allow me to abstract away the setup to a plugin.

code: http://plnkr.co/edit/lEvDK8NrvR2K5Ephsy7e

References

"Writing AngularJS Services":http://stackoverflow.com/questions/13320015/how-to-write-a-debounce-service-in-angularjs

AngularJS docs

ngResource

angular.extend

AngularJS Directives

GoogleMaps AngularJS Directive

Ways to display webpages that use angularjs and multiple files

Plnkr.co -- Tthis is cool because you can (a) reference gists (a la http://plnkr.co/edit/gist:5533979?p=preview )... this is how the people on #angularjs ask you to present your questions so they don't have to guess what you're doing. However, you can't embed code from a gist in your blog... you must create a "plunk" and use that. Also, doesn't seem to be able to reference previous versions by commit number.

[bl.ocks.org](http://bl.ocks.org] allows you to render github gists based on a gist number, OR a gist number and a revision number. Uses github's URL structure.... which I guess isn't as much a feature as it gives me the impression that it's a lightweight, and by implication hopefully well-crafted and stable, layer. Plnkr's embeding doesn't add anything to the page... just shows the content from index.html. bl.ocks.org includes title, your output, and then your code. So a bit less useful for iframes, but great for linking. For instance, try http://bl.ocks.org/mustmodify/5533979/1e4fac2390cadc16c4bf78ba4c83ba582ad1ec6b

On Events

SO: AngularJS: how to run additional code after rendering a template

SO: AngularJS, how to watch for a route change

SO: AngularJS: Handling route changes

Events Not Documented

On Mapping

MapQuest Open SDK API Docs -- mostly harmless





Comments:

yeezy said: My husband and i ended up being really cheerful when Louis managed to finish up his basic research because of the precious recommendations he got while using the weblog. It's not at all simplistic to just possibly be releasing guidelines which usually men and women could have been trying to sell. And now we know we've got the website owner to be grateful to because of that. Those illustrations you've made, the easy site navigation, the friendships you give support to create - it's many exceptional, and it is aiding our son in addition to us believe that the situation is enjoyable, which is certainly extremely mandatory. Thank you for everything! yeezy [url=http://www.adidasyeezys.us.com]yeezy[/url]

vans outlet said: Needed to draft you one little note to finally thank you very much over again with your marvelous knowledge you've shown on this page. It is quite incredibly open-handed of you to grant easily what exactly numerous people could have marketed for an e book in making some dough for their own end, mostly seeing that you might well have tried it if you ever considered necessary. Those advice as well acted to be the great way to comprehend most people have the identical eagerness like my own to understand a lot more in regard to this issue. I'm certain there are many more pleasant opportunities ahead for many who looked over your blog post. vans outlet

supreme clothing said: Thank you so much for giving everyone such a wonderful opportunity to read from this website. It is often so great and as well , jam-packed with fun for me and my office peers to search your website minimum thrice in 7 days to see the latest stuff you will have. And definitely, I am also at all times fascinated with the remarkable tips and hints you give. Certain 1 ideas in this post are absolutely the finest I have had. supreme clothing

supreme clothing said: I'm just writing to make you understand of the great encounter my cousin's daughter obtained using yuor web blog. She even learned lots of pieces, not to mention how it is like to have a great giving nature to get a number of people easily fully grasp specified tricky topics. You really surpassed her expected results. Many thanks for displaying those warm and helpful, healthy, informative not to mention easy tips on this topic to Kate. supreme clothing

yeezy boost 350 v2 said: I wish to express my thanks to the writer for bailing me out of this particular challenge. Because of researching throughout the internet and getting tricks which are not productive, I assumed my life was done. Existing without the approaches to the issues you have solved by means of your entire review is a critical case, and the ones that might have adversely damaged my career if I had not come across your site. Your personal natural talent and kindness in handling every part was very helpful. I am not sure what I would've done if I had not come upon such a subject like this. I can also now look ahead to my future. Thank you so much for this high quality and result oriented guide. I won't hesitate to endorse your blog post to anyone who needs to have direction on this matter. yeezy boost 350 v2

cheap jordans said: I want to show some thanks to this writer for bailing me out of this type of crisis. As a result of browsing throughout the search engines and seeing proposals which are not pleasant, I assumed my life was over. Being alive without the presence of answers to the difficulties you have fixed by way of your write-up is a serious case, and ones which might have in a wrong way affected my career if I hadn't discovered your blog post. That expertise and kindness in maneuvering all the things was valuable. I am not sure what I would've done if I had not encountered such a solution like this. I can also at this point look forward to my future. Thank you very much for the impressive and result oriented guide. I won't think twice to recommend your web page to any individual who will need tips on this situation. cheap jordans

golden goose outlet said: Thanks a lot for providing individuals with such a breathtaking possiblity to read critical reviews from this blog. It's always so amazing and full of a great time for me personally and my office colleagues to search your website minimum thrice every week to learn the newest things you have. And lastly, I am also always happy for the unbelievable opinions you serve. Some 3 facts in this article are basically the finest I have had. golden goose outlet

golden goose said: Aw, this was a very nice post. In idea I would like to put in writing like this moreover ?taking time and actual effort to make an excellent article?but what can I say?I procrastinate alot and under no circumstances seem to get something done. golden goose

yeezy 350 said: very good post, i definitely love this website, carry on it yeezy 350

jordan 6 said: There is noticeably a bundle to know about this. I assume you made sure good factors in options also. jordan 6

yeezys said: An interesting dialogue is value comment. I believe that it's best to write extra on this subject, it won't be a taboo topic however generally individuals are not enough to speak on such topics. To the next. Cheers yeezys

goyard said: I am often to running a blog and i actually admire your content. The article has actually peaks my interest. I am going to bookmark your website and hold checking for brand new information. goyard

kevin durant shoes said: very good put up, i actually love this website, keep on it kevin durant shoes

off white nike said: you could have an excellent blog here! would you prefer to make some invite posts on my blog? off white nike

kyrie 6 shoes said: Howdy! I simply would like to give a huge thumbs up for the great data you have got here on this post. I might be coming again to your blog for extra soon. kyrie 6 shoes

jordans said: Hi there! I just would like to give a huge thumbs up for the great data you've right here on this post. I will probably be coming back to your weblog for extra soon. jordans

kyrie 4 said: After research a couple of of the blog posts on your web site now, and I actually like your approach of blogging. I bookmarked it to my bookmark web site record and shall be checking back soon. Pls check out my website as nicely and let me know what you think. kyrie 4

yeezy boost 500 said: You should take part in a contest for probably the greatest blogs on the web. I will suggest this site! yeezy boost 500

outlet golden goose said: The following time I read a weblog, I hope that it doesnt disappoint me as much as this one. I imply, I know it was my choice to read, but I actually thought youd have something attention-grabbing to say. All I hear is a bunch of whining about something that you could possibly fix in case you werent too busy in search of attention. outlet golden goose

lebron 17 shoes said: I was very happy to seek out this internet-site.I wanted to thanks for your time for this glorious learn!! I positively enjoying each little little bit of it and I've you bookmarked to take a look at new stuff you weblog post. lebron 17 shoes

yeezy 700 said: I simply wanted to make a simple remark in order to thank you for the fantastic instructions you are posting at this website. My particularly long internet research has finally been honored with professional points to write about with my partners. I would claim that we visitors are really endowed to be in a good community with so many outstanding people with helpful secrets. I feel rather happy to have discovered your entire webpages and look forward to some more entertaining moments reading here. Thanks again for all the details. yeezy 700

lebron shoes said: I simply wanted to develop a brief remark to be able to express gratitude to you for the fantastic strategies you are giving out at this site. My time consuming internet lookup has now been recognized with wonderful details to write about with my friends. I 'd tell you that we visitors actually are very lucky to be in a superb community with very many wonderful individuals with very helpful guidelines. I feel very fortunate to have come across the web pages and look forward to some more awesome times reading here. Thanks a lot once more for a lot of things. lebron shoes

kd 13 said: My husband and i ended up being now joyous that Michael managed to complete his research by way of the ideas he grabbed from your own web site. It is now and again perplexing just to possibly be giving for free guidance that others might have been selling. Therefore we grasp we've got the website owner to thank for that. The explanations you've made, the simple website menu, the relationships you will assist to promote - it's got mostly astounding, and it's letting our son and us imagine that that situation is fun, and that is really important. Thank you for the whole thing! kd 13

jordan 11 said: I needed to write you this little word in order to say thanks yet again for these splendid opinions you've provided on this page. This has been really pretty generous with people like you giving openly all numerous people could have sold as an ebook to make some money for themselves, especially considering the fact that you might well have done it if you ever wanted. Those strategies likewise acted as the fantastic way to realize that other people online have similar interest like mine to understand more on the topic of this issue. I'm sure there are some more fun instances up front for many who examine your blog post. jordan 11

kobe shoes said: I precisely wished to thank you very much all over again. I am not sure the things I could possibly have implemented in the absence of the actual points documented by you directly on my subject matter. It was before a very fearsome concern for me, but witnessing a specialised strategy you resolved that made me to leap over joy. I am just thankful for the help as well as hope you recognize what an amazing job you have been undertaking instructing most people through the use of your web page. I know that you haven't encountered any of us. kobe shoes

longchamp outlet said: I have to point out my admiration for your kind-heartedness supporting individuals who actually need guidance on that issue. Your special commitment to getting the solution all through came to be certainly good and have continuously allowed individuals just like me to achieve their goals. The informative key points indicates a great deal a person like me and extremely more to my mates. Warm regards; from each one of us. longchamp outlet

longchamp handbags said: Thank you a lot for providing individuals with such a special possiblity to check tips from here. It really is very pleasurable and jam-packed with amusement for me and my office mates to search your blog the equivalent of thrice per week to find out the fresh things you have. And lastly, we are certainly motivated with your dazzling hints you serve. Some 3 facts in this posting are essentially the best we have had. longchamp handbags

golden goose sneakers said: I wanted to create you a bit of word to help thank you so much as before for your exceptional solutions you've shown here. It's particularly open-handed with people like you to offer publicly precisely what a lot of folks might have marketed for an electronic book to make some bucks for themselves, principally now that you might well have done it in the event you wanted. Those ideas also served to be the good way to fully grasp someone else have the identical dreams much like my very own to grasp much more concerning this issue. Certainly there are numerous more pleasurable periods ahead for those who look over your blog. golden goose sneakers

curry 6 said: I precisely needed to appreciate you once again. I do not know the things that I could possibly have undertaken without the solutions discussed by you about that topic. It became the intimidating issue in my position, however , taking a look at this specialised technique you handled the issue made me to leap over delight. I will be happy for this help and as well , wish you know what a powerful job you're undertaking training the rest with the aid of your web page. Most likely you've never got to know all of us. curry 6

jordan sneakers said: Thank you a lot for providing individuals with an extremely remarkable possiblity to check tips from this website. It's always so enjoyable and also packed with fun for me personally and my office co-workers to visit your web site at minimum thrice per week to read the new secrets you will have. And definitely, I am just at all times fulfilled with all the remarkable principles you serve. Certain 2 facts on this page are certainly the simplest we have had. jordan sneakers

longchamps said: I'm just commenting to let you understand what a beneficial discovery my cousin's daughter developed browsing yuor web blog. She picked up lots of details, not to mention what it's like to have an excellent giving nature to let the rest with ease master certain problematic matters. You undoubtedly surpassed readers' desires. I appreciate you for displaying the priceless, trustworthy, explanatory not to mention cool tips on your topic to Gloria. longchamps

hermes birkin said: I wish to express my affection for your kind-heartedness in support of those individuals that should have help with the concept. Your real commitment to getting the solution across has been quite beneficial and has always made folks much like me to achieve their endeavors. This valuable useful information indicates a lot to me and somewhat more to my office colleagues. Best wishes; from all of us. hermes birkin

curry 7 said: Thanks a lot for providing individuals with such a superb chance to check tips from this blog. It's usually so terrific plus packed with a lot of fun for me personally and my office friends to visit the blog the equivalent of thrice a week to read the latest tips you have got. Not to mention, we're usually astounded with all the effective tips you give. Selected 4 ideas on this page are absolutely the very best we have ever had. curry 7

jordan 12 said: I am glad for writing to make you be aware of what a brilliant discovery my girl found reading your site. She came to understand plenty of pieces, including how it is like to have an amazing giving spirit to make other folks easily fully understand various problematic issues. You undoubtedly exceeded readers' expectations. Thank you for rendering such great, safe, educational and in addition easy thoughts on that topic to Kate. jordan 12

off-white said: I intended to draft you that little remark to finally say thanks a lot again for your beautiful opinions you have featured on this page. It is quite strangely open-handed of you to grant extensively all a few individuals might have made available for an electronic book to earn some bucks for their own end, chiefly seeing that you might have tried it in case you decided. These tricks as well worked as the easy way to recognize that other people have similar zeal the same as my personal own to see many more around this matter. I think there are several more fun times ahead for those who looked over your site. off-white

pandora bracelet said: I enjoy you because of all of the efforts on this web page. Debby enjoys carrying out investigations and it's obvious why. We notice all regarding the dynamic tactic you give functional guidelines via this blog and even attract contribution from visitors on that topic so our favorite child is truly becoming educated a lot. Have fun with the remaining portion of the year. You have been conducting a really great job. pandora bracelet
Back