AngularJS Google Maps Full Examples

Finally, I covered all examples of Google Maps API V3 using Angular Directive.

No javascript coding is required to have map on your site.

http://allenhwkim.github.io/angularjs-google-maps/

My Collection Of AngularJS Directives

AngularJs, Watch Anchors In Viewport

It would be so nice when I scroll around the document the navigation responds to my document that I currently see. There is one called scrollspy with bootstrap js, http://getbootstrap.com/javascript/#scrollspy. This is nice. However, it uses jQuery, and AngularJS approach and jQuery approach to handle this is very different.

Thus, I made a directive to make this work in AngularJS, watch-viewport

First, let’s make an html without using AngularJS, this will work even without javascript enabled because it’s using just html; "<a href=xxx …>" and "<a id=xxx …>”

Links and Anchors In HTML only

The following example shows links and corresponding anchors on the same page. Please click around the left-side navigation links to go to a different section.

http://plnkr.co/edit/Dx1NfUHGnPhJn6kbH9eu?p=preview

Imgur

Everything is fine, but it’s better highlight the links on the left-side that current section is on. To do that, we need to detect the current anchor in the viewport.

Detect The Current Anchor In Viewport using AngularJS

The following example has ability to check which anchor you are currently in. When the right-side section is scroll around, it saves the current section to WatchViewport.id. You can see the value of WatchViewport.id on the bottom of left-side panel

http://plnkr.co/edit/1HDs6h08eCEXDumxeb2N?p=preview Imgur

Using AnchorInViewport.id

This example makes use of AnchorInViewport.id to highlight the navigation links

http://plnkr.co/edit/uASA0iMdIMZKQDgUaZNC?p=preview Imgur

For your information, there is no javascript change compare to the previous one. To highlight each links it uses normal angularjs directive ng-class, and it works well.

