Merge pull request #753 from mklopets/render-in-portal-prop

renderChildrenInPortal Map prop to pass mouse events through projected layers
alex3165 · Jul 14, 2019 · 8c4c727 · 8c4c727
2 parents 25b924f + 2bb7398
commit 8c4c727
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 10 deletions.
diff --git a/docs/API.md b/docs/API.md
@@ -72,6 +72,7 @@ const Map = ReactMapboxGl({
   * `flyTo`
 * **animationOptions** : `object` Options for moving animation [see](https://www.mapbox.com/mapbox-gl-js/api/#animationoptions)
 * **flyToOptions** : `object` Options for flyTo animation [see](https://www.mapbox.com/mapbox-gl-js/api/#map#flyto)
+* **renderChildrenInPortal** : `boolean` If `true`, Popup and Marker elements will be rendered in a React portal, allowing mouse events to pass through them.
 
 ### Events
 
@@ -293,26 +294,30 @@ import { Feature } from "react-mapbox-gl";
 # Image
 
 Adds to the map a image that can be used as [`icon-image`](https://www.mapbox.com/mapbox-gl-js/style-spec#layout-symbol-icon-image)
+
 ### How to use
 
- Load local image. [see docs](https://www.mapbox.com/mapbox-gl-js/api#map#addimage)
+Load local image. [see docs](https://www.mapbox.com/mapbox-gl-js/api#map#addimage)
+
 ```jsx harmony
 <Image id={'image-uid'} data={someImage} />
 ```
 
- Load image from url. [see docs](https://www.mapbox.com/mapbox-gl-js/api#map#loadimage)
+Load image from url. [see docs](https://www.mapbox.com/mapbox-gl-js/api#map#loadimage)
+
 ```jsx harmony
 <Image id={'image-uid'} url={'url/to/image'} />
 ```
 
 ### Properties
+
 * **id** _(required)_: `string` the image name
 * **url** `string` A url to load the image from [see docs](https://www.mapbox.com/mapbox-gl-js/api#map#loadimage)
 * **data** `ImageDataType` The image data [see docs](https://www.mapbox.com/mapbox-gl-js/api#map#loadimage)
 * **options** `ImageOptionsType` The image options [see docs](https://www.mapbox.com/mapbox-gl-js/api#map#loadimage)
 * **onLoaded** `() => void` Will be called when image loaded to map
-* **onError** `(error: Error) => void` Will be called if image did not load 
-  
+* **onError** `(error: Error) => void` Will be called if image did not load
+
 ---
 
 # ZoomControl

diff --git a/example/src/demos/htmlCluster.tsx b/example/src/demos/htmlCluster.tsx
@@ -123,6 +123,7 @@ class HtmlCluster extends React.Component<Props, State> {
         onStyleLoad={this.onStyleLoad}
         onMove={this.onMove}
         containerStyle={mapStyle}
+        renderChildrenInPortal={true}
       >
         <Cluster ClusterMarkerFactory={this.clusterMarker}>
           {falls.features.map((feature: any, key: number) => (

diff --git a/example/src/demos/raws/htmlCluster.raw b/example/src/demos/raws/htmlCluster.raw
@@ -123,6 +123,7 @@ class HtmlCluster extends React.Component<Props, State> {
         onStyleLoad={this.onStyleLoad}
         onMove={this.onMove}
         containerStyle={mapStyle}
+        renderChildrenInPortal={true}
       >
         <Cluster ClusterMarkerFactory={this.clusterMarker}>
           {falls.features.map((feature: any, key: number) => (

diff --git a/src/map.tsx b/src/map.tsx
@@ -59,6 +59,7 @@ export interface Props {
   animationOptions?: Partial<AnimationOptions>;
   flyToOptions?: Partial<FlyToOptions>;
   children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
+  renderChildrenInPortal?: boolean;
 }
 
 export interface State {
@@ -377,20 +378,42 @@ const ReactMapboxFactory = ({
     };
 
     public render() {
-      const { containerStyle, className, children } = this.props;
+      const {
+        containerStyle,
+        className,
+        children,
+        renderChildrenInPortal
+      } = this.props;
+
       const { ready, map } = this.state;
-      const container =
-        ready && map && typeof map.getCanvasContainer === 'function'
-          ? map.getCanvasContainer()
-          : undefined;
+
+      if (renderChildrenInPortal) {
+        const container =
+          ready && map && typeof map.getCanvasContainer === 'function'
+            ? map.getCanvasContainer()
+            : undefined;
+
+        return (
+          <MapContext.Provider value={map}>
+            <div
+              ref={this.setRef}
+              className={className}
+              style={{ ...containerStyle }}
+            >
+              {ready && container && createPortal(children, container)}
+            </div>
+          </MapContext.Provider>
+        );
+      }
+
       return (
         <MapContext.Provider value={map}>
           <div
             ref={this.setRef}
             className={className}
             style={{ ...containerStyle }}
           >
-            {ready && container && createPortal(children, container)}
+            {ready && children}
           </div>
         </MapContext.Provider>
       );