Journey through javascript and angular js with the help of geolocation

  • 548 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
548
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Francesco Iovine & Marcos Lin @franciov & @marcoseu Roma JS 31 Mar 2014 Journey through Javascript and AngularJS with the help of geolocation :)
  • 2. https://developer.mozilla.org/en-US/Apps/Build/ gather_and_modify_data/Plotting_yourself_on_the_map Plotting yourself on the map
  • 3. OpenStreetMap
  • 4. Google Maps
  • 5. Hybrid Map
  • 6. http://dev.openlayers.org/apidocs Open Layers
  • 7. https://developers.google.com/maps/documentation/javascript/ Google Maps Javascript API
  • 8. http://goo.gl/FVhr5L
  • 9. Flow
  • 10. Maps
  • 11. Maps function MapSwitcherViewController() { /* DOM objects */ this.openstreetmapViewControllerBox = document.querySelector('#openstreetmap'); this.googlemapViewControllerBox = document.querySelector('#googlemap'); this.hybridmapViewControllerBox = document.querySelector('#hybridmap');
  • 12. Maps /* Manage target elements */ window.onhashchange = function() { self.performSwitch(window.location.hash); }; .actionBox .tabs ul li a:target { color: white; background: navy; }
  • 13. Maps window.mMapViewController = MapViewControllerFactory.create({ mapType: ..., mapId: ... });
  • 14. Maps JS.extend( OpenStreetMapViewController, MapViewController) JS.extend( GoogleMapViewController, MapViewController) JS.extend( HybridMapViewController, GoogleMapViewController)
  • 15. Search and Geolocation
  • 16. Search var xhr = new XMLHttpRequest(); xhr.open( ‘GET’, 'http://nominatim.openstreetmap.org/?q=' + query + '&format=json', true); xhr.send(); new google.maps.places.SearchBox
  • 17. navigator.geolocation.getCurrentPosition( successCallback, errorCallback, positionOptions ) Geolocation http://www.w3.org/TR/geolocation-API/
  • 18. PositionOptions.enableHighAccuracy PositionOptions.timeout PositionOptions.maximumAge Geolocation function successCallback(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // ... }
  • 19. https://github.com/franciov/geo
  • 20. https://github.com/marcoslin/angularAMD
  • 21. AngularJS Quickie
  • 22. http://marcoslin.github.io/sample-geo-angular/
  • 23. Flow
  • 24. DOM
  • 25. Nested View <!– In body of index.html --> <div ng-controller="MapController"> <div ng-view></div> <div class="maps"> <div id="openstreetmap” ng-class="mapfs.OpenStreetMap_class"></div> <div id="googlemap” ng-class="mapfs.GoogleMap_class"></div> <div id="hybridmap” ng-class="mapfs.HybridMap_class"></div> </div> </div> <!– In map.html --> <div class="actionBox"> <div class="tabs"><ul><li> <a ng-class="mapfs.OpenStreetMap_class" href="#/showOpenStreetMap">OpenStreetMap</a> </li></ul></div> … </div>
  • 26. var app = angular.module("geoapp", ['ngRoute']); app.config(function ($routeProvider) { $routeProvider .when('/showOpenStreetMap', { templateUrl: "views/map.html", controller: "OpenStreetMapController"} ) ... .otherwise({redirectTo: '/showOpenStreetMap'}) ; }); Route Definition
  • 27. Controllers
  • 28. Nested Controllers // Parent Controller .controller('MapController’, function($scope, OpenStreetMap, …){ $scope.mapfs = { OpenStreetMap_class = “” }; $scope.showMap = function (mapName) { if ( mapName === "openstreetmap" ) { $scope.mapfs.OpenStreetMap_class = "active"; } }; OpenStreetMap.initMap(“openstreetmap”); … ; }); // Child Controller .controller(‘OpenStreetMapController’, function ($scope) { $scope.showMap("openstreetmap"); // $scope.mapfs.OpenStreetMap_class is now “active” });
  • 29. Providers
  • 30. BaseGoogleMap .factory('BaseGoogleMap', function (…) { var MapObject = function () { … }; MapObject.prototype = { initMap: function (mapId) { … }; initSearchBox: function (inputId) { … }; }; return MapObject; }); .factory(‘GoogleMap’, function (BaseGoogleMap) { return new BaseGoogleMap(); }); .factory(‘HybridMap’, function (BaseGoogleMap) { var gmap = new BaseGoogleMap(); gmap.initMap = function (mapId) { … }; return gmap; });
  • 31. AngularJS Promise .service('OpenStreetMap', function ($http, $q) { this.search = function (query) { var url = “http://…” + query,d = $q.defer(); $http.get(url, function (response) { // Update map with data from response d.resolve(response); }, function (error) {d.reject(error); } ); return d.promise; }; }); // Use Promise in Controller OpenStreetMap.search(“Via del Corso”).then(function (data) { // data is the same response object passed by $d.resolve });
  • 32. https://github.com/marcoslin/sample-geo-angular
  • 33. http://addyosmani.com/resources/essentialjsdesignpatterns/book/
  • 34. http://www.flickr.com/photos/vividbreeze/4
  • 35. Francesco Iovine & Marcos Lin @franciov & @marcoseu Roma JS 31 Mar 2014 Journey through Javascript and AngularJS with the help of geolocation :)