HTML5 & SVG in Cartography - Workshop


Published on

1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 & SVG in Cartography - Workshop

  1. 1. HTML 5, CSS 3 & SVG 1.1 in Cartography Otakar Čerba University of West Bohemia Plzeň, Czech Republic
  2. 2. Overview● Introduction● XML Family● HTML 5● CSS 3● SVG 1.1● Workshop
  3. 3. GEOMATICS at the UWB
  4. 4. Markup Languages – Basic Idea● The idea – "marking up" of manuscripts, (revision instructions by editors)● Goal – separation of content and presentation, description or processes (= three types of markups)● Some markup languages have predefined semantics or even presentation elements
  5. 5. Markup Languages – Pros & Cons● Protection of data ● ML coding is very● Open (in many meaning of demanding on file size, this word – license, especially in case of extensibility, independent spatial data development, accessibility – platform independence...) ● Universal tools are slow● Well standardized (need to be platform independent and to be● Broadly used able to process all types of markups) Highway network SHP 49,7MB in Czech Republic and Austria JML 192MB
  6. 6. Markup Languages & CartographyEssential idea corresponds to● Multiple cartographic visualization of spatial data● Context and adaptive cartography● Separation spatial databases and maps in GIS
  7. 7. Markup Languages – History Generalized GenCode – Markup sixties, GraphicsLanguage (GML) Communication– seventies, IBM Association syntax semantics Standard Generalized Markup Language (SGML) – eighties, ANSI, ISO 8879 simplification Extensible Markup Language (XML) – 1996, W3C CSS Other HTML SVG formats...
  8. 8. Extensible Markup Language (XML)● XML is a protocol for containing and managing information● XML is a family of technologies that can do everything from formatting documents to filtering data● XML is a philosophy for information handling that seeks maximum usefulness and flexibility for data by refining it to its purest and most structured form Eric Raymond
  9. 9. XML Document● Tags <?xml version=”1.0”?>● Elements <map_collection● Attributes creation=”2011” name=”Czech map colletion”>● Text <!-- This document describes● Entities Czech map collection --> <Map>Aretins map</Map>● CDATA <Map>Crigingers map</Map>● Commentaries </map_collection>● Processing instructions● Head of document
  10. 10. HTML 5● 2007 – Development of HTML 5 started● Documents ● Any official specification up to now (except WHATWG living standard) ● HTML5 differences from HTML4 (W3C Working Draft 29 March 2012)● Expected completion – 2022● Any new versions, just upgrades● Combination of HTML5, CSS3, SVG and APIs
  11. 11. HTML 5 News & Improvements● Semantics● Combination of markup sets● Multimedia support● Local & Session Storage● Geolocation● Offline applications● Web databases● Microdata
  12. 12. HTML 5 – Basic Structure<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Page title</title> </head> <body> <header></header> <nav></nav> <aside></aside> <section> <article></article> </section> <footer></footer> </body></html>
  13. 13. HTML 5 & Graphics
  14. 14. Cascading Style Sheets (CSS)● Style language used for describing the presentation properties (the look and formatting) of a document written in a markup language● CSS3 – a set of standards (recommendations – Selectors Level 3, CSS Namespace), CRs (Multi-column Layout) and working drafts (CSS Animations)Selector {Declaration;}Selector {Property:Value;}Header {background:#00F;}
  15. 15. CSS 3 – News● border-color, border- ● CSS3 Transitions image, border-radius ● Media queries● box-shadow ● Multi-column layout● background-origin, background-clip, ● Web fonts background-size, multiple ● Speech backgrounds ● Attribute selectors● HSL colors, HSLA colors, opacity, RGBA colors ● Generated content ● Text effects
  16. 16. CSS3 & Browsers
  17. 17. Scalable Vector Graphics (SVG)● SVG – open format designed to a distribution of 2D vector data on the Internet● 14.1.2003 – SVG 1.1; Scalable Vector Graphics 1.1 (Second Edition), 16.8.2011● No special spatial data processing (topology, geographical coordinate systems, 3D graphics, some cartographic graphics /e.g. combined lines/)
  18. 18. SVG – Browser Support
  19. 19. SVG = Vector Graphics + RasterGraphics + Text Central Station Park Hospital Central Station Park Hospital
  20. 20. Cartographic View on SVG SVG Drawing x data processing Print x Display Data visualization Map
  21. 21. Construction of SVG Maps● WYSIWYG editors of vector graphics● Coding● Export from other format (SHP, CDR...)● XSLT transformation● Generating from database via script languages
  22. 22. SVG Elements and Attributes● Graphical primitives – ● General attributes circle, elipse, rectangle, (graphic variables) line, polyline, polygon ● x, y – localization● Element <path> ● width, height, r... – size● Elements <g>, <defs> ● stroke (properties of drawing tool) – size, color, and <symbol> structure, marks...● Element <text> ● fill – color, raster, mask,● Element <image> gradients ● opacity
  23. 23. SVG Root Element<?xml version="1.0" encoding="UTF-8"standalone="no"?><svg xmlns=""height="400px" width="400px" viewBox="100 100400 400"><title>SVG - Example</title><desc>Example file with SVG root element, titleand description</desc></svg>
  24. 24. Transformations● SVG offer a set of geometric 2D transformations ● translation (translate), ● rotation (rotate), ● scaling (scale), ● skewing (skewX, skewY)● Attribute transform (to each element) with ● Transformation keyword and values ● Transformation matrix● Questions of transformation of data coordinate to map (SVG) coordinate system
  25. 25. Composition of Transformations I.Translation to top left corner (0,0 point – origin of coordinates) II.Rotation III.Translation back to original position Rotation
  26. 26. Element <path>● Absolute x relative (moving) ● A – elliptical arc (7 parameters) coordinates ● Q – quadratical Beziers curve● Attribute – d (list of drawing ● T – smooth curve composed by commands) quadratical Beziers curves ● C – cubic Beziers curve● M,m – moving of drawing tool ● S – smooth curve composed by● L,l – line from actual point to cubic Beziers curves new coordinates● H,h – horizontal line● V,v – vertical line● Z,z – closing the path
  27. 27. Path – Example● <path d=“M 10,30 L 10,20 15,10 20,20 20,30 Z“/>● <path d=“M 10,30 l 0,-10 5,-10 5,10 0,10 Z“/>● <path d=“M 10,30 v -10 l 5,-10 5,10 v 10 h -10 z“/>● ...
  28. 28. Element <symbol> ...● Grouping of elements <symbol id="double-circle" style="stroke: black;" (such as <g> element) viewBox="0 0 40 40">● Never displayed, must <circle cx="20" cy="20" r="20" style="fill:red;"/> be linked <circle cx="20" cy="20"● Perfect to definition of r="10" style="fill:blue;"/> </symbol> cartographic symbols ... (one definition, multiple <use xlink:href="#double- application) circle" x="80" y="80" width="60" height="60"/> ...
  29. 29. CSS & SVG● XML Presentation attributes (self-standing attributes) ● <rect x="10" y="10" width="70" height="40" fill="blue" stroke="red" stroke-width="2px"/>● Inline styles (in style attribute) ● <rect x="10" y="10" width="70" height="40" style="fill:blue; stroke:red; stroke-width:2px"/>● Internal styles (part of CDATA)● External styles (self-standing file) ● <?xml-stylesheet href="style.css" type="text/css"?>
  30. 30. HTML 5 & SVG<!DOCTYPE html><head> <title>SVG</title> <meta charset="utf-8" /></head><body> <h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200"xmlns=""> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> </svg></body></html>
  31. 31. HTML5 & SVG & Styling & Multimedia<!DOCTYPE html><html lang="en"> <head> <title>Guide to HTML5 video</title> <style> .target { mask: url("code_c5_7.svg#c1"); -webkit-mask: url("code_c5_7.svg"); } </style> </head> <body> <h1>Guide to HTML5 video</h1> <video class="target" height="270" width="480" controls > <source src="HelloWorld.mp4" type="video/mp4"> </video> </body></html>
  32. 32. Workshop● Simple example of possibilities of HTML 5, CSS 3 and SVG in cartography● Interactive & Multimedia● Source: ● Presentation – Presentation.pdf ● Step by step tutorial – Workshop.pdf ● Multimedia pack – ● Sample page – index.html or index2.html
  33. 33. THANK YOU FOR ATTENTION AND rba gis.zcu.c z The work and its presentation is supported by NeoCartoLink project