SlideShare a Scribd company logo
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 .= &quot; “ . round($longA,$this->coordDecimals) . &quot;,“  . 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 &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
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
Same icon size in different viewports Clickable polygons (not ctrl-click!) Clickable extruded polygons Clickable Collada models Support alternative base maps  Google Legend API Google Earth fix!
thematic mapping.org

More Related Content

ODP
Semantic Theming with Drupal 5
PPT
Thematic mapping at AGU 2008
PPTX
Kml and Its Applications
PPTX
What are customers building with new Bing Maps capabilities
PPT
Google Maps API
PDF
Visual Exploration of Large Data sets with D3, crossfilter and dc.js
PPT
KML 101 - How to Create Amazing Maps in Google Earth and Maps
PPT
Kml Basics Chpt 2 Placemarks
Semantic Theming with Drupal 5
Thematic mapping at AGU 2008
Kml and Its Applications
What are customers building with new Bing Maps capabilities
Google Maps API
Visual Exploration of Large Data sets with D3, crossfilter and dc.js
KML 101 - How to Create Amazing Maps in Google Earth and Maps
Kml Basics Chpt 2 Placemarks

Similar to Using KML for Thematic Mapping (20)

ODP
Rendering OpenStreetMap Data using Mapnik
PPTX
How data rules the world: Telemetry in Battlefield Heroes
PDF
Advanced Kml
PPT
R Spatial Analysis using SP
PPTX
Beholding the giant pyramid of application development; why Ajax applications...
PPT
Google maps
PPT
Google maps
ODP
Introducing Modern Perl
PPTX
Windows Phone 7 Bing Maps Control
PPTX
Creating Maps With Style
PPT
Python And GIS - Beyond Modelbuilder And Pythonwin
PPT
How Groovy Helps
PPT
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
PPT
Playing with d3.js
PPT
ESRI Developer Summit 2008 - Microsoft Virtual Earth
ODP
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
PDF
Pycon2011
PDF
Where20 2008 Ruby Tutorial
PPT
Hadoop Hive Talk At IIT-Delhi
PDF
D3 Mapping Visualization
Rendering OpenStreetMap Data using Mapnik
How data rules the world: Telemetry in Battlefield Heroes
Advanced Kml
R Spatial Analysis using SP
Beholding the giant pyramid of application development; why Ajax applications...
Google maps
Google maps
Introducing Modern Perl
Windows Phone 7 Bing Maps Control
Creating Maps With Style
Python And GIS - Beyond Modelbuilder And Pythonwin
How Groovy Helps
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Playing with d3.js
ESRI Developer Summit 2008 - Microsoft Virtual Earth
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
Pycon2011
Where20 2008 Ruby Tutorial
Hadoop Hive Talk At IIT-Delhi
D3 Mapping Visualization
Ad

Recently uploaded (20)

PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PPT
Teaching material agriculture food technology
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Machine learning based COVID-19 study performance prediction
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
cuic standard and advanced reporting.pdf
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Approach and Philosophy of On baking technology
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
MIND Revenue Release Quarter 2 2025 Press Release
Understanding_Digital_Forensics_Presentation.pptx
Mobile App Security Testing_ A Comprehensive Guide.pdf
Teaching material agriculture food technology
Building Integrated photovoltaic BIPV_UPV.pdf
Programs and apps: productivity, graphics, security and other tools
Encapsulation_ Review paper, used for researhc scholars
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
“AI and Expert System Decision Support & Business Intelligence Systems”
The AUB Centre for AI in Media Proposal.docx
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Machine learning based COVID-19 study performance prediction
Review of recent advances in non-invasive hemoglobin estimation
Unlocking AI with Model Context Protocol (MCP)
Network Security Unit 5.pdf for BCA BBA.
cuic standard and advanced reporting.pdf
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Approach and Philosophy of On baking technology
Ad

Using KML for Thematic Mapping

  • 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. 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
  • 4. Proportional symbols #1 Scaling image icons
  • 5.  
  • 6.  
  • 7.  
  • 8.  
  • 9.  
  • 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
  • 11. Problem: Size affected by viewport
  • 12. Not working in Google Maps
  • 13. Proportional symbols #2 Drawing regular polygons
  • 14.  
  • 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; }
  • 16. Proportional symbols #3 Scaling 3-D Collada objects
  • 17.  
  • 18.  
  • 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
  • 21.  
  • 22.  
  • 23.  
  • 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
  • 26.  
  • 28.  
  • 29.  
  • 30.  
  • 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
  • 34. 3-D bars: One variable
  • 35. 3-D bars: Two variables
  • 37.  
  • 39. Thematic mapping parameters Web Interface PHP Library Web Processing Service KML/KMZ Thematic Mapping Engine Thematic Mapping Engine
  • 40.  
  • 41.  
  • 42.  
  • 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
  • 44. MySQL Data Connector Form Handler Database File Server Web server Web browser KML/KMZ files Web server infrastructure Thematic Mapping Engine
  • 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)
  • 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
  • 47. Map legends Unclassed Equal intervals Quantiles
  • 48. Same icon size in different viewports Clickable polygons (not ctrl-click!) Clickable extruded polygons Clickable Collada models Support alternative base maps Google Legend API Google Earth fix!

Editor's Notes

  • #2: 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