Prevent Vector Layer to automatic scale

[rimzzlabs]

Bug report in v4

• [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Using the latest version of React and ReactDOM v18.
• [x] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [x] Using the latest v4 version of React-Leaflet.
• [x] The issue has not already been reported.
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

Vector Layer radius should not scale when zooming in or zooming out

Actual behavior

Vector Layer radius scale when zooming in or zooming out, I'm afraid the radius should not scaled, as it is showing how wide the area has affected

Steps to reproduce

• fork this repo https://github.com/rizkimcitra/njir to codesandbox / stackblitz
• run

[rimzzlabs]

this is just a small app for test assignment at my college, I know forking a repository is a bit complicated, so here's a demo video

https://github.com/PaulLeCam/react-leaflet/assets/62492410/edee1f8e-790f-46d5-a72b-39dd20146c2e

[rimzzlabs]

Update

I decided to put code snippet instead here

Here's my GIS component

import { useGis } from '@/hooks/use-gis'

import { GisAreaItem } from './gis-area-item'

import type { LatLngExpression } from 'leaflet'
import { Loader2Icon } from 'lucide-react'
import { MapContainer, TileLayer } from 'react-leaflet'

export function Gis() {
  const query = useGis()

  const centerMap = [-6.118547, 106.153355] as LatLngExpression

  if (query.status === 'pending') {
    return (
      <div className='py-4'>
        <div className='flex flex-col items-center justify-center gap-2 w-full h-96 md:h-[30rem] aspect-square md:aspect-video rounded-md overflow-hidden bg-gray-100'>
          <Loader2Icon size='4rem' className='animate-spin' />
          <p className='text-sm'>Memuat Data</p>
        </div>
      </div>
    )
  }

  if (query.status === 'error') {
    return <p className='text-center py-4'>Terjadi error ketika memuat data</p>
  }

  return (
    <section className='py-4'>
      <div className='rounded-md overflow-hidden'>
        <MapContainer
          zoom={13}
          center={centerMap}
          scrollWheelZoom={false}
          className='w-full h-96 md:h-[30rem] '
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          />

          {query.data.map((item, i) => (
            <GisAreaItem {...item} key={item.location + i} />
          ))}
        </MapContainer>
      </div>
    </section>
  )
}

And here's my vector layer component

import { useGisDialog } from '@/hooks/use-gis-dialog'

import { TCoordinateItem } from '@/~types'

import type { LatLngExpression } from 'leaflet'
import { CircleMarker } from 'react-leaflet'

function getColor(level: TCoordinateItem['level']) {
  switch (level) {
    case 'high':
      return 'red'
    case 'medium':
      return 'orange'
    default:
      return 'yellow'
  }
}

export function GisAreaItem(props: TCoordinateItem) {
  const openGis = useGisDialog((store) => store.openDialog)

  const color = getColor(props.level)

  function onClickLayer() {
    openGis(props)
  }

  return (
    <CircleMarker
      eventHandlers={{
        click: onClickLayer,
      }}
      center={props.coordinates as LatLngExpression}
      pathOptions={{ color }}
      radius={props.radius}
    />
  )
}

[rimzzlabs]

I am so embarrassed right now, I'll close this issue

In case anyone do this in the future Solution:

1. Check the documentation site again
2. Make sure to use <Circle /> and not <CircleMarker />

Have a great day everyone