CODEWITHSUNDEEP
javascriptreactjsecmascript-6react-map-gl
christheliz
christheliz

Reputation: 306

React-map-gl Popups on hover also pops up if location on edge of viewport

I am using Uber's reac-map-gl and use the popup functionality. A code snipped from the website looks as followed:

import {Component} from 'react';
import ReactMapGL, {Popup} from 'react-map-gl';

class Map extends Component {
  state = {
    showPopup: true
  };

  render() {
    const {showPopup} = this.state;
    return (
      <ReactMapGL latitude={37.78} longitude={-122.41} zoom={8}>
        {showPopup && <Popup
          latitude={37.78}
          longitude={-122.41}
          closeButton={true}
          closeOnClick={false}
          onClose={() => this.setState({showPopup: false})}
          anchor="top" >
          <div>You are here</div>
        </Popup>}
      </ReactMapGL>
    );
  }
}

I modified the code by making a list of Markers and Popups and return them. The Popups exclusively show up, if I hover over the Markers area but, and that's the issue, also if I take the map and drag it so that the Markers are on the edge off the viewport.

My CSS looks as followed:

.mapboxgl-popup.mapboxgl-popup-anchor-top {
  opacity: 0;
}

.mapboxgl-popup.mapboxgl-popup-anchor-top:hover {
  opacity: 100%;
  width: 150px;
  height: 150px;
  opacity: 1;
}

Upvotes: 1

Views: 5142

Answers (1)

Sydney Y
Sydney Y

Reputation: 3152

I'm not sure why that's happening, but the Popup component seems to have an action associated with the marker being outside of the view:

https://github.com/uber/react-map-gl/blob/master/docs/components/popup.md#dynamicposition-boolean---default-true

Consider setting it to false so that their action isn't triggered.

  <Popup
    latitude={37.78}
    longitude={-122.41}
    closeButton={true}
    closeOnClick={false}
    onClose={() => this.setState({showPopup: false})}
    anchor="top" 
    dynamicPosition={false}
  ></Popup>

Also, you're not removing the popups after the hover, they're just opacity:0. Probably the action that dynamicPosition is triggering is overriding your opacity. Instead of using CSS for showing and hiding popups you should use JavaScript/React.

Upvotes: 3

Related Questions