React Leaflet マーカーを表示と見た目をカスタマイズする方法

npx create-react-app

npm install leaflet react-leaflet

src //
  |-- index.js
  |-- index.css
  |-- App.css
  |-- App.js
  `-- conponents //
      |-- markers.js  
      `-- icons //
          `-- location.svg

import {
  MapContainer,
  TileLayer,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./App.css";
import Markers from './components/markers'

const center = [35.3628, 138.7307];

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"
      />
      <Markers />
    </MapContainer>
  );
}

export default App;

import { Marker } from "react-leaflet";
import L from "leaflet";
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 colorMarker = (color) => {
  return L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow,
    className: `default-marker ${color}`,
  });
};

const customMarker = (type) => {
  const icon = require(`./icons/${type}.svg`);
  return L.icon({
    iconUrl: icon,
    iconSize: [35, 35],
    className: "marker",
  });
};

function Markers() {
  const center = [35.3628, 138.7307];
  const point1 = [35.274774075037776, 138.6131286621094];
  const point2 = [35.292710387701696, 138.9097595214844];
  return (
    <>
      <Marker position={point1} icon={colorMarker("green")} />
      <Marker position={point2} icon={colorMarker("red")} />
      <Marker position={center} icon={customMarker("location")} />
    </>
  );
}
export default Markers;

.red {
    filter: hue-rotate(150deg)
}

.deep-green {
    filter: hue-rotate(250deg)
}

.green {
    filter: hue-rotate(300deg)
}

.sky {
    filter: hue-rotate(335deg)
}

.purple {
    filter: hue-rotate(50deg)
}

.pink {
    filter: hue-rotate(100deg)
}

.brown {
    filter: hue-rotate(185deg)
}

.default-marker {
    /* マーカーの中心を調整 */
    margin-left: -12.5px !important;
    margin-top: -41px !important;
}

.marker {
    /* マーカーの中心を調整 */
    margin-top: -35px !important;
}