refactor: clean up map tooltip

PropertyPraxis · Apr 17, 2024 · e6dd6b5 · e6dd6b5
1 parent e212d23
commit e6dd6b5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/client/src/components/Map/Map.jsx b/client/src/components/Map/Map.jsx
@@ -442,7 +442,11 @@ class PraxisMap extends Component {
           </Source>
 
           {hoveredFeature && (
-            <Popup longitude={lngLat.lng} latitude={lngLat.lat}>
+            <Popup
+              longitude={lngLat.lng}
+              latitude={lngLat.lat}
+              closeOnClick={false}
+            >
               <div className="tooltip">
                 <div>{hoveredFeature.properties.propaddr}</div>
                 <div>Speculator: {hoveredFeature.properties.own_id}</div>

diff --git a/client/src/components/pages/Home.jsx b/client/src/components/pages/Home.jsx
@@ -92,7 +92,7 @@ Home.propTypes = {
   mapData: PropTypes.object.isRequired,
   mapState: PropTypes.object.isRequired,
   results: PropTypes.object.isRequired,
-  dipatch: PropTypes.func.isRequired,
+  dispatch: PropTypes.func.isRequired,
 }
 
 function mapStateToProps({ searchState, mapData, mapState, results }) {

diff --git a/client/src/scss/Map.scss b/client/src/scss/Map.scss
@@ -4,14 +4,35 @@
 
 }
 
-.tooltip {
-  position: absolute;
-  margin: 8px;
-  padding: 4px;
+.mapboxgl-popup {
+  pointer-events: none;
+}
+
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+  border-bottom-color: rgba(0, 0, 0, 0.8);
+}
+
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+  border-top-color: rgba(0, 0, 0, 0.8);
+}
+
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+  border-right-color: rgba(0, 0, 0, 0.8);
+}
+
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+  border-left-color: rgba(0, 0, 0, 0.8);
+}
+.mapboxgl-popup-content {
   background: rgba(0, 0, 0, 0.8);
-  color: #fff;
   max-width: 300px;
+  padding: 4px;
+  color: #fff;
   font-size: 10px;
-  z-index: 9;
   pointer-events: none;
+  z-index: 9;
 }