I'm trying to use the createPolygon option of geoXML3.parser to customise how Polygon elements imported from my KML file are rendered on my map (Google maps api v3), but I'm getting an error in the console, and the map fails to load. Here's a minimal example.
<!DOCTYPE html>
<html>
<head>
<title>GeoXML issue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
#map {
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/geoxml3/polys/geoxml3.js"></script>
<script type="text/javascript" src="/geoxml3/ProjectedOverlay.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
mapTypeId: 'roadmap'
});
var geoXml = new geoXML3.parser({
map: map,
createPolygon: myPolygons,
singleInfoWindow: true
});
geoXml.parse('myKml.kml');
function myPolygons(p) {
console.log("I'll do stuff here");
geoXml.createPolygon(p);
return p;
}
});
</script>
<div id="map"></div>
</body>
</html>
Here's my kml file
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Folder>
<description><![CDATA[My KML]]></description>
<Placemark>
<name><![CDATA[41400]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-6.84733,53.360684,0
-7.312225,53.32858,0
-7.294876,53.294378,0
-7.225435,53.195982,0
-6.918459,53.183257,0
-6.792612,53.201241,0
-6.690876,53.292838,0
-6.647491,53.293932,0
-6.658125,53.344486,0
-6.84733,53.360684,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name><![CDATA[41403]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-7.717841,53.456508,0
-7.389035,53.446422,0
-6.892437,53.666006,0
-6.967472,53.698911,0
-7.082074,53.690988,0
-7.46291,53.86158,0
-7.650731,53.78538,0
-7.740906,53.788201,0
-7.717841,53.456508,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name><![CDATA[41402]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-6.658178,53.525725,0
-6.600668,53.530331,0
-6.892437,53.666006,0
-7.389035,53.446422,0
-6.658178,53.525725,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name><![CDATA[41401]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-7.389035,53.446422,0
-7.312225,53.32858,0
-6.84733,53.360684,0
-6.658125,53.344486,0
-6.620126,53.41344,0
-6.570206,53.428354,0
-6.562111,53.450037,0
-6.658178,53.525725,0
-7.389035,53.446422,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</kml>
And here's a log of my console when the error happens
map_test2.php:39 I'll do stuff here
js?v=3&key=#mykey#&libraries=places&sensor=false:100 Uncaught ge {message: "not a LatLngBounds or LatLngBoundsLiteral: not an Object", name: "InvalidValueError", stack: "Error↵ at new ge (https://maps.googleapis.com/m…/michael.ran.ie/geoxml3/polys/geoxml3.js:1189:11)"}message: "not a LatLngBounds or LatLngBoundsLiteral: not an Object"name: "InvalidValueError"stack: "Error\n at new ge (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:78:72)\n at Object._.he (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:78:182)\n at Object._.Tf (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:100:120)\n at _.Qf.union (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:236:38)\n at render (https://michael.ran.ie/geoxml3/polys/geoxml3.js:529:23)\n at https://michael.ran.ie/geoxml3/polys/geoxml3.js:160:54\n at XMLHttpRequest.xhrFetcher.fetcher.onreadystatechange (https://michael.ran.ie/geoxml3/polys/geoxml3.js:1189:11)"__proto__: Error
_.Tf # js?v=3&key=#mykey#&libraries=places&sensor=false:100
_.Qf.union # js?v=3&key=#mykey#&libraries=places&sensor=false:236
render # geoxml3.js:529
(anonymous) # geoxml3.js:160
xhrFetcher.fetcher.onreadystatechange # geoxml3.js:1189
XMLHttpRequest.send (async)
geoXML3.fetchXML # geoxml3.js:1196
fetchDoc # geoxml3.js:160
parse # geoxml3.js:155
(anonymous) # map_test2.php:36
n # jquery.min.js:2
fireWith # jquery.min.js:2
ready # jquery.min.js:2
B # jquery.min.js:2
If I comment out the the createPolygon option, or indeed the geoXml.createPolygon(p) line in myPolygons, the map renders fine.
What's the issue here? Is my code wrong? Or the kml file?
The return value from your createPolygon function is not correct, you are throwing away the return value of the native geoXml.createPolygon function and returning the input arguement.
Instead of:
function myPolygons(p) {
console.log("I'll do stuff here");
geoXml.createPolygon(p);
return p;
}
Return the result of the native createPolygon function (or create one of your own that returns a google.maps.Polygon with a bounds attribute):
function myPolygons(p) {
console.log("I'll do stuff here");
return geoXml.createPolygon(p);;
}
or:
function myPolygons(p) {
console.log("I'll do stuff here");
var polygon = geoXml.createPolygon(p);
return polygon;
}
proof of concept fiddle
code snippet:
var kmlStr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.1"><Folder><description><![CDATA[My KML]]></description><Placemark><name><![CDATA[41400]]></name><visibility>1</visibility><open>0</open><Style><LineStyle><color>FF000000</color><width>1</width></LineStyle><PolyStyle><fill>1</fill><outline>1</outline><color>FFFFFFFF</color></PolyStyle></Style><Polygon><extrude>1</extrude><altitudeMode>clampToGround</altitudeMode><tessellate>1</tessellate><outerBoundaryIs><LinearRing><coordinates>-6.84733,53.360684,0 -7.312225,53.32858,0 -7.294876,53.294378,0 -7.225435,53.195982,0 -6.918459,53.183257,0 -6.792612,53.201241,0 -6.690876,53.292838,0 -6.647491,53.293932,0 -6.658125,53.344486,0 -6.84733,53.360684,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name><![CDATA[41403]]></name><visibility>1</visibility><open>0</open><Style><LineStyle><color>FF000000</color><width>1</width></LineStyle><PolyStyle><fill>1</fill><outline>1</outline><color>FFFFFFFF</color></PolyStyle></Style><Polygon><extrude>1</extrude><altitudeMode>clampToGround</altitudeMode><tessellate>1</tessellate><outerBoundaryIs><LinearRing><coordinates>-7.717841,53.456508,0 -7.389035,53.446422,0 -6.892437,53.666006,0 -6.967472,53.698911,0 -7.082074,53.690988,0 -7.46291,53.86158,0 -7.650731,53.78538,0 -7.740906,53.788201,0 -7.717841,53.456508,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name><![CDATA[41402]]></name><visibility>1</visibility><open>0</open><Style><LineStyle><color>FF000000</color><width>1</width></LineStyle><PolyStyle><fill>1</fill><outline>1</outline><color>FFFFFFFF</color></PolyStyle></Style><Polygon><extrude>1</extrude><altitudeMode>clampToGround</altitudeMode><tessellate>1</tessellate><outerBoundaryIs><LinearRing><coordinates>-6.658178,53.525725,0 -6.600668,53.530331,0 -6.892437,53.666006,0 -7.389035,53.446422,0 -6.658178,53.525725,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name><![CDATA[41401]]></name><visibility>1</visibility><open>0</open><Style>eStyle><color>FF000000</color><width>1</width></LineStyle><PolyStyle><fill>1</fill><outline>1</outline><color>FFFFFFFF</color></PolyStyle></Style><Polygon><extrude>1</extrude><altitudeMode>clampToGround</altitudeMode><tessellate>1</tessellate><outerBoundaryIs><LinearRing><coordinates>-7.389035,53.446422,0 -7.312225,53.32858,0 -6.84733,53.360684,0 -6.658125,53.344486,0 -6.620126,53.41344,0 -6.570206,53.428354,0 -6.562111,53.450037,0 -6.658178,53.525725,0 -7.389035,53.446422,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Folder></kml>'
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Simple Polygon</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/ProjectedOverlay.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
$(document).ready(function() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
mapTypeId: 'roadmap'
});
var geoXml = new geoXML3.parser({
map: map,
createPolygon: myPolygons,
singleInfoWindow: true
});
geoXml.parseKmlString(kmlStr);
function myPolygons(p) {
console.log("I'll do stuff here");
return geoXml.createPolygon(p);;
}
});
</script>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
</body>
</html>
Related
I'm trying to add the default mouse panning behavior to the map, but when trying to create an instance of MapEvents like this:
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
I get this error:
Uncaught Error: events: map instance required
I'm developing an Angular app but i tried with a plain HTML page and the same happens.
Here is the code i'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px;">
</div>
<script>
var platform = new H.service.Platform({
'apikey': 'REPLACED'
});
var defaultLayers = platform.createDefaultLayers();
var mapElement = document.getElementById('map');
var map = new H.Map(
mapElement,
defaultLayers.vector.normal.map,
{
zoom: 5,
center: {
lat: 0,
lng: 0
},
pixelRatio: window.devicePixelRatio || 1
}
)
console.log(map)
var ui = H.ui.UI.createDefault(map, defaultLayers)
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
</script>
</body>
</html>
Can anyone else reproduce this issue?
You need to remove duplicated scripts importing.
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
I am trying to implement Firebase Authentication for my application authentication, but I get a Cannot read property 'signInWithEmailAndPassword' of undefined error.
Below follows the code.
index.html
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ProcWeb</title>
<meta name="description" content="My App description">
<link rel="icon" href="/images/favicon.ico">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/bower_components/platinum-sw/platinum-sw-elements.html">
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/polymerfire.html">
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body unresolved>
<!-- Configure Service Worker caching: -->
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="/service-worker.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<!-- Configure Firebase app: -->
<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com">
</firebase-app>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
my-app.html
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.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="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>ProcWeb</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">Home</a>
<a name="view1" href="/view1">Gestão de Clientes</a>
<a name="view2" href="/view2">Gestão de Processos</a>
<a name="view3" href="/view3">Agenda</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>ProcWeb</div>
</app-toolbar>
</app-header>
<!-- Configure Firebase app: -->
<!--<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com"
storageBucket="procweb-28a01.appspot.com"
messagingSenderId="621427834965">
</firebase-app>-->
<firebase-auth
id="auth"
app-name="procWeb"
user="{{user}}"
on-error="showError">
</firebase-auth>
<div hidden$="[[user]]" class="card">
<h3>Email/Password</h3>
<form on-submit="signInWithEmailAndPassword">
<paper-input label="Email" type="email" value="{{email}}"></paper-input>
<paper-input label="Password" type="password" value="{{password}}"></paper-input>
<paper-button type="submit" on-tap="signIn" raised class="custom indigo">Sign In</paper-button>
</form>
</div>
<div hidden$="[[!user]]">
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
signIn: function() {
// firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function(response){
// this.page = 'view1';
// }).catch(function(error){
// console.log(error);
// });
this.$.auth.signInWithEmailAndPassword(this.email, this.password).then(function(response){
}).catch(function(error){
});
}
});
})();
</script>
</dom-module>
I'm using Polymer 1.0 and Firebase 3.0.
Am I missing something? Thanks.
I'm a bit lost on how to implement the firebase-auth element. Any examples would be appreciated, I haven't managed to find any yet.
Thanks
On this question, Glenn Vandeuren posts the following:
Element
<!--
#license
Copyright (c) 2015 Glenn Vandeuren. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<dom-module id="login-button">
<style>
:host {
display: block;
box-sizing: border-box;
}
</style>
<template>
<paper-button raised>Login using <span>[[service]]</span></paper-button>
</template>
</dom-module>
<script>
Polymer({
is: 'login-button',
properties: {
service: String
},
listeners: {
'tap': '_handleTap'
},
_handleTap: function () {
this.fire('login', this.service);
}
});
</script>
Index
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>login-button Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../login-button.html">
</head>
<body>
<login-button service="google"></login-button>
<login-button service="twitter"></login-button>
<script>
document.addEventListener('login', function(service) {
// handleLogin();
alert(service.detail);
});
</script>
</body>
</html>
I ended up getting auth to work by adapting this example element by HackITtoday for my firebase urls. It's as simple as adding the element like:
<hi9-login></hi9-login>
I have a jsp page which includes a another jsp file which has a google map. But when I access the parent page the div in which the jsp file is included is getting a CSS property value "overflow: hidden" due to which the map is not shown.
Code for parent jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" />
<script src="<%=request.getContextPath()%>/scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
function showHeatMap(){
$('#heatDiv').toggle(true);
$('#exportToCSVHeatMap').removeAttr('disabled');
$('#dummyFenceMap').style.overflow="visible";
}
</script>
</head>
<body>
<div id="heatMapDiv" style="display:none">
heat map
<div class="div-inline">
<div class="div-daily">From Date (MM/DD/YYYY)</div>
<input type="text" name="fromDateHM" id="datepicker4" class="input-inline" />
</div>
<div class="div-inline">
<div class="div-daily">To Date (MM/DD/YYYY)</div>
<input type="text" name="toDateHM" id="datepicker5" class="input-inline" />
</div>
<div id="buttonDiv">
<input type="button" value="Show Heat Map" onclick="showHeatMap()" />
<input type="button" value="Export To CSV" id="exportToCSVHeatMap" onclick="exportToCSVHeatMap()" disabled="disabled"/>
</div> <!-- buttonDiv -->
<div id="heatDiv" class="heat-map">
<div class="div-daily">Heat Map</div>
<div id="heatMap" style="display= block; width= 800px; height= 800px; "><jsp:include page="../jsp/dummyheatmap.jsp?name=test&id=1001"></jsp:include></div>
</div> <!-- footTraffic -->
</div> <!-- heatMapDiv -->
</body>
</html>
Included jsp file code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>dummy heat map</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#fenceMap { height: 50% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/* For Google Map.*/
function googleMapinitialize(){
var fenceAdd=new google.maps.LatLng(37.2146,121.5545);
var mapProp = {
center:fenceAdd,
zoom:30,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("dummyFenceMap"),mapProp);
var geocoder = new google.maps.Geocoder();
var location = "2001 Gateway PI, San Jose, CA";
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
var geocoderRequest = {
address: location
};
var myCity = null;
var marker = null;
var infowindow = null;
geocoder.geocode(geocoderRequest, function(results, status) {
if (status =="" || status == google.maps.GeocoderStatus.ZERO_RESULTS){
alert("'" + location + "' not found!!!");
} else if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
fenceAdd = new google.maps.LatLng(results[0].geometry.location.hb,results[0].geometry.location.ib);
if (!marker) {
marker = new google.maps.Marker({
map: map,
raiseOnDrag:false,
draggable:true
});
marker.setPosition(results[0].geometry.location);
google.maps.event.addListener(marker,'click',function(){
if (!infowindow) {
infowindow = new google.maps.InfoWindow({
disableAutoPan:true,
maxWidth:100
});
}
var content = '<strong>' + results[0].formatted_address + '</strong>';
infowindow.setContent(content);
infowindow.setPosition(results[0].geometry.location);
infowindow.open(map, marker);
});
}
}
myCity = new google.maps.Circle({
center:fenceAdd,
radius:125,
strokeColor:"#0000ff",
strokeOpacity:0.1,
strokeWeight:0.1,
fillColor:"#0000ff",
fillOpacity:0.20,
map:map
});
google.maps.event.addListener(map, 'click', function(){
infowindow.close();
});
google.maps.event.addListener(map, 'dblclick', function(){
window.open("<%=request.getContextPath() %>/jsp/googleMapPopup.jsp?fenceAddress="+$('#haddr').val(),'ADDRESSMAP','height=400,width=600');
});
google.maps.event.trigger(map,'resize');
});
}
google.maps.event.addDomListener(window, 'load', googleMapinitialize);
</script>
</head>
<body onload="googleMapinitialize()">
<h1>Name : <%=request.getParameter("name")%> & id : <%=request.getParameter("id")%></h1>
<div id="dummyFenceMap" style="height=80%;border:1px solid #ff0000;overflow:visible;">
</div><!-- new-div-tag2 -->
<h1>Map end</h1>
</body>
</html>
The #heatMap div has a height of 2 / 11px and overflow: hidden. When I edit the overflow property to visible I see the google logo & map type
Can anyone help me what is wrong in my code?
I solved the issue by adding following style to the included JSP file's 'dummyFenceMap' div.
style="border:1px solid #ff0000;position:relative; left:150px; top:10px; width:500px; height:400px;padding-left:15px;padding-right:15px"
After adding the above style the Map is shown in the embedded JSP file.
But facing a new issue that is - the Google map is shown in 3/4th part of the div rest is blank. But when I resize the browser window the Google Map is redrawn properly. How to resolve this issue?
This question is specific to the design. I have an application that displays positions on a map all works "fine". But now I need to design the user interface, that goes beyond the map (buttons, forms, etc.) these will be located on one side of the map, but under any reason the map is displayed once change some of the CSS page.
I'm a bit desperate since neither my own CSS, or bootstrap (2.3.0), foundation (3.2.5) works. The map simply not displayed, in the console there are no errors. Event in the better case the map is displayed but with graphics glitchs (zoom controls messed, bad markers position, etc) That may be happening and how I can fix this. Will I have to use an iframe? or is there a better solution?
I've readed about max-width: none fix but this is solving nothing. To clarify that I am using the maps are not static.
I can get work perfectly the maps if try with a simple markup and styles
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="/css/styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="/js/app.js"></script>
</body>
</html>
styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
});
But obviously it'snt enough for build the application.
A solution that includes the use of iframes, since it seems that is the only way that the map is not affected by the rest of the CSS
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span9">
<iframe id="map_container" src="/map.html" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
map.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<link rel="stylesheet" href="/css/map-styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
</body>
</html>
map-styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
var options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
$iframe = $('#map_container'),
map_el = $iframe.contents().find('#map')[0],
map = new google.maps.Map(map_el, options);
// Match iframe size to parent
$iframe.width($iframe.parent().width());
$iframe.height($iframe.parent().height());
});