GEOGRAPHICAL INFORMATION ON THE WEB Geographical Web Aplication
GEOGRAPHICAL INFORMATION ON THE WEB Geographical Web Aplication Launch in T-minus 4!
GO no go for launch! • Java. Script • Variables • If / else / while / functions • AJAX & Callbacks • Geographical Data Types • Points, lines, polylines, areas • Geographical Projections • Web Visualization Components • Google Maps Api V 3 • Open. Layers
DOM • Document Object Model (DOM) is cross-platform standard to represent and modeling objects. • HTML, XML are examples of languages based in DOM • Elements are as objects of a tree • HTML DOM: • It defines HTML elements as objects • Each HTML element has it own properties • There are events for all HTML elements
DOM • HTML DOM tree modeling example html <html> <head> <title>Page Title</title> </head> <body> <h 1>Hello World</h 1> <p>Content of a paragraph</p> </body> </html> head title “Page Title” body h 1 “Hello World” p “Content of a paragraph”
DOM & Javascript • Javascript is client-side web programing language. • Almost all nowadays browsers have implemented Javascript • HTML DOM tree object are easily manipulated by Javascript. • Javascript can control HTML elements’ properties and set listeners to its events. That makes your web pages dynamic and improving the user interface response.
Javascript • Variables are containers var x = 4; x = x + 5; var y = "hello world"; • Javascript can control html content <html> <p id="demo"></p> </html> <script> var y = "hello world"; document. get. Element. By. Id("demo"). inner. HTML = y; </script> inner. HTML method sets HTML content to an element. In this case, the paragraph id demo is ‘filling’ with the y variable (hello world)
Javascript • Basic Data Types // Integer var x = 10; // Decimal var y = 3. 14; // String var s = "Hello World"; // Arrays of anything var z = ["Monday", "Friday", "Saturday", "Sunday"]; // JSON (useful object data structure) var u = { 'day 1': {"name": "Monday" , "description": "First day of week"} }
Javascript • Associative Array // Associative Array var my. Array = {key 1: "value 1", key 2: "value 2"}; // 2 differents ways to get a value var pointer = my. Array['key 2']; // object[string] var pointer 2 = my. Array. key 1; // object. key // Same goes in assignment my. Array['key 3'] = "value 3"; my. Array. key 4 = "value 4";
Javascript • Operation //Numbers var x = 5, y = 4. 5; // Arithmetic operations var z = x+y; z = x–y; z = x/y; z = x*y; z = x%y; //Strings var s = "not a number "; var p = "Im "; //Concatenation var k = p + s; // “Im not a number ” //Mixed Concatenation var mixed = k + x; // “Im not a number 5”
Javascript • if / else statement if(x == y) {. . . } //Condition is true else {. . . } //Condition is false // Variables can be Na. N (Not a Number) typical conversion problem between text and number, It happens a lot!!!! if(!is. Na. N(x)){. . . } • while statement --ok its just what are you thinking… • for statement for(var i=0; i<10; i++){ my. Array[i] // remember in Associative Arrays, keys are strings. . }
Javascript Associative Arrays have a different for implementation This saved my life a lot of times… for(var key in my. Array){ if(my. Array. has. Own. Property(key)){ // do something with my. Array[key] } }
Javascript Functions function sum(x, y){ return x+y; } var z = sum(4, 5); mysum = sum; //pointer to sum function mysum(z, sum(mysum(4, 5))); // its not illegal! = function(x, y){ return x+y+x; }; // yes, we ruin the sum function // A function name its just a variable which points to a function.
Javascript • Callbacks • Callback are functions associated to specific states of others functions (i. e. errors, success, etc) function plotdata(data){ /* code to plot */ } function showerror(msg){ /*code to show error*/ } function checkdata(data, callback, error){ if(. . . ) { //verifying data is OK callback(data); }else{ error("Please fix your data"); } } var dataset = [0, 2, 4, 2, 6, 74, 3, 5, 7, 4, 3]; checkdata(dataset, plotdata, showerror); Note that you can pass functions as parameters in Javascript. In this case, parameters callback and error are functions!
Example 1 basic interactivity Getting the element of the document • <script> Shows what is written in the text field when button is pressed function kk(){ n = document. get. Element. By. Id('name'). value; document. get. Element. By. Id('hola'). inner. HTML= "Hello "+n; } Changing its </script> value <body> <h 2> Type in your name and then press the button <input type="text" value="" id="name"/> <input type="button" value="click" On. Click="kk()"/> </h 2> Specifying what to call when <h 1 id="hola"> hola</h 1> a click event occurs on </body> element
Example 2: recognizing which button was pressed <script> • Shows what is written in the text field when button is pressed. Specifying a function kk(i){ parameter n = document. get. Element. By. Id('name'). value; document. get. Element. By. Id('hola'). inner. HTML= "Hello "+n+", you pressed button "+i; i++; } Giving value to </script> parameter <body> <h 2> Type in your name and then press any button <input type="text" value="" id="name"/> <input type="button 1" value="Button 1" On. Click="kk(1)"/> <input type="button 2" value="Button 2" On. Click="kk(2)"/> </h 2> <h 1 id="hola"> hola</h 1> </body>
Example 3: using a canvas and interacting <canvas style="top: 0; left: 0; background-color: #580" id="can" width="500" height="250" > • Shows what is written in the text field when button is pressed </canvas> <h 1 id="hola"> hola</h 1> Specifying a canvas <script> var canvas = document. get. Element. By. Id('can'); Getting the element and its var context = canvas. get. Context('2 d'); graphic 2 D context function draw(event) { var h = document. get. Element. By. Id('hola'). inner. HTML= '('+event. page. X+', '+event. page. Y+')'; context. begin. Path(); context. arc(event. page. X, event. page. Y, 40, 0, 2*Math. PI); Drawing a circle context. stroke(); } // click, mousedown, mouseup, click, dblclick, select, keydown, beforeinput, keyup canvas. add. Event. Listener('click', draw, false); Adding a listener </script>
Example 4: painting with the mouse (1) <canvas style="top: 0; left: 0; background-color: #580" id="can" width="500" height="250" > • Shows what is written in the text field when button is pressed </canvas> <h 1 id="hola"> hola</h 1> <button id="clean" type="button" onclick="callback. Clean()">clean</button> <script> var canvas = document. get. Element. By. Id('can'); var context = canvas. get. Context('2 d'); var que = 'no painting'; Where I am now var myx = 0; Cleaning the var myy = 0; canvas function callback. Clean() { context. clear. Rect(0, 0, context. canvas. width, context. canvas. height); } function iniciar(event) { myx = event. page. X; Mousedown detected: myy = event. page. Y; Preparing data to paint que = 'painting'; }
Example 4: painting with the mouse (2) function pintar(event) { Mouse moving • Shows what is written in the text field when button is pressed if (que == 'painting') { context. begin. Path(); Standing where I was context. move. To(myx, myy); x = event. page. X; y = event. page. Y; Asking where I am now a = 'line from ('+myx+', '+myy+') to ('+x+', '+y+')'; var h = document. get. Element. By. Id('hola'). inner. HTML= a context. line. To(x, y); context. move. To(x, y); context. stroke(); myx = x; myy = y; } Drawing a line } function finalizar(event) { que = 'no painting'; } canvas. add. Event. Listener('mousedown', iniciar, false) canvas. add. Event. Listener('mouseup', finalizar, false) Adding listeners canvas. add. Event. Listener('mousemove', pintar, false) </script>
AJAX • AJAX is a technic to update parts of a web page, without reloading the whole page. Also you can transfer small amount of data in the process. • Sends a request to an URL… and wait for states: 0: Request not initialized 1: Server connection established 2: Request received 3: Processing request If state 4 arrives, request as a status • 200: OK • 404: Page not found If status is 200, Ajax call was successful. Anything else is an error. 4: Request finished and response is ready
AJAX • AJAX general syntax • Use j. Query library because it’s simplify considerably AJAX calls <script src=“http: //ajax. googleapis. com/ajax/libs/jquery/1. 1/jquery. min. js"> </script> <script> $. ajax({ data: { key 1: value 1, key 2: value 2, . . . }, // Data to send in the call url: "http: //someurl. com/", // Destination URL type: 'post', // Request method (post is recommended) success: function (response) { // Callback function if status 200 achieved }, error: function (msg) { // Callback function something goes wrong } }); </script>
AJAX • AJAX Example: Simple change of content For this example consider that http: //ajaxserver. com/ generate a static response of ‘Text after ajax call’ <script src="http: //ajax. googleapis. com/ajax/libs/jquery/1. 1/jquery. min. js"> </script> <p id="content">Text before ajax call</p> <script> $. ajax({ url: "http: //ajaxserver. com/", //destination URL success: function (response) { //$("#content") is equivalent to document. get. Element. By. Id("content"). $("#content"). inner. HTML = response; }, error: function (msg) { $("#content"). inner. HTML = "Error: " + msg; $(“element") are called } j. Query selectors, these }); simplifies the selection of </script> object in the document!
AJAX • AJAX Example: Dynamic Response according to data sent For this example consider that http: //ajaxserver. com/ generate the response depending on fruit value <p id="desc">Select a fruit</p> <button onclick="get. Desc(apple)">Apple</button> <button onclick="get. Desc(banana)">Banana</button> <script> function get. Desc(type){ $. ajax({ url: "http: //ajaxserver. com/", //destination URL data: {fruit: type}, //Data to send method: 'post', //Method (post is recommended) success: function (response) { $("#desc"). inner. HTML = response; }, error: function (msg) { $("#desc"). inner. HTML = "Error: " + msg; } }); } </script>
Javascript … GO!
- Slides: 23
