Add cool demo for heading property (#35)

Author: FluorescentHallucinogen

demo/index.html

@@ -14,11 +14,12 @@
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../../google-map/google-map.html">
     <link rel="import" href="../geo-location.html">
+    <link rel="import" href="navigation-arrow.html">
 
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
         google-map {
-          height: 600px;
+          height: 300px;
         }
       </style>
     </custom-style>
@@ -57,6 +58,19 @@ <h3>Continuous update the device geolocation values with high accuracy, and cent
         </template>
       </demo-snippet>
 
+      <h3>Continuous update the position object properties values with high accuracy, and rotate the navigation arrow to the true north</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <dom-bind>
+            <template is="dom-bind">
+              <geo-location watch-pos high-accuracy position="{{position}}"></geo-location>
+
+              <navigation-arrow heading="[[position.coords.heading]]"></navigation-arrow>
+            </template>
+          </dom-bind>
+        </template>
+      </demo-snippet>
+
       <h3>Continuous update the position object properties values with high accuracy</h3>
       <demo-snippet>
         <template>

demo/navigation-arrow.html

@@ -0,0 +1,27 @@
+<!-- Copyright Eric Bidelman <ebidel@gmail.com> -->
+
+<link rel="import" href="../../polymer/polymer.html">
+
+<dom-module id="navigation-arrow">
+  <template>
+    <svg viewBox="-4.5625 -4.5625 9.125 9.125" width="100" height="100">
+      <polygon
+          points="0,-4.5625 3,3.4375 0,1.4375 -3,3.4375"
+          fill="#db4437"
+          transform$="rotate([[heading]])">
+      </polygon>
+    </svg>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'navigation-arrow',
+      properties: {
+        heading: {
+          type: Number,
+          value: 0
+        }
+      }
+    });
+  </script>
+</dom-module>