I am currently experimenting with PubNub's EON Map library. It is a real-time mapping library that makes use of MapBox and PubNub's live data stream infrastructure.
I'm trying to build a simple PWA that publishes a string every time the location changes.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/geo-location/geo-location.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="stylesheet" type="text/css" href="../bower_components/mapbox.js/mapbox.css">
<script src="../bower_components/mapbox.js/mapbox.js"></script>
<script src="../bower_components/pubnub/dist/web/pubnub.min.js"></script>
<script src="../bower_components/eon-map/pubnub-mapbox.js"></script>
<!-- Instantiate PubNub -->
<script type="text/javascript">
console.log('Init PubNub');
var channel = 'pubnub-mapbox';
var pub = new PubNub({
publishKey: 'myPubKey',
subscribeKey: 'mySubKey',
logVerbosity: true
});
</script>
<dom-module id="my-view1">
<template>
<div id='map'></div>
<script type="text/javascript">
var map = eon.map({
pubnub: pub,
id: 'map',
mbToken: 'myToken',
mbId: 'myId',
channels: [channel]
});
</script>
</template>
<script>
Polymer({
is: 'my-view1',
});
The problem arises when the browser tries to instantiate the EON map. Even though there is a div element, I get this error message:
Uncaught Error: Map container not found.
at e._initContainer (leaflet-src.js:1979)
at e.initialize (leaflet-src.js:1532)
at e.initialize (map.js:37)
at new e (leaflet-src.js:229)
at Object.module.exports.map (map.js:233)
at new create (pubnub-mapbox.js:79)
at Object.window.eon.map (pubnub-mapbox.js:291)
at <anonymous>:2:19
at HTMLElement._createLocalRoot (polymer-mini.html:1998)
at HTMLElement._setupRoot (polymer-mini.html:1703)
I feel like I'm missing something very simple but I can't seem to catch my mistake. Any help would be greatly appreciated.
I was able to get eon-maps to render using the following:
Define a new eon-map element in eon.html page that contains the example code.
<link rel="stylesheet" type="text/css" href="./bower_components/mapbox.js/mapbox.css">
<script src="./bower_components/mapbox.js/mapbox.js"></script>
<script src="./bower_components/pubnub/dist/web/pubnub.min.js"></script>
<script src="./bower_components/eon-map/pubnub-mapbox.js"></script>
<dom-module id="eon-map">
<template>
<style type="text/css">
#map {
height: 200px;
}
</style>
<div id='map'></div>
</template>
<script>
Polymer({
is: 'eon-map',
ready: function() {
var channel = 'pubnub-mapbox';
var pub = new PubNub({
publishKey: 'your_pub_key',
subscribeKey: 'your_sub_key',
logVerbosity: true
});
var map = eon.map({
pubnub: pub,
id: 'map',
mbToken: 'your_mb_token',
mbId: 'your_mb_id',
channels: [channel],
debug: true
});
}
});
</script>
</dom-module>
Then, include eon.html in your root and use the eon-map element.
<link rel="import" href="./bower_components/polymer/polymer.html">
<!-- <link rel="import" href="shared-styles.html"> -->
<link rel="import" href="./bower_components/geo-location/geo-location.html">
<link rel="import" href="./bower_components/google-map/google-map.html">
<link rel="import" href="eon.html">
<eon-map></eon-map>
Related
I am using fullcalendar plugin and when i click a button it's passing event values to the calendar and calendar is displayed correctly. But when ever I click the button always a new calendar is displayed. I want to display only one calendar and it should display the passed event values accrodingly. please find the below code. Please note that I am not using any jquery libraries
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.calendarEl = "";
$scope.calendar = "";
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 08:00',
end: '2019-05-10 08:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
$scope.calendarEl = document.getElementById('calendar');
$scope.calendar = new FullCalendar.Calendar($scope.calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ]
});
$scope.calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
This can be achieved by using $scope.calendar.addEventSource('name_of_the_array_ofEvent_values')
When I change the page via a link or via JS this.set('route.path', 'packages'); the _routePageChagned method is running twice. Its also happening on when the page loads for the first time.
This is also happening in the default polymer starter kit template build from the CLI.
I'm I missing something? How can this occur?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="pages/my-loading.html">
<dom-module id="my-app">
<template>
<style>
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-pages
id="pages"
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
selected-attribute="visible"
role="main">
<my-loading name="loading"></my-loading>
<my-login name="login"></my-login>
<my-view404 name="view404"></my-view404>
<my-view403 name="view403"></my-view403>
<my-packages name="packages"></my-packages>
</iron-pages>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
/**
* The current page.
*/
page: {
type: String,
reflectToAttribute: true
},
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
console.log(page);
var resolvedPageUrl = this.resolveUrl('pages/my-' + page + '.html');
this.importHref(resolvedPageUrl, function() {
this.page = page;
}.bind(this), undefined, false);
}
});
</script>
</dom-module>
This works as a hack fix, still no idea why it's needed though.
_pageChange: function(page) {
this.debounce(function() {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('pages/my-' + page + '.html');
this.importHref(resolvedPageUrl,
this._pageLoaded.bind(this, page), // loaded callback
this._pageChange.bind(this, 'view404'),
true);
}.bind(this), 100);
}
I have a behavior that is shared across elements.
In a element i have a on-change="_toggle" switch.
In a second element i have the same code from the first element without the switch button. when the switch is active it reflect to the element containing the switch.
Q: how can i reflect the on-change="_toggle" function across all elements?
my code:
1.
<script>
LanguageBehavior = {
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'sl',
reflectToAttribute: true
},
},
attached: function() {
this.loadResources(this.resolveUrl('/data/locales.json'));
},
_toggle: function() {
this.language = this.$.switch.checked ? 'en' : 'sl';
// This function is the problem?
}
};
</script>
2
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="behavior.html">
<dom-module id="bazdara-element-1">
<template>
<style>
:host {
display: block;
}
</style>
{{localize('menu_2')}} // THIS CHANGES WITH THE SWITCH
<span title="english">🇬🇧 SI</span>
<paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
<span title="french">EN</span>
</template>
<script>
Polymer({
is: 'bazdara-element-1',
behaviors: [Polymer.AppLocalizeBehavior, LanguageBehavior],
});
</script>
</dom-module>
3
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="behavior.html">
<dom-module id="bazdara-element-2">
<template>
<style>
:host {
display: block;
}
</style>
{{localize('menu_2')}} // THIS Doesnt change
</template>
<script>
Polymer({
is: 'bazdara-element-2',
behaviors: [Polymer.AppLocalizeBehavior, LanguageBehavior],
});
</script>
</dom-module>
As each element will have its own copy of the behavior your approach is not going to work. Right now the only options i can come up with is:
keep both your elements in one common element and change the property there.
If you are planning to have all your elements in one single html file you can then change this feature in that html file and bind the property to all your elements.
I am using the Polymer CLI to create an app. I am utilizing Encapsulated Routing with Elements and Step 1. Get set up am trying to match the following patterns:
/analyze/:p1
/analyze/:p1/:p2
/analyze/:p1/:p2/:p3
That routes to 3 different web components.
For your <app-route> element, set the following attributes:
pattern = your desired route pattern
data = property binding to contain the parsed paths
In your case:
<app-route
pattern="/analyze/:p1/:p2/:p3"
data="{{routeData}}">
</app-route>
{{routeData}} will contain:
{
p1: 'a',
p2: 'b',
p3: 'c'
}
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="app-route/app-route.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<app-route
route="{{route}}"
pattern="/analyze/:p1/:p2/:p3"
data="{{routeData}}"
tail="{{tail}}">
</app-route>
</template>
<script>
Polymer({
is: 'x-foo',
ready: function() {
this.route = {path: "/analyze/a/b/c/d/e/f"};
console.log('p1', this.routeData.p1);
console.log('p2', this.routeData.p2);
console.log('p3', this.routeData.p3);
console.log('tail', this.tail.path);
}
});
</script>
</dom-module>
</body>
jsbin
I'm having troubles with the following small self contained polymer example for databinding.
My understanding is that by having the consumer and supplier both have an attributes with data, with the expression {{stuff}} passed in, that this is referring to the variable "stuff", in the scope of the element.
When the supplier is loaded, and ready, it should populate the stuff variable, causing the consumer to insert the data.
http://jsbin.com/yawipodayo/1/edit?html,css,js,output
<!doctype html>
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="consumer" attributes="data">
<template bind="{{data}}">{{}}</template>
</polymer-element>
<polymer-element name="supplier" attributes="data">
<template></template>
<script>
Polymer('supplier', {
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "root">
<template>
<supplier data="{{stuff}}"></supplier>
<consumer data="{{stuff}}"></consumer>
</template>
</polymer-element>
<root>
</root>
</body>
</html>
You have an amount of glitches within your code. I will drop comments around the problems to be fixed:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!-- noscript tags are mandatory for elements not having script declared -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-supplier" attributes="data">
<template></template>
<script>
// As of 0.5 you don’t need to specify name in script
// ⇓⇓⇓⇓
Polymer({
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "my-root" noscript>
<template>
<my-supplier data="{{stuff}}"></my-supplier>
<my-consumer data="{{stuff}}"></my-consumer>
</template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>
The corrected version works as expected: http://jsbin.com/zewimobaro/1/edit