Using KML for Thematic Mapping

Using KML for Thematic Mapping Bjørn Sandvik thematicmapping.org MSc in Geographical Information Science University of Edinburgh Project Manager at United Nations Association of Norway Tech Talk at Googleplex 12 December 2008

Thematic mapping techniques

Proportional symbol maps

Chart maps

Choropleth

3-D prism maps

3-D bar maps

Animated maps

Thematic Mapping Engine

Google Earth issues

Outline Geo- browsers Thematic mapping techniques KML standard Public datasets Visualisations

Proportional symbols

Proportional symbols #1 Scaling image icons

Mathematical scaling of 2-D point symbols: symbolSize = power(value/maxValue; 1/2) * maxSize KML for proportional icon images <Style id='sharedStyle'> <IconStyle> <Icon> <href>files/symbol.png</href> </Icon> </IconStyle> <Style> KML <Placemark> <name>China</name> <Snippet>1,312,978,855 (2005)</Snippet> <styleUrl>#sharedStyle</styleUrl> <Style> <IconStyle> <color>e50066ff</color> <scale>7</scale> </IconStyle> </Style> <Point> <coordinates>106.514,33.42,0</coordinates> </Point> </Placemark> KML

Problem: Size affected by viewport

Not working in Google Maps

Proportional symbols #2 Drawing regular polygons

Problem: Complicated! function kmlSymbolCalculator ( $longitude, $latitude, $radius, $vertices) { $EARTH_RADIUS_EQUATOR = 6378140.0; $RADIAN = 180 / pi(); $long = $longitude / $RADIAN; $lat = $latitude / $RADIAN; $f = 1/298.257; $e = 0.08181922; $kml = '<Polygon><outerBoundaryIs><LinearRing><coordinates>'; for ( $bearing = 45; $bearing <= 405; $bearing += 360/$vertices ) { $b = $bearing / $RADIAN; $R = $EARTH_RADIUS_EQUATOR * (1 - $e * $e) / pow( (1 - $e*$e * pow(sin($lat),2)), 1.5); $psi = $distance/$R; $phi = pi()/2 - $lat; $arccos = cos($psi) * cos($phi) + sin($psi) * sin($phi) * cos($b); $latA = (pi()/2 - acos($arccos)) * $RADIAN; $arcsin = sin($b) * sin($psi) / sin($phi); $longA = ($long - asin($arcsin)) * $RADIAN; $kml .= " “ . round($longA,$this->coordDecimals) . ",“ . round($latA,$this->coordDecimals); } $kml = '</coordinates></LinearRing><outerBoundaryIs></Polygon>'; return $kml; }

Proportional symbols #3 Scaling 3-D Collada objects

Mathematical scaling of 3-D point symbols: symbolSize = power(value/maxValue; 1/3) * maxSize Making proportional Collada objects Position Measure / scale Colorize Google SketchUp <Placemark> <name>China</name> <Snippet>1,312,978,855 (2005)</Snippet> <Model> <Link> <href>files/object.dae</href> </Link> <altitudeMode>absolute</altitudeMode> <Location> <longitude>106.514</longitude> <latitude>33.42</latitude> <altitude>0</altitude> </Location> <Scale> <x>140000</x> <y>140000</y> <z>140000</z> </Scale> </Model> </Placemark> KML

Chart maps

Using Google Chart API in KML <Style id='sharedStyle'> <BalloonStyle> <text><![CDATA[ <img src='http://chart.apis.google.com/chart ?cht=p&chd=t:20,45,5 &chd=t: $[chartValues] '> ]]></text> </BalloonStyle> </Style> KML <Placemark> <name>China</name> <Snippet>1,312,978,855 (2005)</Snippet> <styleUrl>#sharedStyle</styleUrl> <Style> <IconStyle> <scale>7</scale> <Icon> <href> http://chart.apis.google.com/chart?cht=p&chd=t:20,45,5&chs=300x150 &chf=bg,s,ffffff00</href> </Icon> </IconStyle> </Style> <Point> <coordinates>106.514,33.42,0</coordinates> </Point> <ExtendedData> <Data name="chartValues"> <value>20,45,5</value> </Data> </ExtendedData> </Placemark> KML

Choropleth maps

Prism maps

Problem: Polygon holes

KML used in prism maps Suggestion: <Placemark> <name>China</name> <Snippet>1,312,978,855 (2005)</Snippet> <styleUrl>#sharedStyle</styleUrl> <Style> <PolyStyle> <color>DC0066FF</color> </PolyStyle> </Style> <MultiGeometry> <Polygon> <extrude>1</extrude> <altitudeMode>absolute</altitudeMode> <outerBoundaryIs> <LinearRing> <coordinates> 110.72,20.06, 2000000 109.26,19.9, 2000000 108.63,19.28, 2000000 108.69,18.51, 2000000 110.05,18.38, 2000000 111.03,19.64, 2000000 (...) </coordinates> </LinearRing> </outerBoundaryIs> </Polygon> <Polygon> (...) </Polygon> </MultiGeometry> </Placemark> KML <Placemark> <name>China</name> <Snippet>1,312,978,855 (2005)</Snippet> <styleUrl>#sharedStyle</styleUrl> <Style> <PolyStyle> <color>DC0066FF</color> </PolyStyle> </Style> <MultiGeometry> <Polygon> <extrude>1</extrude> <altitude>2000000</altitude> <altitudeMode>clampToAltitude</altitudeMode> <outerBoundaryIs> <LinearRing> <coordinates> 110.72,20.06 109.26,19.9 108.63,19.28 108.69,18.51 110.05,18.38 111.03,19.64 (...) </coordinates> </LinearRing> </outerBoundaryIs> </Polygon> <Polygon> (...) </Polygon> </MultiGeometry> </Placemark> KML

3-D bar maps

3-D bars: One variable

3-D bars: Two variables

Animated maps

Thematic Mapping Engine

Thematic mapping parameters Web Interface PHP Library Web Processing Service KML/KMZ Thematic Mapping Engine Thematic Mapping Engine

Apache MySQL PHP Web server HTML / JavaScript Ext JS Google Earth API Web browser 1. Get list of indicators 2. Get list of available years 3. Make KML/KMZ document 4. Download KML/KMZ file How it works

MySQL Data Connector Form Handler Database File Server Web server Web browser KML/KMZ files Web server infrastructure Thematic Mapping Engine

include ('TME_MySQL_DataConnector.php'); include ('TME_Engine.php'); $dataConnector = new DataConnector(); $dataStore = $dataConnector->getDataStore(68, 2005, 0); $parameters = array( 'mapType’ => 'choropleth', 'indicator' => 68, 'year' => 2005, 'classification' => 'equal' ); $map = new ThematicMap($dataStore, $parameters); $file = $map->getKML(); Application Programming Interface (API)

KML structure Add KML header Technique Choropleth Prism Bar Image Polygon Collada Type For each year For each feature Technique Choropleth Bar Image Polygon Collada Type Prism Add shared style Add shared style Add shared style Add shared style Colourise Collada object(s) Add style and feature Add style and feature Add style and feature Add style and feature Add style and feature Add link to Collada object Add map title and legend <Folder> <Placemark> </Placemark> </Folder> <kml> </kml> Symbol Symbol

Map legends Unclassed Equal intervals Quantiles