Tag: AngularJS

Posted on

AngularJS Zero to Hero course notes (1)

I’ve been learning some AngularJS for a while now (here’s some previous posts), and have an app up live with a front end built using AngularJS (http://www.spotviz.info). I just started one of the AngularJS courses on udemy.com, ‘AngularJS: From Zero to Hero‘. The regular price for the course is $299 and you can currently pick it up for a steal in their Black Friday sale. Go take a look at the other courses too on Udemy if you’re interested.

As I work through the course I’m leaving some notes here in posts for my own benefit for future reference – they might not make entire sense without context of the other training materials, go check out the course if you’re interested.

Random getting  started notes:

ng-app – bootstraps an AngularJS app, usually applied to html or body element

ng-init – initializes value or an initialization expression

ng-model – binds form input elements to model, using bidirectional binding

Posted on

Getting Started with Cal-HeatMap and the AngularJS Cal-HeatMap directive

Working on my AngularJS app that visualizes historical playback of received Amateur Radio signals (www.spotviz.info) I wanted to have a ‘heatmap’ type display that shows density of the received signals per day (or hour). Searching around, the most common library to display a heatmap seems to be Cal-HeatMap. And since this is an AngularJS based app, it makes sense to use a directive to display the heatmap in my view where needed – Angular Cal-HeatMap seemed to be what I needed.

Starting with anything new it’s far easier to build something small that works first, and then include it into something larger/more complicated. Here’s my standalone test app using Angular Cal-HeatMap with Cal-HeatMap. It has hardcoded data, just to show the heatmap rendering.

The first issue I ran into, was that my standalone app was rendering fine, but copying the same directive usage into my SpotViz app, I could not get the directive to recognize my config options, or render any data.

As with everything I’ve found so far with AngularJS, sometimes stuff that should be easy turns out to be hard, but in most cases only because I don’t understand what’s going on, or how I assume it to be working is completely wrong 🙂 At least I’m not the only one who finds this about AngularJS, to quote Nathan LeClair from one of his posts:

"As I’ve gotten a little into AngularJS I’ve been surprised
by how often my assumptions about how things will work 
have turned out to be wrong".

Lesson #1:

I don’t know if this is an issue specifically with how Angular Cal-HeatMap directive is implemented or not, but the way I was trying to use it, it appears it initializes before the point where I retrieve and setup the data for display. Once I retrieve the data, setting it in the $scope variable that the directive is using seems to have no effect; it doesn’t see the data and display as I’d expect.

My work around for this was to use ng-if to only initialize the directive when I toggle a flag after the data is ready. Previously I was using ng-show to toggle the display of the directive, but that apparently causes the directive to initialize even though it’s not visible. I don’t know if there’s something else I can do to re-initialize the directive, but this works for now.

Here’s what I ended up with:

[code]<cal-heatmap ng-if="search.showDataDensity"
config="search.heatmap.config"></cal-heatmap>[/code]

For context, here’s an example of what the heatmap looks like with some example received signal data from 2014:

heatmap_example

 

 

Lesson #2:

Cal-HeatMap uses 5 CSS styles by default for coloring according to how many data points are for each date, from .q1 through .q5. For data with a count > that whatever the top range is set to, apparently css class .q6 gets applied. Without any other change however, if you haven’t defined your own .q6, these dates will be displayed as if there’s no data on those dates. This wasn’t obvious to me, but is discussed in this post on SO. Add a custom CSS class for .q6 with a slightly darker color than .q5, problem solved.

Summary

I’ve some polishing and cleanup to do, but my heatmap display is almost ready to go!

Posted on

AngularJS and Google Maps – dynamic marker updates

I have a need to dynamically create and display markers on a Google Map. Statically declaring a single or an array of markers seems pretty easy, but updating an array of markers so they are displayed and removed over time seems more tricky using the available AngularJS libraries for Google Maps.

The two libraries I have looked at are:

Both offer AngularJS directives to insert a Google Maps into an existing page. Let’s take a quick look at each approach.

Angular Google Maps

With Angular Google Maps, use the provided directives to insert the map and an array of markers:

[code]
<ui-gmap-google-map center=’map.center’ zoom=’map.zoom’>
<ui-gmap-markers models="markers" coords="’self’" modelsbyref="false"/>
</ui-gmap-google-map>
[/code]

In my Controller I’ve added a map object to $scope with values for center and zoom:

[code]
$scope.map = {center: {latitude: 37.7699298, longitude: -122.4469157}, zoom: 12};
[/code]

… and to add the initial array of markers (random markers in SF):

[code]
var marker1 = {id: 1, latitude: 37.7699298, longitude: -122.40};
var marker2 = {id: 2, latitude: 37.7699298, longitude: -122.45};
var marker3 = {id: 3, latitude: 37.7699298, longitude: -122.46};
$scope.markers = [];
$scope.markers[0] = marker1;
$scope.markers[1] = marker2;
$scope.markers[2] = marker3;
[/code]

Since the markers array in $scope is reference by the ui-gmap-markers element, setting the markers array to [] deletes the markers from the map, and adding them back re-adds them back to the map. The property ‘coords’ is the name of the property on the object passed to models that contains the objects with the latitude/longitude properties for each marker. modelsByRef=”false” seems to add support for watching changes to the model.

ngMap

The ngMap approach is very similar. To add the map to a page with a repeating list of markers:

[code]
<map style="height:100%" center="37.7699298, -122.4469157" zoom="11">
<marker ng-repeat="pos in positions" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>
[/code]

To create the markers, create an array of markers with lat and lng properties, similarly to Angular Google Maps:

[code]
var marker1 = {lat: 37.769, lng: -122.44};
$scope.positions = [];
$scope.positions[0] = marker1;
//etc
[/code]

Summary

Since my app needs to dynamically add and remove markers for display to the Google Map, this was my primary requirement for selecting one of the libraries. I struggled to get this working initially with Angular Google Maps, but seemed to work straight out of the box with ngMap. Most of my struggles though may have been related to my misunderstanding of how $scope works in AngularJS (which I’m still learning), so maybe at some point I should go back and re-evaluate both of these again once I have a better understanding of AngularJS.

I put together a sample app that uses both of the libraries, which you can find on GitHub here: https://github.com/kevinhooke/AngularJSGoogleMapsExamples

Also, my final usage for ngMap you can see in action in my app, SpotViz, which is available here: http://www.spotviz.info/ . It allow Amateur Radio operators to playback an animated display of received station locations over time from log files from a digital mode application called WSJT-X.

 

Proudly powered by WordPress