React Leaflet ポップアップとツールチップの使い方

npx create-react-app

npm install leaflet react-leaflet

src //
  |-- index.js
  |-- index.css
  |-- App.css
  `-- App.js

import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  Tooltip,
  useMapEvent,
} from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./App.css";
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

//defaultMarker
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconUrl: icon,
  shadowUrl: iconShadow,
});

const center = [35.3628, 138.7307];
const point1 = [35.274774075037776, 138.6131286621094];
const point2 = [35.292710387701696, 138.9097595214844];

function App() {
  return (
    <MapContainer center={center} zoom={10} zoomControl={false} id="map">
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={point1}>
        <Popup className="popup">
          Hello <br /> World
        </Popup>
      </Marker>

      <Marker position={point2}>
        <Tooltip
          direction="top"
          className="tooltip"
          offset={[-15, -15]}
          permanent
          opacity={1}
        >
          Hello World
        </Tooltip>
      </Marker>
    </MapContainer>
  );
}

export default App;

.leaflet-popup-tip {
    background: rgb(211, 242, 254);
}

.leaflet-popup-content {
    background: rgb(211, 242, 254);
}

.leaflet-tooltip {
    background: rgb(211, 242, 254);
    border: none;
}

/* .leaflet-tooltip-[directionの値] */
.leaflet-tooltip-top:before {
    border-top-color: rgb(211, 242, 254);
}

import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  Tooltip,
  useMapEvent,
} from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./App.css";
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

//defaultMarker
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconUrl: icon,
  shadowUrl: iconShadow,
});

const center = [35.3628, 138.7307];
const point1 = [35.274774075037776, 138.6131286621094];
const point2 = [35.292710387701696, 138.9097595214844];

const Add = () => {
  const map = useMapEvent("click", (location) => {
    //ポップアップ
    map.openPopup("<div>popup</div>", location.latlng);
    // ツールチップ
    // map.openTooltip("<p>toolTip</p>", location.latlng, { direction: "top" });
  });
};

function App() {
  return (
    <MapContainer center={center} zoom={10} zoomControl={false} id="map">
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={point1}>
        <Popup className="popup">
          Hello <br /> World
        </Popup>
      </Marker>

      <Marker position={point2}>
        <Tooltip
          direction="top"
          className="tooltip"
          offset={[-15, -15]}
          permanent
          opacity={1}
        >
          Hello World
        </Tooltip>
      </Marker>

      <Add />
    </MapContainer>
  );
}

export default App;