0
Follow
0
View

How to make React Leaflet Marker popup in right side always?

dulongsb 注册会员
2023-01-25 15:46

If this CSS didn't reflect your code. I would recommend for you move it to a global CSS file. to make sure that you override the react-leaflet style. I just updated the class. instead of I used

.leaflet-popup {
      transform: none !important;
      position: absolute !important;
      top: 1px !important;
      bottom: 0px !important;
      right: 0% !important;
      display: flex !important;
      align-items: right !important;
      justify-items: right !important;
    }
    
    .leaflet-container .leaflet-popup-content-wrapper .popup_modle {
      z-index: 1000;
      position: absolute;
      right: 0 !important;
      height: 400px;
      width: 300px;
      top: -1px;
      background-color: rgba(5, 5, 5, 0.7) !important;
      background: linear-gradient(
        60deg,
        rgba(134, 134, 134, 0.7) 0%,
        rgba(0, 0, 0, 0.7) 59%
      ) !important;
      align-items: right !important;
      justify-items: right !important;
      justify-content: right !important;
      -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
    }
dongxiaoyi1985 注册会员
2023-01-25 15:46

On top that that marker I have added a model to show data.

and the model goes top of the map like this so you can write your own popup.

const [open, setOpen] = React.useState(false);
const [data, setData] = React.useState();

 const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = (datas) => {
    setOpen(true);
    setData(datas);
  };

Name

{date?.name}

Geographic index

{date?.location?.country_name}, {" "} {date?.location?.city}


OpenStreetMap contributors' url="{`https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=${process.env.REACT_APP_STADIA_API_KEY}`}"> {data.length > 0 && ( {data?.map((location, i) => ( <> handleOpen(location) }} > ))} )}

and css

.popup_modle {
  position: absolute;
  right: 0 !important;
  top: 65px !important;
  height: 400px;
  width: 300px;
  background-color: rgba(5, 5, 5, 0.7) !important;
  background: linear-gradient(
    60deg,
    rgba(134, 134, 134, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 59%
  ) !important;
}

About the Author

Question Info

Publish Time
2023-01-25 15:46
Update Time
2023-01-25 15:46

Related Question