Upgrade to Polymer 2.x hybrid (#27)

* Upgrade to Polymer 2.x hybrid * Requested changes * Add demo for position object properties
ebidel · Aug 1, 2017 · 8f0b33d · 8f0b33d
1 parent a27113d
commit 8f0b33d
Show file tree

Hide file tree

Showing 9 changed files with 391 additions and 261 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-bower_components
+bower_components*/
+bower-*.json
diff --git a/README.md b/README.md
@@ -1,4 +1,32 @@
-geo-location
-================
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ebidel/geo-location)
 
-See the [documentation](https://ebidel.github.io/geo-location/) page.
+## \<geo-location\>
+
+Geolocation API Polymer web component.
+
+Example to get the device geolocation values:
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="geo-location.html">
+    <div>
+      <dom-bind>
+        <template is="dom-bind">
+          <next-code-block></next-code-block>
+        </template>
+      </dom-bind>
+    </div>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<geo-location latitude="{{latitude}}" longitude="{{longitude}}"></geo-location>
+
+<ul>
+  <li>Latitude: [[latitude]]</li>
+  <li>Longitude: [[longitude]]</li>
+</ul>
+```
diff --git a/bower.json b/bower.json
@@ -1,30 +1,59 @@
 {
   "name": "geo-location",
-  "description": "Web component for the Geolocation API.",
-  "version": "1.0.6",
-  "homepage": "https://ebidel.github.io/geo-location",
-  "authors": [
-    "Eric Bidelman"
-  ],
-  "main": "geo-location.html",
-  "license": "Apache-2.0",
-  "ignore": [
-    "/.*",
-    "/test/",
-    "/demo/"
-  ],
+  "version": "2.0.0",
+  "description": "Geolocation API Polymer web component",
   "keywords": [
     "web-component",
-    "web-components",
     "polymer",
+    "device",
+    "geolocation",
     "geo",
     "location",
+    "position",
+    "navigation",
+    "coordinates",
+    "latitude",
+    "longitude",
+    "gps",
     "map"
   ],
+  "homepage": "https://webcomponents.org/element/ebidel/geo-location",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ebidel/geo-location.git"
+  },
+  "authors": [
+    "Eric Bidelman <[email protected]>"
+  ],
+  "license": "Apache-2.0",
+  "main": [
+    "geo-location.html"
+  ],
+  "ignore": [
+    "/.*"
+  ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.3"
+    "polymer": "Polymer/polymer#1.9 - 2"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.5"
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
+    "google-map": "GoogleWebComponents/google-map#2.0-preview"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.9.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "google-map": "GoogleWebComponents/google-map#^1.0.0"
+      }
+    }
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -1,61 +1,83 @@
-<!doctype html>
 <!-- Copyright Eric Bidelman <[email protected]> -->
+
+<!doctype html>
 <html>
-<head>
-  <title>geo-location Demo</title>
-  <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
-  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300|Source+Code+Pro">
-  <link rel="import" href="../geo-location.html">
-  <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
-  <style>
-  * {
-    box-sizing: border-box;
-  }
-  html, body {
-    height: 100%;
-    padding: 0;
-  }
-  body {
-    font-family: 'Roboto', sans-serif;
-    background: black;
-    color: white;
-  }
-  h2 {
-    font-weight: 300;
-    font-size: 3.5vw;
-    margin-top: 0;
-  }
-  pre {
-    font-family: 'Source Code Pro';
-  }
-  </style>
-</head>
-<body class="layout vertical center-center" unresolved>
-
-
-<template is="dom-bind">
-  <geo-location watch-pos latitude="{{latitude}}" longitude="{{longitude}}"></geo-location>
-  <h2><pre>&lt;geo-location latitude="<span>{{latitude}}</span>"
-              longitude="<span>{{longitude}}</span>">
-&lt;/geo-location></pre></h2>
-</template>
-
-<div>Position updates as your device moves</div>
-
-<script>
-var t = document.querySelector('template');
-t.latitude = '???';
-t.longitude = '???';
-
-</script>
-<script>
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
- ga('create', 'UA-43475701-1', 'ebidel.github.io');
- ga('send', 'pageview');
-</script>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>geo-location demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <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">
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+        google-map {
+          height: 600px;
+        }
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Get the device geolocation values</h3>
+      <demo-snippet>
+        <template>
+          <dom-bind>
+            <template is="dom-bind">
+              <geo-location latitude="{{latitude}}" longitude="{{longitude}}"></geo-location>
+
+              <ul>
+                <li>Latitude: [[latitude]]</li>
+                <li>Longitude: [[longitude]]</li>
+              </ul>
+            </template>
+          </dom-bind>
+        </template>
+      </demo-snippet>
+
+      <h3>Continuous update the device geolocation values with high accuracy, and center Google Maps map and marker to the current location</h3>
+      <demo-snippet>
+        <template>
+          <dom-bind>
+            <template is="dom-bind">
+              <geo-location watch-pos high-accuracy latitude="{{latitude}}" longitude="{{longitude}}"></geo-location>
+
+              <!-- TODO: change the API key to your own. -->
+              <google-map latitude="[[latitude]]" longitude="[[longitude]]" api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
+                <google-map-marker slot="markers" latitude="[[latitude]]" longitude="[[longitude]]"></google-map-marker>
+              </google-map>
+            </template>
+          </dom-bind>
+        </template>
+      </demo-snippet>
+
+      <h3>Continuous update the position object properties values with high accuracy</h3>
+      <demo-snippet>
+        <template>
+          <dom-bind>
+            <template is="dom-bind">
+              <geo-location watch-pos high-accuracy timeout="1000" position="{{position}}"></geo-location>
+
+              <ul>
+                <li>Timestamp: [[position.timestamp]]</li>
+                <li>Latitude: [[position.coords.latitude]]</li>
+                <li>Longitude: [[position.coords.longitude]]</li>
+                <li>Altitude: [[position.coords.altitude]]</li>
+                <li>Accuracy: [[position.coords.accuracy]]</li>
+                <li>Altitude accuracy: [[position.coords.altitudeAccuracy]]</li>
+                <li>Heading: [[position.coords.heading]]</li>
+                <li>Speed: [[position.coords.speed]]</li>
+              </ul>
+            </template>
+          </dom-bind>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
 </html>