Skip to content

Instantly share code, notes, and snippets.

@unclebay143
Created December 19, 2022 15:47
Show Gist options
  • Save unclebay143/581000d19a1a80c161ed9dae1583cb25 to your computer and use it in GitHub Desktop.
Save unclebay143/581000d19a1a80c161ed9dae1583cb25 to your computer and use it in GitHub Desktop.
Building Maps in React with react-leaflet Library
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>
);
};
@unclebay143
Copy link
Author

unclebay143 commented Dec 19, 2022

Building Maps in React with react-leaflet Library by Unclebigbay

React-Leaflet

Demo

React-Leaflet with custom marker

React-Leaflet with custom Marker

image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment