BigScreen/src/components/Pine/Point.js

import React, { PureComponent } from "react";
import { CustomOverlay } from "react-bmapgl";
import styled from "styled-components";
import img1 from "../../assets/icon1.jpg";

class Project extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }

  toggleInfo() {
    if (!this.props.data) return;
    this.setState({
      visible: !this.state.visible,
    });
  }
  render() {
    const { position, title, onClick } = this.props;
    return (
      <CustomOverlay position={position}>
        <Box>
          <div className="text">{title}</div>
          <div onClick={(e) => onClick(e)} className={`icon iconWater`}></div>
        </Box>
      </CustomOverlay>
    );
  }
}

const Box = styled.div`
  position: relative;
  text-align: center;

  .text {
    padding: 4px 10px;
    white-space: nowrap;
    background-color: rgba(8, 41, 75, 0.7);
    color: #fff;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100px;
  }

  .icon {
    width: 30px;
    height: 30px;
    margin: auto;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .iconWater {
    background-image: url(${img1});
  }
`;

export default Project;