GEOGRAPHICAL WEB APPLICATION Tminus 3 GO no go

GEOGRAPHICAL WEB APPLICATION T-minus 3!

GO no go for launch! • Interactive Maps. • Events Handlers: • User interface events • State change events • JSON • Using Google web services: • Geocoding • Distance Matrix • Directions

Showing a Marker at “standing” position • Problem: Georeferencing and loading a map happen in idependent threads-> They should synchronize • Solution: the last one puts the mark and centers the map: • Thread for obtaining geolocation •

Showing a Marker at “standing” position • Thread for loading map • Function for creating the mark and centering the map (see 39 Geolocation. Marker)

Geographical web application • Interactive Maps: Adding events to maps. User Interface Events State Change Events click zoom_changed dblclick center_changed mouseup bounds_changed mousedown mouseover mouseout

Geographical web application (see 11 Events. Handlers 1 and • Interactive Maps: Example of Events Handlers. 11 Events. Handlers. Zoom. Changed. Example ) //Adding Listeners google. maps. event. add. Listener(map, 'center_changed', function() { //Function called when center changed alert("Wow!, do not move me, I will get dizzy!"); }); In this case we want information about event google. maps. event. add. Listener(map, 'mousedown', function(event){ pos = event. lat. Lng; alert("Point Selected: "+pos. to. String()); }); //Adding a listener to a marker google. maps. event. add. Listener(marker, 'click', function() { //Function called when click marker alert("Hello my name is "+marker. get. Title()+" and I am a marker"); });

Geographical web application • Example: Showing info when mouse over a marker (see 12 Events. Handlers 2) //Info Window Object var info = new google. maps. Info. Window({ content: "Hello World!" //Content of Info. Window }); //Initiatlly Info. Window is closed google. maps. event. add. Listener(marker, 'mouseover', function(){ info. open(map, marker); //Open when mouse over }); google. maps. event. add. Listener(marker, 'mouseout', function(){ info. close(map, marker); //Close when mouse out });

Geographical web application • Putting marks on the map by clicking • Every time the map is clicked a mark is shown in the map and the long and lat are shown as text • See A 03 Point. Selection • variant: keep all marks shown • See A 03 Point. Selection. B

Simple ovelay in Google maps • 11 Overlay. Example

Geographical web application • TIPS to manage multiple markers: • Store all your markers in a marker. Array before add them to the map. And set an id to them. • Create a function to handle events dynamically to markers. • Then from handler function you can ask for this. id and you will get the index. Same applies for polylines and polygons //Function to manage multiple markers function add. Marker(marker, txt){ //Set id according to marker. Array's length marker. id=marker. Array. length(); marker. Array. push(marker); //Add to Array //Event Handler google. maps. event. add. Listener(marker, 'click', function(){ alert("You click the marker id "+marker. id); //You can get the index }); } //Usage var mymarker = new google. maps. Marker({ position: location, //Some location map: map }); add. Marker(mymarker); //Add marker

Showing the opacity value on mouse clicking • Heatmap 01 Linear. Color. V 2 • Create markers, to which listeners will be attached. • Heatmap 01 Linear. Color. V 3. 1 • Listeners attached to polygons

Showing the opacity value on mouse clicking • Heatmap 01 Linear. Color. V 3. 2 • Get the location of the mouse click and calculates the opacity there

Geographical web application • Using Google web services: • You can work with geographical Google web services via URL queries or just in Javascript Google Maps API v 3 • Main Google web services: • Geocoding: Obtaining coordinates -latitude and longitude- from an address • Distance Matrix: Obtaining time and distance to travel from a place to another • Directions: Obtaining a route based in N coordinates to travel from a place to other Directions service uses a lot of time and recourses, in order to know only the distance between 2 point use Distance Matrix instead

Geographical web application • JSON: an important element while using Google Maps API v 3 • JSON is a standard format to represent object data • It’s based on key-value pairs • Represent a valid Javascript object, that’s why JSON is widely used • General Syntax { "key 1": value 1, "key 2": value 2, "key 3": value 3, . . . } Values could be of any type: numbers, strings, booleans, arrays or even other objects with the same notation

Geographical web application • JSON Example { "name": "Max F. ", "phone": [87322351, 2672536], "foreign": true, "location": { "country": "United States", "city": "New York", "coordinates": { "lat": 40. 7526, "lng": -74. 2133 } } } You can read JSON data in Javascript using the predefined function JSON. parse(string)

Geographical web application • Geocoding: obtaining coordinates from addresses Using URL query: http: //maps. googleapis. com/maps/api/geocode/output? parameters output: json or xml Parameters: In Javascript use JSON because it’s easy to use and valid Javascript object address: the target address (Replace spaces with+) latlng: provide it if you want to do the inverse process sensor: true if you use a GPS to get location, false otherwise Coordinates results are in Json. Response. geometry. location. lat (or lng)

