Marcos Lin@marcoseu

HTML5 Code ShowRoma

Rome, 24 Apr 2014

Playing with Mapsusing AngularJS

http://www.energy-car.com

Catalyst forElectric

Vehicle Market

http://goo.gl/39bCsm

@

https://github.com/marcoslin/angularAMD

Let’s Talk About MapsGoogle Maps

OpenStreetMap

Apple Maps

Yahoo! Maps

Bing Maps

Nokia Here

..

http://en.wikipedia.org/wiki/Comparison_of_web_map_services

https://developers.google.com/maps/documentation/javascript/

Google Maps Javascript API

http://dev.openlayers.org/apidocs

Open Layers

https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map

Plotting yourself on the map

http://goo.gl/FVhr5L

http://marcoslin.github.io/sample-geo-angular/

OpenStreetMap

Google Maps

Hybrid Map

Show Me the Code!!!

Map Quickie

Live Code: Map Quickies

step01

map.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

Search

var xhr = new XMLHttpRequest();

xhr.open(‘GET’, 'http://nominatim.openstreetmap.org/?q=' + query + '&format=json', true);

xhr.send();

Search

var searchBox = new google.maps.places.SearchBox(searchInput);

google.maps.event.addListener(searchBox, 'places_changed',callback)

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, positionOptions)

Geolocation

http://www.w3.org/TR/geolocation-API/

PositionOptions.enableHighAccuracyPositionOptions.timeoutPositionOptions.maximumAge

Geolocation

function successCallback(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

// ...

}

The Main Course...

AngularJS Quickie

Live Code: AngularJS Quickies

step02

Flow

DOM

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>

var app = angular.module("geoapp", ['ngRoute']);

app.config(function ($routeProvider) { $routeProvider .when('/showOpenStreetMap', { templateUrl: "views/map.html", controller: "OpenStreetMapController"} ) ... .otherwise({redirectTo: '/showOpenStreetMap'}) ;});

Route Definition

Controllers

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”

});

Live Code: Nested Controllers

step03

Providers

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;

});

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;};

});

OpenStreetMap.search(“Via del Corso”).then(function (data) {// data is the same response object passed by $d.resolve});// Use Promise in Controller

Live Code: AngularJS Promise

step04

https://github.com/marcoslin/sample-geo-angular

http://www.flickr.com/photos/vividbreeze/480057824