Shapes

import { Map, MapCircle, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithCircle() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapCircle center={TORONTO_COORDINATES} radius={200} />
        </Map>
    )
}

import {
    Map,
    MapCircleMarker,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithCircleMarker() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapCircleMarker center={TORONTO_COORDINATES} radius={60} />
        </Map>
    )
}

import { Map, MapPolyline, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithPolyline() {
    const POINTS = [
        [43.6532, -79.3832],
        [43.6545, -79.38],
    ] satisfies LatLngExpression[]

    return (
        <Map center={POINTS[0]}>
            <MapTileLayer />
            <MapPolyline positions={POINTS} />
        </Map>
    )
}

import { Map, MapPolygon, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithPolygon() {
    const BOUNDS = [
        [43.65, -79.387],
        [43.657, -79.38],
        [43.649, -79.379],
    ] satisfies LatLngExpression[]

    return (
        <Map center={BOUNDS[0]} zoom={14}>
            <MapTileLayer />
            <MapPolygon positions={BOUNDS} />
        </Map>
    )
}

import { Map, MapRectangle, MapTileLayer } from "@/components/ui/map"
import type { LatLngBoundsExpression } from "leaflet"

export function MapWithRectangle() {
    const BOUNDS = [
        [43.65, -79.387],
        [43.6565, -79.379],
    ] satisfies LatLngBoundsExpression

    return (
        <Map center={BOUNDS[0]} zoom={14}>
            <MapTileLayer />
            <MapRectangle bounds={BOUNDS} />
        </Map>
    )
}

import {
    Map,
    MapCircle,
    MapRectangle,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngBoundsExpression, LatLngExpression } from "leaflet"

export function MapWithStyledShapes() {
    const BOUNDS = [
        [43.65, -79.387],
        [43.6565, -79.379],
    ] satisfies LatLngBoundsExpression
    const CIRCLE_COORDINATES = [43.658, -79.388] satisfies LatLngExpression

    return (
        <Map center={BOUNDS[0]} zoom={14}>
            <MapTileLayer />
            <MapRectangle
                bounds={BOUNDS}
                className="fill-destructive stroke-destructive stroke-1"
            />
            <MapCircle
                center={CIRCLE_COORDINATES}
                radius={300}
                className="fill-yellow-600 stroke-yellow-600 stroke-1"
            />
        </Map>
    )
}