1 / 23

Geographical Information on the web

This article discusses the launch of a geographical web application and covers topics such as JavaScript, variables, if/else/while functions, AJAX & callbacks, geographical data types, geographical projections, and web visualization components.

brodersen
Download Presentation

Geographical Information on the web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Geographical Information on the web Geographical Web Aplication Launch in T-minus 4!

  2. GO no go for launch! • JavaScript • Variables • If / else / while / functions • AJAX & Callbacks • Geographical Data Types • Points, lines, polylines, areas • Geographical Projections • Web Visualization Components • Google Maps Api V3 • OpenLayers

  3. DOM • Document Object Model (DOM) is cross-platform standard to represent and modeling objects. • HTML, XHTML, 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

  4. DOM • HTML DOM tree modeling example • <html> • <head> • <title>Page Title</title> • </head> • <body> • <h1>Hello World</h1> • <p>Content of a paragraph</p> • </body> • </html>

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

  6. Javascript • Variables are containers • Javascript can control html content var x =4; x = x +5; var y ="helloworld"; <html> <pid="demo"></p> </html> <script> • var y ="helloworld"; document.getElementById("demo").innerHTML= y; </script> innerHTML method sets HTML content to an element. In this case, the paragraph id demo is ‘filling’ with the y variable (hello world)

  7. Javascript • Basic Data Types • // Integer • varx =10; • // Decimal • vary =3.14; • // String • vars ="HelloWorld"; • // Arrays of anything • var z = ["Monday", "Friday", "Saturday", "Saturday", "Saturday", "Saturday","Sunday"]; • // JSON (usefulobject data structure) • varu = { 'day1': {"name": "Monday" , "description": "Firstday of week"} }

  8. Javascript • AssociativeArray • // AssociativeArray • varmyArray= {key1: "value1", key2: "value2"}; • // 2 differentswaystoget a value • varpointer =myArray['key2']; // object[string] • varpointer2 = myArray.key1; // object.key • // Samegoes in assignment • myArray['key3'] ="value3"; • myArray.key4 ="value4";

  9. Javascript • Operation • //Numbers • varx =5, y =4.5; • // Arithmeticoperations • varz =x+y; z = x–y; z = x/y; z = x*y; z =x%y; • //Strings • vars ="not a number "; • varp = "Im "; • //Concatenation • vark = p + s; // “Imnot a number ” • //MixedConcatenation • varmixed= k + x; // “Imnot a number 5”

  10. Javascript • if / elsestatement • whilestatement --ok itsjustwhat are youthinking… • forstatement • if(x == y) {...} //Condition is true • else {...} //Condition is false • // Variables can be NaN (Not a Number) typical conversion problem between text and number, • It happens a lot!!!! • if(!isNaN(x)){...} • for(var i=0; i<10; i++){ • myArray[i] // remember in AssociativeArrays, keys are strings. • ... • }

  11. Javascript Associative Arrays have a different for implementation This saved my life a lot of times… • for(varkeyinmyArray){ • if(myArray.hasOwnProperty(key)){ • // do somethingwithmyArray[key] • } • }

  12. Javascript Functions • functionsum(x,y){ • returnx+y; • } • varz = sum(4,5); • varmysum= sum; //pointer to sum function • z =mysum(z,sum(mysum(4,5))); // its not illegal! • sum=function(x,y){ returnx+y+x; }; // yes, we ruin the sum function • // A function name its just a variable which points to a function.

  13. Javascript • Callbacks • Callback are functions associated to specific states of others functions (i.e. errors, success, etc) • functionplotdata(data){ /* code to plot */ } • functionshowerror(msg){ /*code to show error*/ } • functioncheckdata(data, callback, error){ • if(...) { //verifying data is OK • callback(data); • }else{ • error("Please fix your data"); • } • } • vardataset = [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!

  14. Example 1 basicinteractivity Getting the element of the document • <script> • functionkk(){ • n = document.getElementById('name').value; • document.getElementById('hola').innerHTML= "Hello "+n; • } • </script> • <body> • <h2> Type in yourname and thenpressthebutton <br> • <input type="text" value="" id="name"/> • <input type="button" value="click" OnClick="kk()"/><br> • </h2> • <h1 id="hola"> hola</h1> • </body> • Shows what is written in the text field when button is pressed Changing its value Specifying what to call when a click event occurs on element

  15. Example 2: recognizingwhichbuttonwaspressed • <script> • functionkk(i){ • n = document.getElementById('name').value; • document.getElementById('hola').innerHTML= "Hello "+n+", youpressedbutton "+i; • i++; • } • </script> • <body> • <h2> Type in yourname and thenpressanybutton <br> • <input type="text" value="" id="name"/><br> • <input type="button1" value="Button 1" OnClick="kk(1)"/> • <input type="button2" value="Button 2" OnClick="kk(2)"/><br></h2> • <h1 id="hola"> hola</h1> • </body> • Shows what is written in the text field when button is pressed Specifying a parameter Giving value to parameter

  16. Example 3: using a canvas and interacting • <canvasstyle="top:0;left:0; background-color:#580" id="can" width="500" height="250" > </canvas> • <h1 id="hola"> hola</h1> • <script> • varcanvas = document.getElementById('can'); • varcontext = canvas.getContext('2d'); • functiondraw(event) { • var h = document.getElementById('hola').innerHTML= '('+event.pageX+','+event.pageY+')'; • context.beginPath(); • context.arc(event.pageX,event.pageY,40,0,2*Math.PI); • context.stroke(); • } • // click, mousedown, mouseup, click, dblclick, select, keydown, beforeinput, input, keyup • canvas.addEventListener('click',draw,false); • </script> • Shows what is written in the text field when button is pressed Specifying a canvas Getting the element and its graphic 2D context Drawing a circle Adding a listener

  17. Example 4: paintingwiththe mouse (1) • <canvasstyle="top:0;left:0; background-color:#580" id="can" width="500" height="250" > </canvas> • <h1 id="hola"> hola</h1> • <button id="clean" type="button" onclick="callbackClean()">clean</button> • <script> • varcanvas = document.getElementById('can'); • varcontext = canvas.getContext('2d'); • var que = 'no painting'; • varmyx = 0; • varmyy = 0; • functioncallbackClean() { • context.clearRect(0, 0, context.canvas.width, context.canvas.height); • } • function iniciar(event) { • myx = event.pageX; • myy = event.pageY; • que = 'painting'; • } • Shows what is written in the text field when button is pressed Where I am now Cleaning the canvas Mousedown detected: Preparing data to paint

  18. Example 4: paintingwiththe mouse (2) • function pintar(event) { • if (que == 'painting') { • context.beginPath(); • context.moveTo(myx,myy); • x = event.pageX; y = event.pageY; • a = 'line from ('+myx+','+myy+') to ('+x+','+y+')'; • var h = document.getElementById('hola').innerHTML= a • context.lineTo(x,y); context.moveTo(x,y); context.stroke(); • myx = x; myy = y; • } • } • function finalizar(event) { • que = 'no painting'; • } • canvas.addEventListener('mousedown', iniciar, false) • canvas.addEventListener('mouseup', finalizar, false) • canvas.addEventListener('mousemove', pintar, false) • </script> Mouse moving • Shows what is written in the text field when button is pressed Standing where I was Asking where I am now Drawing a line Adding listeners

  19. 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: 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.

  20. AJAX • AJAX general syntax • UsejQuery library because it’s simplify considerably AJAX calls • <scriptsrc=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> • </script> • <script> • $.ajax({ • data: { key1: value1, key2: value2, ... }, // 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>

  21. AJAX • AJAX Example: Simple change of content For this example consider that http://ajaxserver.com/generate a static response of ‘Text after ajax call’ • <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> • <pid="content">Text before ajax call</p> • <script> • $.ajax({ • url: "http://ajaxserver.com/", //destination URL • success: function (response) { • //$("#content") is equivalent to document.getElementById("content"). • $("#content").innerHTML= response; • }, • error: function (msg) { • $("#content").innerHTML="Error: " + msg; • } • }); • </script> $(“element") are called jQuery selectors, these simplifies the selection of object in the document!

  22. AJAX • AJAX Example: Dynamic Response according to data sent For this example consider that http://ajaxserver.com/generate the response depending on fruit value • <pid="desc">Select a fruit</p> • <buttononclick="getDesc(apple)">Apple</button> • <buttononclick="getDesc(banana)">Banana</button> • <script> • functiongetDesc(type){ • $.ajax({ • url: "http://ajaxserver.com/", //destination URL • data: {fruit: type}, //Data to send • method: 'post', //Method (post is recommended) • success: function (response) { • $("#desc").innerHTML= response; }, • error: function (msg) { • $("#desc").innerHTML="Error: "+msg; } • }); } • </script>

  23. Javascript Javascript … GO!

More Related