HTML5 & SVG in Cartography - Workshop

HTML 5, CSS 3 & SVG 1.1
in Cartography

Otakar Čerba

University of West Bohemia
Plzeň, Czech Republic

Overview

● Introduction
● XML Family
● HTML 5
● CSS 3
● SVG 1.1
● Workshop

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

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

Markup Languages & Cartography

Essential idea corresponds to
● Multiple cartographic
visualization of spatial data
● Context and adaptive
cartography
● Separation spatial databases
and maps in GIS

Markup Languages – History
Generalized GenCode –
Markup sixties, Graphics
Language (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...

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

XML Document
● Tags
<?xml version=”1.0”?>
● Elements <map_collection
● Attributes creation=”2011” name=”Czech
map colletion”>
● Text 
<Map>Aretin's map</Map>
● CDATA
<Map>Criginger's map</Map>
● Commentaries
</map_collection>
● Processing instructions
● Head of document

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

HTML 5 News & Improvements
●
Semantics
●
Combination of markup sets
●
Multimedia support
●
Local & Session Storage
● Geolocation
● Offline applications
● Web databases
●
Microdata

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>

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;}

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

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/)

SVG = Vector Graphics + Raster
Graphics + Text
Central Station

Park
Hospital

Central Station

Park
Hospital

Cartographic View on SVG

SVG
Drawing x data processing
Print x Display

Data visualization Map

Construction of SVG Maps
● WYSIWYG editors of vector graphics
●
Coding
● Export from other format (SHP, CDR...)
● XSLT transformation
● Generating from database via script languages

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

SVG Root Element
<?xml version="1.0" encoding="UTF-8"
standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg"
height="400px" width="400px" viewBox="100 100
400 400">
<title>SVG - Example</title>
<desc>Example file with SVG root element, title
and description</desc>
</svg>

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

Composition of Transformations

I.Translation to top left
corner (0,0 point – origin
of coordinates)
II.Rotation
III.Translation back to
original position

Rotation

Element <path>
● Absolute x relative (moving) ● A – elliptical arc (7 parameters)
coordinates ● Q – quadratical Bezier's curve
● Attribute – d (list of drawing ● T – smooth curve composed by
commands) quadratical Bezier's curves
● C – cubic Bezier's curve
● M,m – moving of drawing tool
● S – smooth curve composed by
● L,l – line from actual point to cubic Bezier's curves
new coordinates
● H,h – horizontal line
● V,v – vertical line
● Z,z – closing the path

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“/>
● ...

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"/>
...

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"?>

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="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

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>
http://html5videoguide.net/
<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>

Workshop
● Simple example of possibilities of HTML 5, CSS
3 and SVG in cartography
● Interactive & Multimedia
● Source: http://gis.zcu.cz/tmp/Workshop
● Presentation – Presentation.pdf
● Step by step tutorial – Workshop.pdf
● Multimedia pack – Multimedia.zip
● Sample page – index.html or index2.html

THANK YOU FOR ATTENTION
AND QUESTIONS

cerba@kma.zcu.cz http://cz.linkedin.com/in/otakarce
rba

gis.zcu.c
z
The work and its presentation is supported by NeoCartoLink project

HTML5 & SVG in Cartography - Workshop

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to HTML5 & SVG in Cartography - Workshop

Similar to HTML5 & SVG in Cartography - Workshop (20)

Recently uploaded

Recently uploaded (20)

HTML5 & SVG in Cartography - Workshop