I created my own element that uses google-map and google-map-directions as shown in the example here.
Here is my element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<dom-module id="my-map">
<template>
<style>
#map-container {
height: 500px;
width: 500px;
}
</style>
<div id="map-container">
<google-map-directions map="{{map}}"
start-address="San Francisco"
end-address="Mountain View"
travel-mode="BICYCLING"
api-key="<my-key>"></google-map-directions>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892" api-key="AIzaSyDoVR8wgBH0vUoMfhdHQ38e-hBIWk3wRbs"></google-map>
</div>
</template>
<script>
Polymer({
is: "my-map",
properties: {
fromCity: {
type: String,
value: "Green Bay, WI"
},
toCity: {
type: String,
value: "Chicago, IL"
}
},
listeners: {
"dom-change": function(e) {
console.log("Dom has changed.");
}
}
});
</script>
</dom-module>
I am calling this element from my test page, like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>my-card</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"> </script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-component-page/iron-component-page.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../../sni-card.html">
<link rel="import" href="../../sni-map.html">
</head>
<body>
<style>
#map-container {
height: 500px;
width: 500px;
}
</style>
<!--iron-component-page src="sni-card.html"></iron-component-page-->
<script>
function onFromCityChanged(changedObject) {
var myMap = document.querySelector('#my-sni-map');
myMap.fromCity = changedObject.detail.value;
}
function onToCityChanged(changedObject) {
var myMap = document.querySelector('#my-sni-map');
myMap.toCity = changedObject.detail.value;
}
</script>
<my-map id="my-sni-map" from-city="[[from_city]]" to-city="[[to_city]]"></my-map>
Problem
The direction does not get displayed. I only get a map of San Francisco.
Question
How can I make the directions show up?
In order to use google-map-directions element you need to import google-map-directions.html:
<link rel="import" href="../bower_components/google-map/google-map-directions.html">
Once the google-map-directions.html is imported the route will be displayed as demonstrated in the following demo
Related
The below code works properly in this jsbin but it does not work in either this codepen, this plunker or this jsfiddle.
Why not? How can I get it to work in the three locations where it does not?
http://jsbin.com/yudavucola/1/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Since every other site other than jsbin is using the secure version of HTTP i.e. HTTPS, the request to get the contents from the source http://polygit.org/polymer+:master/components/ is blocked. So, use secure connection and it will work in every other site.
You can check the console for more information.
Change <base> tag's href attribute from http://polygit.org/... to //polygit.org/.... This normalizes the import to work in both http and https environments.
Here are working examples in all repositories: JsBin, Codepen, Plunker and JsFiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Edit
Note that for a specific version of Polymer, you can use
<base href="//polygit.org/polymer2.0+:master/components/">
or
<base href="//polygit.org/polymer1.0+:master/components/">
etc.
Can anyone show using jsBin an example of how to use app-route?
https://jsbin.com/retokid/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer</title>
<script src="https://polygit.org/app-route+polymerelements+*/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-input/paper-input.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-route.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-location.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/iron-pages/iron-pages.html">
</head>
<body>
<x-shell></x-shell>
<dom-module id="x-a">
<template>
<h2>page A</h2>
<paper-input value="{{email}}" placeholder="set email"></paper-input>
<paper-input value="{{phone}}" placeholder="set phone"></paper-input>
<paper-button on-click="_submit">submit</paper-button>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-a',
properties: {
email: {
type: String
}
},
_submit: function() {
this.fire('info-updated', {
email: this.email,
phone: this.phone
});
}
});
});
</script>
</dom-module>
<dom-module id="x-b">
<template>
<h2>page B</h2>
<div>
email: [[userInfo.email]]
</div>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-b',
properties: {
email: {
type: String
}
}
});
});
</script>
</dom-module>
<dom-module id="x-shell">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-selector selected="{{routeData.page}}" attr-for-selected="name" role="navigation">
<a name="x-a" href="#/x-a">x-a</a>
<a name="x-b" href="#/x-b">x-b</a>
</iron-selector>
<iron-pages selected="[[routeData.page]]" attr-for-selected="name">
<x-a name="x-a" route="{{route}}" user-info="[[userInfo]]" on-info-updated="_updateInfo"></x-a>
<x-b name="x-b" route="{{route}}" user-info="[[userInfo]]"></x-b>
</iron-pages>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-shell',
properties: {
userInfo: {
type: Object,
value: function() {
return {};
}
},
page: {
type: String,
reflectToAttribute: true
}
},
_updateInfo: function(event) {
console.log('infoUpdated', event.detail);
this.set('userInfo', event.detail);
}
});
});
</script>
</dom-module>
</body>
</html>
This is your worked example, check it please.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer</title>
<script src="https://polygit.org/app-route+polymerelements+*/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-input/paper-input.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-route.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-location.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/iron-pages/iron-pages.html">
</head>
<body>
<x-shell></x-shell>
<dom-module is="x-a">
<template>
<h2>page A</h2>
<paper-input value="{{email}}" placeholder="set email"></paper-input>
<paper-input value="{{phone}}" placeholder="set phone"></paper-input>
<paper-button on-tap="_submit">submit</paper-button>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-a',
properties: {
email: {
type: String
}
},
_submit: function() {
this.fire('info-updated', {
email: this.email,
phone: this.phone
});
}
});
});
</script>
</dom-module>
<dom-module is="x-b">
<template>
<h2>page B</h2>
<div>
email: [[userInfo.email]]
</div>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-b',
properties: {
userInfo: {
type: Object
}
}
});
});
</script>
</dom-module>
<dom-module is="x-shell">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-selector selected="{{routeData.page}}" attr-for-selected="name" role="navigation">
<a name="x-a" href="#/x-a">x-a</a>
<a name="x-b" href="#/x-b">x-b</a>
</iron-selector>
<iron-pages selected="[[routeData.page]]" attr-for-selected="name">
<x-a name="x-a" route="{{route}}" user-info="[[userInfo]]" on-info-updated="_updateInfo"></x-a>
<x-b name="x-b" route="{{route}}" user-info="[[userInfo]]"></x-b>
</iron-pages>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-shell',
properties: {
userInfo: {
type: Object,
value: function() {
return {};
}
},
page: {
type: String,
reflectToAttribute: true
}
},
_updateInfo: function(event) {
console.log('infoUpdated', event.detail);
this.set('userInfo', event.detail);
}
});
});
</script>
</dom-module>
</body>
</html>
I am trying out sample code provided by Google at https://www.polymer-project.org/1.0/start/first-element/intro.
This is what I have so far:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="/my_components/icon-toggle-demo.html" rel="import">
</head>
<body>
<icon-toggle-demo toggle-icon="star"></icon-toggle-demo>
</body>
</html>
icon-toggle-demo.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icons/iron-icons.html">
<link rel="import" href="icon-toggle.html">
<dom-module id="icon-toggle-demo">
<template>
<style>
:host {
font-family: sans-serif;
};
</style>
<h3>Statically-configured icon-toggles</h3>
<icon-toggle toggle-icon="star"></icon-toggle>
<icon-toggle toggle-icon="star" pressed></icon-toggle>
<h3>Data-bound icon-toggle</h3>
<!-- use a computed binding to generate the message -->
<div><span>[[message(isFav)]]</span></div>
<!-- curly brackets ({{}}} allow two-way binding -->
<icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>
</template>
<script>
Polymer({
is: "icon-toggle-demo",
message: function(fav) {
if (fav) {
return "You really like me!";
} else {
return "Do you like me?";
}
}
});
</script>
</dom-module>
icon-toggle.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html">
<dom-module id="icon-toggle">
<template>
<style>
/* local DOM styles go here */
:host {
display: inline-block;
}
iron-icon {
fill: rgba(0,0,0,0);
stroke: currentcolor;
}
:host([pressed]) iron-icon {
fill: currentcolor;
}
</style>
<!-- local DOM goes here -->
<!-- <span>Not much here yet.</span> -->
<!-- <iron-icon icon="polymer"> -->
<iron-icon icon="[[toggleIcon]]">
</iron-icon>
</template>
<script>
Polymer({
is: 'icon-toggle',
properties: {
toggleIcon: String,
pressed: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true
}
},
listeners: {
'tap': 'toggle'
},
toggle: function() {
this.pressed = !this.pressed;
}
});
</script>
</dom-module>
The code works fine in chrome but I get following error in FF:
TypeError: document.registerElement is not a function
I have already included the polyfill. Something else missing?
You're doing nothing wrong. The following line in your index.html file defaults to the newest version (v1.0.0-rc.1) of the webcomponents polyfill.
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
There appears to be a bug in the current version for Firefox. The same error can also be observed in the Plunker that is linked in the Polymer docs here. This will hopefully be fixed by the Polymer team.
To fix it for now, you can explicitly use an older version. For example.
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.24/webcomponents-lite.js"></script>
WebComponents v1.0.0+ should only be used with Polymer 2.0. Use version ^0.7.24 with Polymer 1.
Is there a way to use an icon from the Font Awesome library as the icon inside a paper-icon-button?
Here is my jsBin.
http://jsbin.com/rahesepeho/2/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
</style>
<template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Per #Stefanvott on the Polymer Slack site:
There are at least two ways:
Use the following custom element https://customelements.io/philya/font-awesome-polymer-icons/ (Didn't work for me.)
Do this <paper-icon-button src="" class="fa fa-github-alt fa-lg"></paper-icon-button> per this jsBin. See below code.
Short version http://jsbin.com/hubonatopa/1/edit?html,output
paper-icon-button.fa {
padding: .5em;
height: 2em;
width: 2em;
}
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
Full version http://jsbin.com/hubonatopa/1/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> </head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
paper-icon-button.fa {
padding: 10px;
line-height: 1em;
overflow: hidden;
}
</style> <template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
You can use this project! It's cool, bower package to use in polymer 1-2. Now it's last version of FA: 4.7. Here: https://github.com/vangware/fontawesome-iconset
in my case, on polymer v1.8 i had to create a custom style element as described in this link , paste font-awesome css there and then add it to my element using
<template>
<style include="shared-styles">
</style>
<paper-button> <i class="fa fa-facebook fa-lg"></i></paper-button>
..............
</template>
I have the following
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
</head>
<body unresolved>
<dom-module id='base-page'>
<template>
<paper-dropdown-menu>
<paper-listbox class='dropdown-content' selected='0'>
<paper-item>This is a very long text that I have in my paper drop down</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page',
properties: {
}
});});
</script>
<base-page></base-page>
</body>
The selected text is "This is a very long text that I have in my paper drop Down", but it gets cut off. Is there a way that I can get the paper-dropdown-menu to autosize the Width?
Placed something here to play with: http://jsbin.com/dejukufaqe/edit?html,output
Cheers
To accomplish this, you'd have to calculate the pixel width of each string in the paper-list in a given font, get the maximum of the widths, and set the paper-dropdown-menu's width to that value.
See the demo below. The width is limited to the container's width so that it doesn't expand off the page.
<head>
<meta charset="utf-8">
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
</head>
<body>
<base-page></base-page>
<dom-module id='base-page'>
<style>
paper-dropdown-menu {
max-width: 100%;
}
</style>
<template>
<paper-dropdown-menu id="menu">
<paper-listbox id="list" class='dropdown-content' selected='0'>
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>This is a very very long long text that I have in my paper drop down</paper-item>
<paper-item>Baz</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: 'base-page',
ready: function() {
this.$.menu.style.width = this.maxTextWidth() + 'px';
},
maxTextWidth: function() {
var font = 'normal 13pt Roboto,Arial';
var widths = this.$.list.items.map(function(item) {
var text = item.textContent && item.textContent.trim();
return text ? getTextWidth(text, font) : 0;
});
return Math.max.apply(Math, widths);
}
});
// http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
function getTextWidth(text, font) {
// if given, use cached canvas for better performance
// else, create new canvas
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
</script>
</dom-module>
</body>
jsbin