SVG Web Mapping. Four-dimensional visualization of time- and geobased data

Transcription

1 SVG Web Mapping Four-dimensional visualization of time- and geobased data SVGOpen 2008 in Nuremberg Universitiy of Osnabrück

2 Content Web Mapping Application Template Client Server communication Interaction and Animation with ECMAScript Examples Java Program Configuration Different base data Data processing Improvements Conclusion

3 Template Concept skeletal structure, filled with data at runtime three basic parts Structure Data Application logic

4 Template Concept skeletal structure, filled with data at runtime three basic parts Structure Data Application logic

5 Server Client Communication Server Client

6 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) Client

7 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) Client

8 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) Client

9 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) Client

10 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) loading template Client

11 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) Client SVG template ECMAScript data

12 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) loading script Client SVG template ECMAScript data

13 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) Client SVG template ECMAScript (navigation and loading data) data

14 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) sending query Client SVG template ECMAScript (navigation and loading data) data

15 Server Client Communication Server PHP script calculates SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) the data which has to be loaded by using viewbox-coordinates, PHP Script (calculating the data which has to be generates loaded) XML as SVG Fragments (tiles) answer Client SVG template ECMAScript (navigation and loading data) data

16 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) receiving data Client SVG template ECMAScript (navigation and loading data) data

17 Server Client Communication Server SVG template ECMAScript (creating navigation icons, filling thetemplateetc.) PHP Script (calculating the data which has to be loaded) SVG Fragments (tiles) Client SVG template ECMAScript (navigation and loading data) data

18 Interaction and Animation Realised with ECMAScript Possibilities of interaction Zoom and Pan Selecting a rectangular area Layer Choosing different time steps Executing an automatic Animation

19 Interaction with ECMAScript DOM API Changing attributes like the viewbox for zoom and pan Loading data geturl or XMLHttpRequest calling the PHP script only the changed or new data will be the answer (AJAX concept)

20 Server side SVG Map devided into tiles, stored on the server PHP-Script with old and new viewbox coordiantes as parameters calculating the zoom step and the chosen region depending on the given viewbox A bit more data than only the viewbox content to avoid waiting time while panning Answer as XML (only new data) <data><delete/><append/></data> IDs to delete Fragments to append (own parent attribute)

21 Server side SVG Map devided into tiles, stored on the server PHP-Script with old and new viewbox coordiantes as parameters calculating the zoom step and the chosen region depending on the given viewbox A bit more data than only the viewbox content to avoid waiting time while panning Answer as XML (only new data) <data><delete/><append/></data> IDs to delete Fragments to append (own parent attribute)

22 Server side SVG Map devided into tiles, stored on the server PHP-Script with old and new viewbox coordiantes as parameters calculating the zoom step and the chosen region depending on the given viewbox A bit more data than only the viewbox content to avoid waiting time while panning Answer as XML (only new data) <data><delete/><append/></data> IDs to delete Fragments to append (own parent attribute)

23 Server side SVG Map devided into tiles, stored on the server PHP-Script with old and new viewbox coordiantes as parameters calculating the zoom step and the chosen region depending on the given viewbox A bit more data than only the viewbox content to avoid waiting time while panning Answer as XML (only new data) <data><delete/><append/></data> IDs to delete Fragments to append (own parent attribute)

24 Server side SVG Map devided into tiles, stored on the server PHP-Script with old and new viewbox coordiantes as parameters calculating the zoom step and the chosen region depending on the given viewbox A bit more data than only the viewbox content to avoid waiting time while panning Answer as XML (only new data) <data><delete/><append/></data> IDs to delete Fragments to append (own parent attribute)

25 Server side SVG Map devided into tiles, stored on the server PHP-Script with old and new viewbox coordiantes as parameters calculating the zoom step and the chosen region depending on the given viewbox A bit more data than only the viewbox content to avoid waiting time while panning Answer as XML (only new data) <data><delete/><append/></data> IDs to delete Fragments to append (own parent attribute)

26 Interaction with ECMAScript Loading data after receiving the answer getelementbyid, parentnode, deletechild deleteattribute, importnode, getelementbyid, appendchild Animation realised with settimeout Existing time steps are stored in an array Simular query as described before, additional parameter for adapted PHP-script Four dimensions: the two-dimensional geography the overlaying data the time

27 Examples Map of Osnabrück

28 Examples Map of Osnabrueck Weather data Traffic data

29 Examples Map of Osnabrueck Weather data Traffic data

30 Examples Map of Osnabrück Weather data

31 Examples Map of Osnabrueck Weather data Traffic data

32 Examples Map of Osnabrück Weather data Traffic data (provided by DDG Gesellschaft für Verkehrsdaten mbh)

33 Examples Map of Osnabrueck Weather data Traffic data (provided by DDG Gesellschaft für Verkehrsdaten mbh

34 Examples Map of Osnabrück Weather data Traffic data (provided by DDG Gesellschaft für Verkehrsdaten mbh)

35 Generation of the application Java program Configuration via XML-File, defining Layout of the application Layers, layout of the data Timesteps Zoomsteps

36 Base Data Different base data ESRI Shapefiles (binary data) GRIB Files (raster data) Streets and traffic data (XML) provided by DDG Algorithms to convert the base data into Java objects which represent Points, Polylines and Polygons (possibly with several parts) Projection Vectorizing Objects have methods for Clipping Labeling Appending into a DOM Aggregation

37 Data flow

38 Some special approaches Own clipping algorithms Lines, the border and the filling of polygons must be devided into several paths Labeling (simple approach) Coordinates for points Barycenter for polygons Text on path for polylines Offset calculation for correct labeling when tiles are used

39 Improvements Java program / generation Configuration of the application via a Graphical User Interface (additional Java program) Implementing better algorithms for labeling Using existing GIS to generate the SVG fragments Application Serving the data on the fly instead of precalculating Display of data values on mouseover in tooltips The change of symbolization options, like size, color etc.

40 Conclusion Easy generation of a complete Web Mapping Application Only JRE and PHP enabled Server needed Different georeferenced data can be included Up to now Shapefiles, GRIB Files, traffic data Modular buildup allows integration of other data Works in all major Browsers (current versions) With native support (FF, Opera, Safari) With Adobe SVG Viewer (IE, FF, Safari)

41 Online examples and contact