Geo Graph

Example of a Geo Graph
Example of a Geo Graph

With the Geo Graph View you can visualize data on a world map. Therefore you need to set longitude and latitude values to define the position of your nodes on the map.

To set up a Geo Graph follow these steps:

  1.  Make sure your data includes longitude and latitude attributes. Have a look at the Geograph-Coordinates list of capitals for the required format.
  2. Afterwards create a new view template. You can find an example template below. The structure of the Geo Graph View Template is similar to a normal graph template. The view properties of the GeoGraph, which differ from a normal graph are listed below:
    PropertyCodeDescription
    Longitude<Property Name="Longitude">
    <Value IsReference="true">longitude</Value>
    </Property>
    With this property the attribute is defined which sets the longitude value of the node on the map.
    Latitude<Property Name="Latitude">
    <Value IsReference="true">latitude</Value>
    </Property>
    With this property the attribute is defined which sets the latitude value of the node on the map.
    LabelBaseZoomLevel<Property Name="LabelBaseZoomLevel">
    <Value>7</Value>
    </Property>
    With this property the size of the node/ edge label text is defined
  3. Adapt the longitude and latitude property in the view template to the reference node attributes (marked red in the example code).
  4. Customize further properties as in a normal graph.

GeoGraph Example Template:

 <?xml version="1.0" encoding="utf-8" ?>
 <View xmlns="https://www.soley.io/schemas/slvt" Provider="Soley.Framework.AddIns.DataViewProviders.GeoGraphDisplayBinding">
 
   <Styles>
     <Style DataSource=".RedNode" VisualTarget="GeoNode">
       <Properties>
         <Property Name="Latitude">
               <Value IsReference="true">latitude</Value>
           </Property>
         <Property Name="Longitude">
               <Value IsReference="true">longitude</Value>
           </Property>        
         <Property Name="Radius">
               <Value>20</Value>
           </Property>
         <Property Name="FillColor">
               <Value>#706464FF</Value>
           </Property>
         <Property Name="OutlineColor">
               <Value>Red</Value>
           </Property>
         <Property Name="OutlineThickness">
               <Value>2</Value>
           </Property>
         
         <Property Name="LabelText">
               <Value IsReference="true">name</Value>
           </Property>          
         <Property Name="LabelFontColor">
               <Value>Orange</Value>
           </Property>
         <Property Name="LabelBaseZoomLevel">
               <Value>1</Value>
           </Property>
         <Property Name="ToolTip">
               <Value>Node</Value>
           </Property>
       </Properties>
     </Style>
 
     <Style DataSource=".TasteEdge" VisualTarget="GeoEdge">
       <Properties>
           <Property Name="OutlineColor">
               <Value>Blue</Value>
           </Property>
         <Property Name="OutlineThickness">
               <Value>5</Value>
           </Property>
         <Property Name="LabelText">
               <Value IsReference="true">Class</Value>
           </Property>
         <Property Name="LabelFontColor">
               <Value>Red</Value>
           </Property>
         <Property Name="LabelBaseZoomLevel">
               <Value>8</Value>
           </Property>
         <Property Name="ToolTip">
               <Value>Edge</Value>
           </Property>
       </Properties>
     </Style>
 
   </Styles>
 </View>

Have a look at our Panama Papers blog entry for a case study using the GeoGraph!

Was this article helpful?

Related Articles