maps are cool, with javascript and angularjs
DESCRIPTION
Using interactive maps to find places and routes has become a common task for web and mobile users: online maps have doubtless changed the way people travel. In this talk Marcos & I showed how to use the W3C Geolocation API and web map services such as OpenStreetMap and Google Maps to build a geolocator web application with Javascript and AngularJS. Event: http://www.meetup.com/codeinvaders/events/166696762/TRANSCRIPT
![Page 1: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/1.jpg)
Francesco Iovine & Marcos Lin @franciov & @marcoseu
Mobile (Hack) Tea
Rome, 5 Apr 2014
Maps are coolwith Javascript and AngularJS
![Page 3: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/3.jpg)
Web map services
Google Maps
Yahoo! Maps
Bing Maps
OpenStreetMap
MapQuest
Nokia Here
Apple Maps
http://en.wikipedia.org/wiki/Comparison_of_web_map_services
![Page 4: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/4.jpg)
https://developers.google.com/maps/documentation/javascript/
Google Maps Javascript API
![Page 5: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/5.jpg)
http://dev.openlayers.org/apidocs
Open Layers
![Page 6: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/6.jpg)
Map Quickie
![Page 7: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/7.jpg)
BlackBerry Maps
https://developer.blackberry.com/html5/documentation/v2_0/maps.html
![Page 8: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/8.jpg)
BlackBerry Maps - Invoke API
blackberry.invoke.invoke( { action: "bb.action.OPEN", type: "application/vnd.rim.map.action-v1" });
![Page 9: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/9.jpg)
BlackBerry Maps - Invoke API
blackberry.invoke.invoke( { action: "bb.action.OPEN", type: "application/vnd.rim.map.action-v1", data: JSON.stringify( { "geolocation": true } ) });
![Page 10: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/10.jpg)
BlackBerry Maps - Invoke APIblackberry.invoke.invoke( { action: "bb.action.OPEN", type: "application/vnd.rim.map.action-v1", data: JSON.stringify( { "center": { "latitude": 43.4667, "longitude": -80.5167, "altitude": 2000 } } ) });
![Page 11: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/11.jpg)
BlackBerry Maps - Invoke APIblackberry.invoke.invoke( { action: "bb.action.OPEN", type: "application/vnd.rim.map.action-v1", data: JSON.stringify( { "placemark": { "latitude": 43.4667, "longitude": -80.5167, "name": "Waterloo", "description": "Waterloo, Ontario, Canada" } } ) });
![Page 12: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/12.jpg)
BlackBerry Maps - Invoke APIblackberry.invoke.invoke({ action: "bb.action.OPEN", type: "application/vnd.rim.map.action-v1", data: JSON.stringify( { "view_mode": "nav", "nav_end": { "properties": { "name": "Toronto", "description": "City of Toronto", "address": "Toronto, Ontario, Canada" }, "latitude": 43.7, "longitude": -79.4 } } )});
![Page 13: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/13.jpg)
Case Study
![Page 14: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/14.jpg)
![Page 15: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/15.jpg)
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map
Plotting yourself on the map
![Page 16: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/16.jpg)
OpenStreetMap
![Page 17: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/17.jpg)
Google Maps
![Page 18: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/18.jpg)
Hybrid Map
![Page 19: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/19.jpg)
googleMap.mapTypes.set(
"OSM",
new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
})
);
Hybrid Map
![Page 21: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/21.jpg)
Flow
![Page 22: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/22.jpg)
Maps
![Page 23: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/23.jpg)
Maps
/* Manage target elements */window.onhashchange = function() {
self.performSwitch(window.location.hash);};
.actionBox .tabs ul li a:target {color: white;background: navy;
}
![Page 24: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/24.jpg)
Maps
window.mMapViewController =
MapViewControllerFactory.create({mapType: ...,mapId: ...
});
![Page 25: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/25.jpg)
Search and Geolocation
![Page 26: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/26.jpg)
Search
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, 'http://nominatim.openstreetmap.org/?q=' +
query + '&format=json', true);
xhr.send();
![Page 27: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/27.jpg)
var searchBox = new google.maps.places.SearchBox(searchInput);
google.maps.event.addListener(searchBox, 'places_changed',callback)
Search
![Page 28: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/28.jpg)
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, positionOptions
)
Geolocation
http://www.w3.org/TR/geolocation-API/
![Page 29: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/29.jpg)
PositionOptions.enableHighAccuracyPositionOptions.timeoutPositionOptions.maximumAge
Geolocation
function successCallback(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// ...
}
![Page 31: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/31.jpg)
https://github.com/marcoslin/angularAMD
![Page 32: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/32.jpg)
AngularJS Quickie
![Page 33: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/33.jpg)
http://marcoslin.github.io/sample-geo-angular/
![Page 34: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/34.jpg)
Flow
![Page 35: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/35.jpg)
DOM
![Page 36: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/36.jpg)
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>
![Page 37: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/37.jpg)
var app = angular.module("geoapp", ['ngRoute']);
app.config(function ($routeProvider) { $routeProvider .when('/showOpenStreetMap', { templateUrl: "views/map.html", controller: "OpenStreetMapController"} ) ... .otherwise({redirectTo: '/showOpenStreetMap'}) ;});
Route Definition
![Page 38: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/38.jpg)
Controllers
![Page 39: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/39.jpg)
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”
});
![Page 40: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/40.jpg)
Providers
![Page 41: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/41.jpg)
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;
});
![Page 42: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/42.jpg)
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 responsed.resolve(response);
},function (error) { d.reject(error); }
);
return d.promise;};
});
// Use Promise in ControllerOpenStreetMap.search(“Via del Corso”).then(function (data) {
// data is the same response object passed by $d.resolve});
![Page 43: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/43.jpg)
https://github.com/marcoslin/sample-geo-angular
![Page 44: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/44.jpg)
![Page 45: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/45.jpg)
http://www.flickr.com/photos/vividbreeze/480057824
![Page 46: Maps are cool, with Javascript and AngularJS](https://reader034.vdocuments.mx/reader034/viewer/2022051012/53fffbba8d7f7249088b4819/html5/thumbnails/46.jpg)
Francesco Iovine & Marcos Lin @franciov & @marcoseu
Mobile (Hack) Tea
Rome, 5 Apr 2014
Maps are coolwith Javascript and AngularJS