Leaflet Map

Leaflet is a lightweight and easy-to-use JavaScript library that allows you to create mobile-friendly and interactive maps. Leaflet supports many types of map layers, such as tile, vector, image, and geoJSON. Leaflet also provides many plugins and extensions that add more features and functionalities to your maps, such as clustering, geocoding, routing, and drawing.

You can find the Leaflet map components in the src/views/LeafletMaps.jsx file.

Examples

Voyager

Voyager Map provides an interactive and customizable mapping solution for displaying geographic data with ease and flexibility. Leaflet Map Preview

Preview

Result

Code

Voyager

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import Card from "@/components/Card/Card";
import { CardBody } from "react-bootstrap";

const MyComponent = () => {
    const position = [51.505, -0.09];

    return (
        <Card title="Voyager">
            <CardBody>
                <MapContainer
                    style={{ width: "100%", height: "400px" }}
                    center={position}
                    zoom={16}
                    scrollWheelZoom={false}
                >
                    <TileLayer
                        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
                        url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
                    />
                    <Marker position={position} >
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </MapContainer>
            </CardBody>
        </Card>
    );
};

export default MyComponent;

Street Map Street Map provides a convenient and customizable solution for incorporating

street-level maps into React applications, facilitating location-based functionalities. Leaflet Map Preview

Preview

Result

Code

Street Map

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import Card from "@/components/Card/Card";
import { CardBody } from "react-bootstrap";

const MyComponent = () => {
    const position = [51.505, -0.09];

    return (
        <Card title="Street Map">
            <CardBody>
                <MapContainer
                    style={{ width: "100%", height: "400px" }}
                    center={position}
                    zoom={16}
                    scrollWheelZoom={false}
                >
                    <TileLayer
                        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <Marker position={position} >
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </MapContainer>
            </CardBody>
        </Card>
    );
};

export default MyComponent;

World Imagery World Imagery Map offers a comprehensive and visually stunning

solution for integrating high-resolution satellite imagery maps into React applications for global mapping needs. Leaflet Map Preview

Preview

Result

Code

World Imagery

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import Card from "@/components/Card/Card";
import { CardBody } from "react-bootstrap";

const MyComponent = () => {
    const position = [51.505, -0.09];

    return (
        <Card title="World Imagery">
            <CardBody>
                <MapContainer
                    style={{ width: "100%", height: "400px" }}
                    center={position}
                    zoom={16}
                    scrollWheelZoom={false}
                >
                    <TileLayer
                        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
                        url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                    />
                    <Marker position={position} >
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </MapContainer>
            </CardBody>
        </Card>
    );
};

export default MyComponent;

Dark Matter Dark Matter Map provides a sleek and modern solution for integrating

dark-themed maps into React applications, ideal for various visualization needs. Leaflet Map Preview

Preview

Result

Code

Dark Matter

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import Card from "@/components/Card/Card";
import { CardBody } from "react-bootstrap";

const MyComponent = () => {
    const position = [51.505, -0.09];

    return (
        <Card title="Dark Matter">
            <CardBody>
                <MapContainer
                    style={{ width: "100%", height: "400px" }}
                    center={position}
                    zoom={16}
                    scrollWheelZoom={false}
                >
                    <TileLayer
                        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
                        url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
                    />
                    <Marker position={position} >
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </MapContainer>
            </CardBody>
        </Card>
    );
};

export default MyComponent;

You have need more example please visit React Leaflet