However, you may not like repeating ng-class attribute with the value of {active:AnchorInViewport.id == 'section1’} on every single link.

The following example uses other directives to have the same functionality that the above example has. With the help of other directives, you do not need to specify active class on each link. The directive watches the value changes in WatchViewport.id then apply the given class name to the links

http://plnkr.co/edit/Y2IcW6Uo6qh49hSu4mXE?p=preview Imgur

Summary of code

To summarize all the directives and services that I used on this document, there are three directives and one service.

  • WatchViewport service

    • Common object used for any directives starts with watch-viewport
  • watch-viewport-selector directive

    • Takes the value of css selector, default “a[id]”
    • Collect all elements and saves to WatchViewport.elements
    • When scrolls, sets AnchorInViewport.id
  • watch-viewport-nav-selector directive

    • Takes the value of css selector to highlight the current section of the navigation, default. “a[href]”
    • It watches the change of `AnchorInViewport.id
  • watch-viewport-nav-class directive

    • Takes the value as class name to set to to the selected element, default. “active”
  • watch-viewport directive

    • This is only used with dynamic DOM update, i.e. ng-repeat
    • Add the element to WatchViewport.elements
    • No attribute value is required

Hope this is useful who reads this. and I would like to make a collection of custom directives, https://github.com/allenhwkim/angularjs-directives, and release soon. You may want to watch this repo. ;)

JSON in 2 minutes

The following is short introduction of JSON to the beginners It is a google presentation.

https://docs.google.com/presentation/d/1GiB0QW4WooJMw_5y-NqC_LZ_68uv2YEGMsBM0NTSpZw/pub?start=false&loop=false&delayms=3000

I wanted to embed the slides, but it seems tumblr does not allow iframe with external source.

Hope this helps anyone who is new to JSON.

Sigh, AngularJS Documentation

I was having hard time to document my angularJS directive, https://github.com/allenhwkim/angularjs-google-maps. The following is the list of documentation tools I have tried and built

1. docular

Pretty but not simple

We can follow this guide, then run this docular to generate documentation

Pros:

  • It generates the exactly the same style of AngularJS documentation from your code
  • It follows the same tagging that AngularJS Code
  • Clone of AngularJS Documentation Engine

Cons:

  • Need to start a server to see the documentation
  • Dependent on grunt and grunt-docular
  • Requires grunt-docular configuration
  • So many custom tags to learn
  • and more configuration, tl;dr

2. JSDoc

Simple but not pretty

Pros:

  • No server is required to see the documentation
  • Command line available

Cons:

3. dgeni

Dgeni is a documentation generator developed by the Angular team.

pros:

  • angularjs family use this; angularjs, protractor, and ionic

cons :

  • complex; no guide, no tutorial, nor documentation
  • so many steps; 14 steps of document generation(pros?)

4. Allen’s Conclusion

Why can’t we just have simple documentation generator like javaDoc? JSDoc works like a javaDoc,but it’s not customized for AngularJS. Then, if I customize JSDoc for AngularJS using plugin and template….?

Ok, let me make that template and plugin for AngularJS,

…. A week later,

Tada ~~

Pros:

  • It’s just JSDoc template designed for AngularJS
  • Taking advantage of all JSDoc Simplicity
  • group by @ngdoc tag values; controller, directive, service, or any

Cons:

  • Still not pretty design
  • Maybe more that I don’t think of at the moment

I wish this helps someone who wants to do document AngularJS code.

Allen

Q

andriuskulbis asked:

Hi, I like the idea of no programming, but how can i add the <map> directive options as $scope variables? <map zoom="mapdata.zoom" /> says that setZoom: not a number

A

Please try `{{mapdata.zoom}}` instead of `mapdata.zoom`

angular.js directory structure

.
├── app (all of the files to be used in production)
│   ├── main.html
│   ├── scripts
│   │   ├── app.js
│   │   ├── controllers
│   │   ├── services
│   │   ├── filters
│   │   └── directives
│   ├── modules (common modules coded by us)
│   ├── css
│   ├── images
│   ├── partials
│   |   └── login.html
│   ├── dist (any code made for production only. i.e. all.min.js)
│   └── vendor (3rd party scripts, i.e. jquery)
│       ├── angularjs
│       ├── bootstrap-3.0.2
│       └── leaflet-plugins
├── config (for test, doc, grunt, and package)
├── doc
├── test
|   ├── unit
|   └── regression
├── package.json (for development only)
├── Gruntfile.js (for development only)
└── node_modules (for development only)

D*** this kind of job posting..

The actual posting is here.

http://careers.stackoverflow.com/jobs/employer/Top%20Hathttp://careers.stackoverflow.com/jobs/employer/Top%20Hat

Looking for “Incredibly Smart Test Engineer ” ?
Looking for “Incredibly Smart Mobile Developer” ?

I am not looking for a job now but assuming I wanted to apply for a job to this company. I raise this question to myself

  • Am I INCREDIBLY Smart?

  • If so, what the f*** am I doing, reading this job posting? I must have a head-hunter agent and he/she does this reading, not me.

  • If I am actually INCREDIBLY Smart, I must be SUPER ARROGANT, like Sheldon in “Big Bang” series. Are they hiring weirdos and I have to work with them?

  • If not, and I want this job, I must lie to my self. Do they want employees who lie to themselves?

I wish this company just say “We are looking for a genius with IQ over 150”.

The Simplest LiveReload with Grunt

Livereload is very cool feature. It automatically watch file changes and notify to browser to update the page. So, you don’t need to refresh your page whenever update happens.

I can summarize it with two components;

  1. Server-side watcher and notifier
    This can be complete with
    1) livereload server($10)
    2) or, your own server watch and notify to browser using websocket

  2. Client-side message consumer
    This can be complete with
    1) livereload browser extension(or plugin)
    2) or, your own javascript to consume messages

As a programmer, I wanted to complete this feature with 2) and 2) both using my own script.

After two days of work, I was very close to rollout my version of livereload. However I figured out I can achieve this feature without any of my code, which means no maintenance.

The best programming is, no programing

To do so, you need to install the following node moduels

 $ npm install grunt-contrib-watch grunt-contrib-connect connect-livereload --save-dev     
  • grunt-contrib-watch is to monitor file changes and notify those to browsers using websocket with port 35729.

  • grunt-contrib-connect is to serve your files through http. You can also inject your own middleware

  • connect-livereload is the middleware used by grunt-contrib-connect to inject(add your your own script) to every single page.

The following is my gruntfile.js


module.exports = function (grunt) {

  // Load Grunt tasks declared in the package.json file
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  
  grunt.initConfig({
   
    connect: {
      all : {
        options: {
          port: 9000,
          middleware: function(connect, options) {
            return [
              require('connect-livereload')({
                src: "//rawgithub.com/allenhwkim/util/master/livereload.js"
              }),
              connect.static('examples'), //http server base directory
              connect.directory('examples')  //allow directory browsing
            ];
          }
        }
      }
    },

    watch: {
      all: {
        files: ['app/**/*', 'examples/*'],
        options: {
          livereload: true  // starts livereload server at port 35729
        }
      }
    }

  });

  grunt.registerTask('server', ['connect', 'watch']);
};

It uses my own livereload.js file using websocket client. I have tried with the existing livereload.js with no luck, and I don’t need all the features provided from that anyway.

This is the code, you can find at https://github.com/allenhwkim/util/blob/master/livereload.js


/**
 * The following code will be injected every single page served by grunt-contrib-connect
 */
(function() {
  var ws = new WebSocket("ws://localhost:35729"); 
  ws.onmessage = function(msg) {
    console.log('received message', msg);
    if ((JSON.parse(msg.data)).command == "reload") {
      window.location.reload();
    }
  }; 
})();

Cheers

Google Map As The Simplest Way

I have been looking for a way to show a map on my site, but the even with the simplest solution, I found it requires Javascript coding.

Of course, I can code Javasript as a programmer. However, I don’t want to code. The best programming is no programming. If I can achieve my goal without any coding, that’s the best.

That’s the reason I created this, ng-map, AngularJS Google Maps Directive, I believe this is the simplest, simplest, and the simplest way to show a map on your page.

Thanks to AngularJS and its engineering team.

Let’s begin with this little tag. This will show a map with the current location.
<map />


The above is fully demonstrated here. As you see, there is NO single javascript required. It just needs AngularJS and ng-map.min.js to be loaded.

The above shows my current location, but I want to see “The statue of liberty” instead.
<map center=”the statue of liberty” />


It shows little slow, because it needs to get latitude and longitude from your vague input, I want to see it right away with the detailed map.
<map center=”[40.6892,-74.0444]” zoom=”18” />


How about satellite view? No problem.
<map center=”[40.6892,-74.0444]” zoom=”15” map-type-id=”MapTypeId.SATELLITE” />


I want the statue of liberty pin-pointed. Then, let’s add a marker.
<map center=”[38.89,-77.03]” zoom=”15” map-type-id=”MapTypeId.SATELLITE”>
  <marker position=”[40.6892,-74.0444]” />
</map>


How about bird eyes view?
<map center=”[40.6892,-74.0444]” zoom=”18” map-type-id=”MapTypeId.SATELLITE” tilt=”45” />


How about? ummm…, street view?
<map id="sv" street-view="StreetViewPanorama(document.querySelector('map#sv'), {position:new google.maps.LatLng(40.688738,-74.043871)})" />


Well, that’s a bit. Many would say why didn’t I make those javascript simpler like this, <map street-view=”selector:40.688738,-74.043871” />.

It looks easy for you at the beginning with that way, but it requires you to learn my own style, which I don’t want. I want you to learn nothing but Google Maps API only.

I would rather leave it as it is because that’s how Google Maps API syntax looks like,

Let’s go further. How about bird-dyes view and streetview together?
<map center="[40.6892,-74.0444]" zoom="18"
  map-type-id="MapTypeId.SATELLITE" tilt="45"
  street-view="StreetViewPanorama(document.querySelector('div#sv'), 
    {position:new google.maps.LatLng(40.688738,-74.043871)})"/>
<div id="sv" />


So far, you haven’t done any scripting, have you?

There are a lot more than I just mentioned here. Moreover, you can have full feature of Google Maps with this directive, and you just simply follow Google Maps v3 API documents and tutorials, not my directive documents and tutorials. In fact, there is any documentation or tutorial for this directive except github README file. "It’s That Simple".

For the full code and details, github is there.