Geographical web application • Geocoding Example: Obtaining coordinates of King ST 92, Sidney, Australia http: //maps. googleapis. com/maps/api/geocode/json? address=King+ST+92+Sidney+Australia&sensor=false • JSON Result: (a lot of other information also is received) (see example 14) { "results" : [ { "address_components" : [ { "long_name" : "King Street Wharf", "short_name" : "King Street Wharf", "types" : [ "point_of_interest", "establishment" ] }, { "long_name" : "Sídney", "short_name" : "Sídney", "types" : [ "locality", "political" ] }, { "long_name" : "Nueva Gales del Sur", "short_name" : "NSW", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "Australia", "short_name" : "AU", "types" : [ "country", "political" ] }, { "long_name" : "2000", "short_name" : "2000", "types" : [ "postal_code" ] } ], "formatted_address" : "King Street Wharf, Sidney Nueva Gales del Sur 2000, Australia", "geometry" : { "location" : { "lat" : -33. 865662, "lng" : 151. 202115 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 33. 8643130197085, "lng" : 151. 2034639802915 }, "southwest" : { "lat" : -33. 8670109802915, "lng" : 151. 2007660197085 } } }, "partial_match" : true, "types" : [ "point_of_interest", "establishment" ] } ], "status" : "OK" }

Geographical web application • Geocoding Google Maps API Example: (see example 15) var geocoder = new google. maps. Geocoder(); //Instance a geocoding service //Request, indicate the address var request = {'address': "Clarence ST 50, Sidney, Australia"}; geocoder. geocode(request, function(results, status){//Process the request // Always check status, it fails several times. if (status == google. maps. Geocoder. Status. OK){ //results is an array, index 0 is the most accurate result. map. set. Center(results[0]. geometry. location); var marker = new google. maps. Marker({ map: map, position: results[0]. geometry. location }); }else{ //Reasons to fail: address not found, to much queries, http errors, etc. alert('ERROR: ' + status); } });

Geographical web application • Same as before, but now add the address to the message on the top • See A 04 Address. Selection

Geographical web application • Distance Matrix: obtaining distance and time in a travel Using URL query: http: //maps. googleapis. com/maps/api/distancematrix/output? parameters output: json or xml Parameters: origins: address or Lat. Lng of the start point destinations: address or Lat. Lng of the end point sensor: true if you use a GPS to get location, false otherwise mode: transport means: driving, walking, bicycling Driving is the default value Distance and time results are in Json. Response. rows. elements. distance (or duration)

Geographical web application • Distance Matrix Example: Obtaining time and distance from Tokio to Kioto http: //maps. googleapis. com/maps/api/distancematrix/json? origins=Tokio&destinations=Kioto http: //maps. googleapis. com/maps/api/distancematrix/json? origins=Tokio|Nara&destinations=Kioto|Osaka • see https: //developers. google. com/maps/documentation/distancematrix/ for limitations in its use • JSON Result: Distance values are in meters, and time values are in seconds { "destination_addresses" : [ "Kioto, Prefectura de Kioto, Japón" ], "origin_addresses" : [ "Tokio, Japón" ], "rows" : [{ "elements" : [{ "distance" : { "text" : "459 km", "value" : 458858 }, "duration" : { "text" : "5 h 33 min", "value" : 19951 }, "status" : "OK" }]}], "status" : "OK" }

Geographical web application • Distance Matrix API: Obtaining time and distance from User Inputs See 16 Distance. Matrix function get. Info(){ var origin = Tokio; var destination = Kioto; var DM = new google. maps. Distance. Matrix. Service(); DM. get. Distance. Matrix({ origins: [origin], destinations: [destination], travel. Mode: google. maps. Travel. Mode. DRIVING, }, show. Results); } //Callback function show. Results(response, status) { var s = “Trip is "+response. rows[0]. elements[0]. distance. text+“ “long and takes "+response. rows[0]. elements[0]. distance. text; alert(s); } { "destination_addresses" : [ "Kioto, Prefectura de Kioto, Japón" ], "origin_addresses" : [ "Tokio, Japón" ], "rows" : [{ "elements" : [{ "distance" : { "text" : "459 km", "value" : 458858 }, "duration" : { "text" : "5 h 33 min", "value" : 19951 }, "status" : "OK" }]}], "status" : "OK" }

Geographical web application • Distance Matrix Service : Obtaining time and distance var origin 1 = new google. maps. Lat. Lng(40. 93, 44. 11); var origin 2 = 'Spitak, Armenia'; from one place to another. var destination 1 = 'Meghri, Armenia'; • Request and result sent and var destination 2= new google. maps. Lat. Lng(40. 08, 44. 42); received by javascript function calculate. Distances() { commands var service = new • Locations can be specified by google. maps. Distance. Matrix. Service(); service. get. Distance. Matrix( { coordinates or directions origins: [origin 1, origin 2], • The structures for this are destinations: [destination 1, destination 2], designed for sending various travel. Mode: google. maps. Travel. Mode. DRIVING, unit. System: google. maps. Unit. System. METRIC, pairs of origin-destinations avoid. Highways: false, (although in an array for avoid. Tolls: false origins and an array of }, callback); destinations) }

