Building Maps in React with react-leaflet Library

Map.jsx

import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import { Icon } from "leaflet";

export const Map = () => {
  const position = [8.1386, 5.1026];
  const zoomLevel = 15;

  const swimmingSpot = new Icon({
    iconUrl: "/images/computer-solid.svg",
    iconSize: [30, 125],
    iconAnchor: [40, 90],
    popupAnchor: [-25, -40],
  });

  return (
    <MapContainer zoom={zoomLevel} center={position} scrollWheelZoom={true}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
      <Marker position={position} icon={swimmingSpot}>
        <Popup>24 hours coding area 👨‍💻 </Popup>
      </Marker>
    </MapContainer>
  );
};

Building Maps in React with react-leaflet Library by Unclebigbay

React-Leaflet

Demo

React-Leaflet with custom Marker

Resources:
Link to Custom icon (computer SVG): https://fontawesome.com/icons/computer?s=solid&f=classic