DailyJS

Route360, ngVideo

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

video maps angularjs

Route360, ngVideo

Posted by Alex R. Young on .
Featured

video maps angularjs

Route360, ngVideo

Posted by Alex R. Young on .

Route360

Route360

The Route360 JavaScript API (GitHub: route360 / r360-js, License: MIT, Bower: route360) by Henning Hollburg and Daniel Gerber is a library for Leaflet that adds some cool features:

  • Generate polygons for reachable areas based on a point on the map
  • Supported for walk, car, bike and transit routing
  • Map controls: travel time slider, date and time chooser, and travel type chooser
  • Routing information from source to destination, including travel time and transit trips
  • Support for elevation data

This is a snippet of the polygon API:

var cpl = r360.route360PolygonLayer();  
map.addLayer(cpl);

var travelOptions = r360.travelOptions();  
travelOptions.addSource(marker);  
travelOptions.setTravelTimes([300, 600,900, 1200, 1500, 1800]);

r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {  
  cpl.addLayer(polygons);
  map.fitBounds(cpl.getBoundingBox()
});

ngVideo

ngVideo (GitHub: Wildhoney / ngVideo, License: MIT) by Adam Timberlake is a set of AngularJS directives for working with video. Videos are wrapped in an ng-video container:

<section class="video" ng-video>  

And should contain a video element. It includes a service which you can use to attach videos:

myApp.controller('VideoController', ['$scope', 'video', function($scope, video) {  
  video.addSource('mp4', 'http://www.example.com/alice-in-wonderland.mp4');
}]);

The project includes a lot of other directives for handling buffering, UI controls, data about play position and elapsed time, full screen support, and playlists.