Geographical Data Types Geographical Data Geometrical data types

Geographical Data Types • Only based on latitude and longitude Vitruvius 70 BC maybe

Geographical Data Types Geometric Type Representation Point [lat, lng] Line [[lat 1, lng 1],

Geographical Data Types • Geographical Projections • Cylindrical • Pseudocylindrical • Azimuthal • Others….

Measure distance in Mercator Coordinate System • Latitude and Longitude are angle representations, so

Geographical Data Types • REMEMBER : • WEB uses Mercator: 4326!!!!!

Web Visualization Components Google Maps Open. Layers Include Tiles (images) Use Tiles from: Google,

Web Visualization Components • Example Google: Just a map <html> <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="https: //maps. googleapis.

Web Visualization Components Open. Layers <html> <body onload="init()"> <div id="map"></div> <!-- Define properties for

Web Visualization Components • Open. Layers Example: Adding a marker //Define a new layer

Web Visualization Components • Displaying a Point as a Marker //Create a marker object

Web Visualization Components • Displaying a line //Array of Lat. Lng indicate the extreme

Web Visualization Components • Displaying polylines //Array of Lat. Lng indicate the extrem points

Web Visualization Components • Displaying areas as polygons // Array of vertex: First point

Web Visualization Components • Displaying areas as circles //Creating a Circle Object var circle

Heat. Maps • 1. Get the bounds of the map area and divide this

Heat. Maps • 2. Simple Point Heat. Map: Calculate the distance of each grid

Heat. Maps • 3. Multi. Point Heat. Map: Calculate the distance of each grid

Heat. Maps • 4. Matrix Heat. Map: In a matrix you have values of

END • Web Visualization Components GO!. • Geographical Web Aplication Launch in T-minus 3!

Slides: 25

Download presentation

Geographical Data Types • Geographical Data • Geometrical data types • Geographical projections • Web visualization Components • Google Maps • Open. Layers • Displaying in Maps • Points • Lines • Polylines • Areas • Heat. Maps

Geographical Data Types • Only based on latitude and longitude Vitruvius 70 BC maybe the most important architect and engineer of all times. Big roman cities were planned using his coordinate system… and yes, same guy trying to measure things using human body →

Geographical Data Types Geometric Type Representation Point [lat, lng] Line [[lat 1, lng 1], [lat 2, lng 2]] Polyline [[lat 1, lng 1], [lat 2, lng 2], [lat 3, lng 3], [lat 4, lng 4]] Polygon (Area) [[lat 1, lng 1], [lat 2, lng 2], [lat 3, lng 3], [lat 4, lng 4], [lat 1, lng 1]]

Geographical Data Types • Geographical Projections • Cylindrical • Pseudocylindrical • Azimuthal • Others…. • In web usually use Cylindrical • Specifically: Mercator (code 4326) – shapes does not distort on flat visualization. SCREEN!.

Measure distance in Mercator Coordinate System • Latitude and Longitude are angle representations, so getting the distance between 2 points is not easy. • Calculated by Haversine Formula var get. Distance = function(p 1, p 2) { //p 1 and p 2 has lat and lng coordinates var R = 6378137; // Earth’s mean radius in meter var d. Lat = rad(p 2. lat() - p 1. lat()); var d. Long = rad(p 2. lng() - p 1. lng()); var a = Math. sin(d. Lat / 2) * Math. sin(d. Lat / 2) + Math. cos(rad(p 1. lat())) * Math. cos(rad(p 2. lat())) * Math. sin(d. Long / 2); var c = 2 * Math. atan 2(Math. sqrt(a), Math. sqrt(1 - a)); return R * c; // returns the distance in meter }

Geographical Data Types • REMEMBER : • WEB uses Mercator: 4326!!!!!

Web Visualization Components Google Maps Open. Layers Include Tiles (images) Use Tiles from: Google, bing, yahoo, openstreetmap or whatever you want. Even a jpg image!! Uses Mercator 4326 !!! Uses almost all popular coordinates systems Only 1 layer, visualization stack. Multiple layers and each layer has a stack visualization method. Great API, easy to use. API is just Hell.

Web Visualization Components • Example Google: Just a map <html> <script src="https: //maps. googleapis. com/maps/api/js? v=3. exp"></script> <div id="map-canvas"></div>  </html> <script> var map; function init(){ //Initial options of the Map var map. Options = { zoom: 8, //Zoom level: 1 to 20 center: new google. maps. Lat. Lng(-34. 397, 150. 644) // MERCATOR!!!! }; map = new google. maps. Map(document. get. Element. By. Id('map-canvas'), map. Options); } //Constructs the Map on window load google. maps. event. add. Dom. Listener(window, 'load', init); </script>

Web Visualization Components Open. Layers <html> <body onload="init()"> <div id="map"></div>  </body> </html> <script> var map, layer; function init(){ map = new Open. Layers. Map('map'); // Map Object layer = new Open. Layers. Layer. OSM("Simple OSM Map"); // Map Layer map. add. Layer(layer); // Add Layer to map. set. Center(new Open. Layers. Lon. Lat(-71. 147, 42. 472). transform( new Open. Layers. Projection("EPSG: 4326"), // Yes you must specify! map. get. Projection. Object() // yes you can have multiple projections engines ), 12 ); // Zoom Level } </script>

Web Visualization Components • Open. Layers Example: Adding a marker //Define a new layer for markers var markers = new Open. Layers. Layer. Markers("Markers"); map. add. Layer(markers); //Add the layer to the map //Define markers options var size = new Open. Layers. Size(21, 25); var offset = new Open. Layers. Pixel(-(size. w/2), -size. h); //Setting the marker icon var icon = new Open. Layers. Icon('http: //www. openlayers. org/dev/img/marker. png', size, offset); //Add the marker to the layer markers. add. Marker(new Open. Layers. Lon. Lat(0, 0), icon)); // USING DEFAULT PROJECTION OBJECT, MUST CHECK IF MERCATOR!!!

Web Visualization Components • Displaying a Point as a Marker //Create a marker object var marker = new google. maps. Marker({ //Position of the marker position: new google. maps. Lat. Lng(-25. 36388, 131. 04492), map: map, //Map Object title: "marker of a point" //tooltip }); All examples from this section are from Google Maps. In order to use Open. Layers, all objects projections must be adapted.

Web Visualization Components • Displaying a line //Array of Lat. Lng indicate the extreme points of the line var corners = [new google. maps. Lat. Lng(-29. 925626, -71. 281886), new google. maps. Lat. Lng(-29. 932767, -71. 259956)]; //Create a Polyline(Line) Object var line = new google. maps. Polyline({ path: corners, //Array of Lat. Lng map: map, //Map Object stroke. Color: "#CC 0000", //Line color stroke. Opacity: 0. 8, //Line Opacity stroke. Weight: 2 //Line width });

Web Visualization Components • Displaying polylines //Array of Lat. Lng indicate the extrem points of the line var corners = [new google. maps. Lat. Lng(-29. 925626, -71. 281886), new google. maps. Lat. Lng(-29. 932767, -71. 259956), new google. maps. Lat. Lng(-29. 926891, -71. 258153), new google. maps. Lat. Lng(-29. 915025, -71. 252317), new google. maps. Lat. Lng(-29. 913835, -71. 256694)]; //Create a Polyline Object var line = new google. maps. Polyline({ path: corners, //Array of Lat. Lng map: map, //Map Object stroke. Color: "#CC 0000", //Line color stroke. Opacity: 0. 8, //Line Opacity stroke. Weight: 2 //Line width });

Web Visualization Components • Displaying areas as polygons // Array of vertex: First point and last point must be equal! var triangle. Coords = [new google. maps. Lat. Lng(25. 774252, -80. 190262), new google. maps. Lat. Lng(18. 466465, -66. 118292), new google. maps. Lat. Lng(32. 321384, -64. 75737), new google. maps. Lat. Lng(25. 774252, -80. 190262)]; //Create a Polygon Object var polygon = new google. maps. Polygon({ path: triangle. Coords, //Array of Lat. Lng map: map, //Map Object stroke. Color: "#FF 9900", //Line color stroke. Opacity: 0. 8, //Line Opacity stroke. Weight: 2, //Line width fill. Color: "#FF 9900", //Fill color fill. Opacity: 0. 3 //Fill Opacity });

Web Visualization Components • Displaying areas as circles //Creating a Circle Object var circle = new google. maps. Circle({ //Position of the center: new google. maps. Lat. Lng(-25. 36388, 131. 04492), radius: 1000, //radius in meters map: map, //Map Object stroke. Color: "#0000 FF", //Line color stroke. Opacity: 0. 8, //Line Opacity stroke. Weight: 2, //Line width fill. Color: "#0000 FF", //Fill color fill. Opacity: 0. 3 //Fill Opacity });

Heat. Maps • 1. Get the bounds of the map area and divide this area in a grid of n x n rectangles Map. get. Bounds() is a method to var bounds = map. get. Bounds(); var res = 100; access map’s boundary var startx = bounds. get. North. East(). lng(); information. In this case it is used var stepx= (bounds. get. South. West(). lng() - startx)/res; get. South. West and get. North. East var starty = bounds. get. North. East(). lat(); in order to have all lat, lng limits var stepy= (bounds. get. South. West(). lat() - starty)/res; for(var i=0; i<res; i++){ for(var j=0; j<res; j++){ var square = [new google. maps. Lat. Lng(starty + stepy*i, startx+j*stepx), new google. maps. Lat. Lng(starty + stepy*i, startx+j*stepx +stepx), new google. maps. Lat. Lng(starty + stepy*(1+i), startx+j*stepx + stepx), new google. maps. Lat. Lng(starty + stepy*(i+1), startx+j*stepx ), new google. maps. Lat. Lng(starty + stepy*i, startx+j*stepx)]; var square. Pol = new google. maps. Polygon({ paths: square, . . . }. . .

Heat. Maps • 1. Get the bounds of the map area and divide this area in a grid of n x n rectangles (obviously lines will be invisible, it’s only for the example)

Heat. Maps • 2. Simple Point Heat. Map: Calculate the distance of each grid to the heat point and assign a value, according to this associate a color (or opacity). //Coordinates of actual grid actualgrid = new google. maps. Lat. Lng(starty + stepy*i, startx+j*stepx); . . . // Distance between heat point and actual grid get. Distance is the var x = get. Distance(heatpoint, actualgrid); function defined at the var mean = 1000; //Dispersion radius beginning of the chapter //Simple linear decay according to the distance x=Math. abs(x); var val = Math. max((2*mean-x)/(2*mean), 0); // Assign a 0 to 255 value to define the red intensity var col = 255*val; //Convert to a color and use this in square. Pol fill. Color return "rgb("+Math. round(col, 0)+", 0, 0)";

Heat. Maps • 2. Simple Point Heat. Map: Calculate the distance of each grid to the heat point and assign a value, according to this associate a color (or opacity).

Heat. Maps • 3. Multi. Point Heat. Map: Calculate the distance of each grid to each heat point and assign a value, and sum all values, then assign a color (or opacity) //Define the coordinates of all heat points var positions = [ new google. maps. Lat. Lng(. . . ), . . . ]; . . . //Calculate the distance and value for each heat point var val=0; for(var i=0; i<positions. length; i++){ var x = get. Distance(positions[i], actualgrid); . . . //Same as before //But sum all values to get the final value val += Math. max((2*mean-x)/(2*mean), 0); . . . //Then assign the color var col = 255*val; return "rgb("+Math. round(col, 0)+", 0, 0)";

Heat. Maps • 3. Multi. Point Heat. Map: Calculate the distance of each grid to each heat point and assign a value, and sum all values, then assign a color (or opacity)

Heat. Maps • 4. Matrix Heat. Map: In a matrix you have values of heat intensity, read the matrix assign heat point according to matrix positions, use the technique as before but in values multiply by heat factor given in matrix //Heat Points from matrix var mat = [[-4, -2, 0, -3], [-2, 0, 4, 2], [ 0, -1, 0, 6]]; var positions = []; var bounds = map. get. Bounds(); //Same startx, stepx. . . variables as before for(var i=0; i<m. length; i++){ for(var j=0; j<m[i]. length; j++){ if(m[i][j]!=0){ //Save the magnitude and positions. push({ p: new google. maps. Lat. Lng(starty+stepy*(i+0. 5), startx+stepx*(m[i]. length-j-0. 5)), mag: m[i][j]});

Heat. Maps • 4. Matrix Heat. Map: In a matrix you have values of heat intensity, read the matrix assign heat point according to matrix positions, use the technique as before but in values multiply by heat factor given in matrix //Assign different colors according to value var x = get. Distance(positions[i]. p, actualgrid); . . . //In value multiply by heat factor val += Math. max((2*mean-x)/(2*mean), 0)*positions[i]. mag; . . . // Then assign the color according to value // For example red to positive and blue to negative if(val>0){ //Red intensity val = Math. round(255 -255*val/5, 0); return "rgb(255, "+val+")"; } else{ //Blue intensity val = Math. round(255+255*val/5, 0) //Note the sign of val return "rgb("+val+", 255)"; }

END • Web Visualization Components GO!. • Geographical Web Aplication Launch in T-minus 3!