From 973bfc4c2c49ac51fc0f5155edaaa4d03387d880 Mon Sep 17 00:00:00 2001
From: Karl-Aksel Puulmann <macobo@users.noreply.github.com>
Date: Sun, 27 Jan 2019 22:40:16 +0200
Subject: [PATCH] Don't query interactive layer ids before map has loaded
 (#708)

---
 src/components/interactive-map.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/interactive-map.js b/src/components/interactive-map.js
index b7dd61af..03b57fcc 100644
--- a/src/components/interactive-map.js
+++ b/src/components/interactive-map.js
@@ -166,6 +166,7 @@ type InteractiveMapProps = StaticMapProps & {
 };
 
 type State = {
+  isLoaded: boolean,
   isDragging: boolean,
   isHovering: boolean
 };
@@ -204,6 +205,8 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
   }
 
   state : State = {
+    // Whether mapbox styles have finished loading
+    isLoaded: false,
     // Whether the cursor is down
     isDragging: false,
     // Whether the cursor is over a clickable feature
@@ -347,6 +350,11 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
     return event;
   }
 
+  _onLoad = (event : MapEvent) => {
+    this.setState({isLoaded: true});
+    this.props.onLoad(event);
+  }
+
   _onEvent = (callbackName : string, event : MapEvent) => {
     const func = this.props[callbackName];
     if (func) {
@@ -390,8 +398,8 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
     if (!this.state.isDragging) {
       const {onHover, interactiveLayerIds} = this.props;
       let features;
-      if (interactiveLayerIds || onHover) {
-        event = this._normalizeEvent(event);
+      event = this._normalizeEvent(event);
+      if (this.state.isLoaded && (interactiveLayerIds || onHover)) {
         features = this._getFeatures({pos: event.point, radius: this.props.clickRadius});
       }
       if (onHover) {
@@ -446,6 +454,7 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
             height: '100%',
             style: null,
             onResize: this._onResize,
+            onLoad: this._onLoad,
             ref: this._staticMapRef,
             children: this.props.children
           }