Using KML for  Thematic Mapping Bjørn Sandvik thematicmapping.org MSc in Geographical Information Science University of Ed...
<ul><li>Thematic mapping techniques </li></ul><ul><ul><li>Proportional symbol maps </li></ul></ul><ul><ul><li>Chart maps <...
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 i...
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 =...
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...
Chart maps
 
 
 
Using Google Chart API in KML <Style id='sharedStyle'> <BalloonStyle> <text><![CDATA[ <img src='http://chart.apis.google.c...
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>#share...
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 Mapp...
 
 
 
Apache MySQL PHP Web server HTML / JavaScript Ext JS Google Earth API Web browser 1. Get list of indicators   2. Get list ...
MySQL Data Connector Form Handler Database File Server Web server Web browser KML/KMZ files Web server infrastructure Them...
include ('TME_MySQL_DataConnector.php'); include ('TME_Engine.php'); $dataConnector = new DataConnector(); $dataStore = $d...
KML structure Add KML header Technique Choropleth Prism Bar  Image Polygon Collada Type For each year For each feature Tec...
Map legends Unclassed Equal intervals Quantiles
<ul><li>Same icon size in different viewports </li></ul><ul><li>Clickable polygons (not ctrl-click!) </li></ul><ul><li>Cli...
thematic mapping.org
Upcoming SlideShare
Loading in...5
×

Using KML for Thematic Mapping

165,965

Published on

Tech talk at Googleplex 12 December 2008

Published in: Technology, News & Politics
4 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total Views
165,965
On Slideshare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
5
Comments
4
Likes
38
Embeds 0
No embeds

No notes for slide
  • Thank Michael/Google for inviting me Introduce myself This work is based on a MSc in GIS at University of Edinburgh Currenlty working as in UN Association of Norway Making data from UN organisations more accessible to the public Globalis
  • Using KML for Thematic Mapping

    1. 1. 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
    2. 2. <ul><li>Thematic mapping techniques </li></ul><ul><ul><li>Proportional symbol maps </li></ul></ul><ul><ul><li>Chart maps </li></ul></ul><ul><ul><li>Choropleth </li></ul></ul><ul><ul><li>3-D prism maps </li></ul></ul><ul><ul><li>3-D bar maps </li></ul></ul><ul><ul><li>Animated maps </li></ul></ul><ul><li>Thematic Mapping Engine </li></ul><ul><li>Google Earth issues </li></ul>Outline Geo- browsers Thematic mapping techniques KML standard Public datasets Visualisations
    3. 3. Proportional symbols
    4. 4. Proportional symbols #1 Scaling image icons
    5. 10. 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
    6. 11. Problem: Size affected by viewport
    7. 12. Not working in Google Maps
    8. 13. Proportional symbols #2 Drawing regular polygons
    9. 15. 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 .= &quot; “ . round($longA,$this->coordDecimals) . &quot;,“ . round($latA,$this->coordDecimals); } $kml = '</coordinates></LinearRing><outerBoundaryIs></Polygon>'; return $kml; }
    10. 16. Proportional symbols #3 Scaling 3-D Collada objects
    11. 19. 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
    12. 20. Chart maps
    13. 24. 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 &amp;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 &amp;chf=bg,s,ffffff00</href> </Icon> </IconStyle> </Style> <Point> <coordinates>106.514,33.42,0</coordinates> </Point> <ExtendedData> <Data name=&quot;chartValues&quot;> <value>20,45,5</value> </Data> </ExtendedData> </Placemark> KML
    14. 25. Choropleth maps
    15. 27. Prism maps
    16. 31. Problem: Polygon holes
    17. 32. 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
    18. 33. 3-D bar maps
    19. 34. 3-D bars: One variable
    20. 35. 3-D bars: Two variables
    21. 36. Animated maps
    22. 38. Thematic Mapping Engine
    23. 39. Thematic mapping parameters Web Interface PHP Library Web Processing Service KML/KMZ Thematic Mapping Engine Thematic Mapping Engine
    24. 43. 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
    25. 44. MySQL Data Connector Form Handler Database File Server Web server Web browser KML/KMZ files Web server infrastructure Thematic Mapping Engine
    26. 45. 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)
    27. 46. 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
    28. 47. Map legends Unclassed Equal intervals Quantiles
    29. 48. <ul><li>Same icon size in different viewports </li></ul><ul><li>Clickable polygons (not ctrl-click!) </li></ul><ul><li>Clickable extruded polygons </li></ul><ul><li>Clickable Collada models </li></ul><ul><li>Support alternative base maps </li></ul><ul><li>Google Legend API </li></ul>Google Earth fix!
    30. 49. thematic mapping.org

    ×