Fix iPhone panning issues

This commit is contained in:
Paulus Schoutsen 2015-09-21 22:09:51 -07:00
parent 8f13584c14
commit 0be937ee6d
2 changed files with 14 additions and 6 deletions

View File

@ -30,14 +30,14 @@
</paper-toolbar>
<div class="flex map">
<leaflet-map class="fit" fit-to-markers max-zoom="18">
<leaflet-map class="fit" fit-to-markers max-zoom="18" id="map">
<leaflet-divicon id="home" icon-height="45" icon-width="45">
<ha-entity-marker></ha-entity-marker>
</leaflet-divicon>
<leaflet-marker latitude="[[locationGPS.latitude]]" icon="home"
longitude="[[locationGPS.longitude]]" title="[[locationName]]"
></leaflet-marker>
no-clickable></leaflet-marker>
<template is='dom-repeat' items='[[locationEntities]]'>
<leaflet-divicon id="[[item.entityId]]" icon-height="45" icon-width="45">
@ -50,8 +50,8 @@
<template is='dom-if' if='[[item.attributes.gps_accuracy]]'>
<leaflet-circle latitude="[[item.attributes.latitude]]"
longitude="[[item.attributes.longitude]]"
radius="[[item.attributes.gps_accuracy]]" color="#d00">
longitude="[[item.attributes.longitude]]" no-clickable
radius="[[item.attributes.gps_accuracy]]" fill color="#0288D1">
</leaflet-circle>
</template>
</template>

View File

@ -44,11 +44,19 @@ export default new Polymer({
type: Boolean,
value: false,
},
},
attached() {
window.el = this;
// On iPhone 5, 5s and some 6 I have observed that the user would be
// unable to pan on initial load. This fixes it.
if (L.Browser.mobileWebkit) {
this.async(() => {
const map = this.$.map;
const prev = map.style.display;
map.style.display = 'none';
this.async(() => { map.style.display = prev; }, 1);
}, 1);
}
},
computeMenuButtonClass(narrow, showMenu) {