Geographical web application • Receiving resusts: • Results obtained in a matrix like structure • We get the distance and traveling time from each origin to each destination • See Distance. Matrix example function callback(response, status) { if (status != google. maps. Distance. Matrix. Status. OK) { alert('Error was: ' + status); } else { var origins = response. origin. Addresses; var destinations = response. destination. Addresses; var results. String = ''; for (var i = 0; i < origins. length; i++) { var results = response. rows[i]. elements; for (var j = 0; j < results. length; j++) { result. String += origins[i]+' to '+ destinations[j] + ': ' + results[j]. distance. text + ' in ' + results[j]. duration. text + ' '; } }

Challenge • Look at 06 Nearest. Point. Directions: • It defines 3 points (medical facilities) • When the user clicks on the map, it calculates the distance from that point to the medical facilities, decides which is the nearest and paints the path (directions) from the clicked point to the nearest medical facility • Distance is calculated by with the Haversine Formula, which is in fact the nearest but by air • Challenge: chose the nearest using google distance service

Geographical web application • Directions: obtaining a route (N coordinates) of a travel Using URL query: http: //maps. googleapis. com/maps/api/directions/output? parameters output: json or xml Parameters: origin: address or Lat. Lng of the start point destination: address or Lat. Lng of the end point sensor: true if you use a GPS to get location, false otherwise mode: transport means: driving, walking, bicycling waypoints: midpoints of the path Coordinates array results are in Json. Response. routes. legs. steps

Geographical web application • Directions Example: Obtaining directions of 2 Sidney places http: //maps. googleapis. com/maps/api/directions/json? origin=William+ST+155+Sidney+Australia &destination=King+ST+80+Sidney+Australia&sensor=false • JSON Result: (Direction results have much more information than others) { "routes" : [{ "bounds" : {"northeast" : {"lat" : -33. 8299489, "lng" : 151. 2036268}, "southwest" : {"lat" : -33. 8768538, "lng" : 151. 0093817}}, "legs" : [ { "distance" : {"text" : "22, 3 km", "value" : 22288}, "duration" : {"text" : "26 min", "value" : 1556}, "end_address" : "King Street Wharf, Sidney Nueva Gales del Sur 2000, Australia", "end_location" : {"lat" : -33. 8657065, "lng" : 151. 2021535}, "start_address" : "William St Granville Medical Centre, 68 William Street, Granville Nueva Gales del Sur 2142, Australia", "start_location" : {"lat" : -33. 8358626, "lng" : 151. 010326}, "steps" : [ { "distance" : {"text" : "77 m", "value" : 77}, "duration" : {"text" : "1 min", "value" : 10}, "end_location" : {"lat" : -33. 8357714, "lng" : 151. 0095003}, "start_location" : {"lat" : -33. 8358626, "lng" : 151. 010326}, "travel_mode" : "DRIVING"}, …

Geographical web application • Directions service Google Maps API example //Request service var directions. Service = new google. maps. Directions. Service(); //Rendering service var directions. Display = new google. maps. Directions. Renderer(); directions. Display. set. Map(map); //Set map object to render Use a Direction Service to get info, and a Direction Render to show the results var request = { //Set options for the travel origin: "Santiago, Chile", destination: "Valdivia, Chile", travel. Mode: google. maps. Travel. Mode. DRIVING //Walking , Bicycling , Transit }; //Process the request directions. Service. route(request, function(response, status){ if (status == google. maps. Directions. Status. OK){ //Show the route directions. Display. set. Directions(response); } });

Geographical web application • Directions service Google Maps API example

Geographical web application • Directions using waypoints example var directions. Service = new google. maps. Directions. Service(); var directions. Display = new google. maps. Directions. Renderer(); directions. Display. set. Map(map); //Define Waypoints var waypts = [{location: "Rancagua, Chile", stopover: true}, {location: "Pucon, Chile", stopover: true} }]; var request = { origin: "Santiago, Chile", destination: "Valdivia, Chile", waypoints: waypts, //Set Waypoint array optimize. Waypoints: true, // OPTIMIZE ROUTE travel. Mode: google. maps. Travel. Mode. DRIVING }; directions. Service. route(request, function(response, status) { if(status == google. maps. Directions. Status. OK) directions. Display. set. Directions(response); } });

Geographical web application • Directions using waypoints example

END • Geographical Web Aplication GO!. • Geographical Databases Launch in T-minus 2!