From 0be937ee6d2df3bf185720660a9039b8e8be9e0e Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 21 Sep 2015 22:09:51 -0700
Subject: [PATCH] Fix iPhone panning issues

---
 src/layouts/partial-map.html |  8 ++++----
 src/layouts/partial-map.js   | 12 ++++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/layouts/partial-map.html b/src/layouts/partial-map.html
index 55259390aa..38bfd9c566 100644
--- 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
index 54e15bb2dc..ad393a53b8 100644
--- 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) {