Fix iPhone panning issues

seannguyen · Sep 22, 2015 · 0be937e · 0be937e
1 parent 8f13584
commit 0be937e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/layouts/partial-map.html b/src/layouts/partial-map.html
@@ -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>

diff --git a/src/layouts/partial-map.js b/src/layouts/partial-map.js
@@ -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) {