Thanks for your lib, the perf are really impressive.
I'm currently mixing "points" and other shapes on the same map
with

 <Map ....>
      <GeoJSON data={geometry} />
      <PixiOverlay markers={pointMarkers} />
</Map>

I'm hiting problems to handle/click popup to points on top of the GeoJSON between "layers".

• click on marker => popup
• click on polygon => draw the polygon in different style

For the moment only polygons are clickable (popup of pixi overlay markers don't shows up)

When removing GeoJSON then points are handled

The readme shows "point" markers. Can the marker bundles geojson ?
Or are you aware of fixes to handle clicks between the 2 layers ?

    {markersArray.map(markers => (
                       <PixiOverlay markers={markers} />
                ))}

Getting
Error: Cannot add resources while the loader is running.
The ideas is to have a dynamic number of overlays based on your selection on parent component.
Any thoughts?

Trying to reproduce the example, but getting this

My code:

<Map className="g-height-500" center={[53.904017, 27.551284]} zoom={11} scrollWheelZoom={false}>
				{!!data?.crimeEvents.length && (
					<HeatmapLayer
						fitBoundsOnLoad
						fitBoundsOnUpdate
						points={data.crimeEvents}
						radius={23}
						longitudeExtractor={(m: CrimeEvent) => m.lg}
						latitudeExtractor={(m: CrimeEvent) => m.lt}
						intensityExtractor={(m: CrimeEvent) => m.c}
					/>
				)}
				<TileLayer
					attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
					url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
				/>
					<PixiOverlay
						markers={[
							{
								id: 'randomStringOrNumber',
								iconColor: 'red',
								position: [-37.814, 144.96332],
								tooltip: 'Hey!',
							},
							{
								id: '2',
								iconColor: 'blue',
								position: [-37.814, 144.96332],
								popup: 'Quack!',
								popupOpen: true, // if popup has to be open by default
								tooltip: 'Nice!',
							},
						]}
					/>
			</Map>

Original leaflet-pixi-overlay has smooth markers movement when zooming in and out. How should I do same with react-leaflet-pixi-overlay?

I'm trying to reproduce this example:

https://manubb.github.io/Leaflet.PixiOverlay/us-cities.html

I'm trying to do the animated zoom on just simple svg circles. This is my first time using pixi overlay but I'm wondering how one could go about this in the react wrapper?

Hi, I'm trying to apply CustomIcon but don't know how.

Instead of <svg style=...></svg> I want to use /images/icons/computer2.svg which I have in my public folder.

When specifying custom leaflet icon, I can do this with:

const iconComputer = new L.Icon({
    iconUrl: `/images/icons/computer2.svg`,
    iconSize: [20, 20],
    iconAnchor: [10, 20],
  })

How can I apply this on pixi overlay?

const markers = [{
  position: [10, 10],
  id: 'someIDUniqueToMarker',
  iconId: 'someIDUniqueToIcon',  // used for cache
  customIcon: '<img src="/images/icons/computer2.svg" alt="My Computer">',
}],

Hi! I cloned the project and managed to run it locally. I noticed there is some space for improvements on the file structure in general:

1. react-dom depencency

react-dom is missing dev dependency. It results in a following error: Module not found: Error: Can't resolve 'react-dom' in '/Users/michal/Projects/react-leaflet-pixi-overlay/node_modules/react-leaflet/es'

2. Contribution and local setup guidelines
The best way to test a clonned react-leaflet-pixi-overlay before commiting any change is to import it and use on a local react project. It can be done with help of yarn link functionality. All peer dependencies must be linked:

cd YOUR_CLONNED_REACT_LEAFLET_PIXI_OVERLAY_FORK
yarn link
yarn install
cd node_modules/react
yarn link
cd ../react-dom
yarn link
cd ../leaflet
yarn link
cd ../react-leaflet
yarn link

cd YOUR_REACT_PROJECT
yarn link react-leaflet-pixi-overlay
yarn link react
yarn link react-dom

This can be added to a readme file to make contribution easier for people.

**3. Ignoring **
Build directory does not have to be included in a codebase. It can be added to .gitignore.
The opposite for npm. When publishing a package, src directory and some other files unnecessarily extends the size of a npm package. It can be handled by adding new .npmignore file.

4. NPM vs Yarn
There is both package-lock.json and yarn.lock file on a project. It's a good practice to use only one package manager. Otherwise it might cause issues with dependencies versioning when people contribute. It might be worth to consider removing one of lock files.

Please say what do you think about these improvements, then i can prepare a PR - i already applied some of these points locally :)

The problem is that the tooltip you provide to be displayed, is being displayed inside a leaflet popup.(The displayed UI is the same for a popup and a tooltip)

  const markers = [
    {
      id: "randomStringOrNumber",
      iconColor: "red",
      position: [-37.814, 144.96332],
      popup: renderToString(<div>All good!</div>),
      onClick: () => alert("marker clicked"),
      tooltip: "Hey!",
    }

So in the markers example provided here both "All good!" and "Hey!" are displayed with the same UI.(Not using leaflet tooltip, only using leaflet popup).

HI,
I am trying to use a react element as a customIcon but it is not being displayed on the map.
I was wondering if react-leaflet-pixi-overlay supports this or not!!???
i wrapped the component inside renderToString and tried as well but it shows nothing at that position.
WIth normally passing iconColor, position and id then the marker icon is visible though.

Sharing array of the markers that i have tried so far.

const markers = [
{
id: "1",
iconColor: "red",
position: [-37.814, 143.96332],
// popup: renderToString(

only the marker with id 3 is visible in the map.

inside the component i passed it like this.

Please provide your inputs on this.

My setup:
react: 17.0.2
react-leaflet: 3.2.5
react-leaflet-pixi-overlay: 3.0.0
Browser: firefox

  const markers = data.map(item=> ({
    id: item._id,
    iconColor: "red",
    position: [item.latitude, item.longitude],
    popup: "Test",
    onClick: () => {
     
    },
    tooltip: renderToString(<ItemComponent item={item}/>),
  }))

When i am hovering over marker data the tooltip is correctly displayed. When i click on the marker nothing happens. (I would expect to see popup).

I'm getting _reactLeaflet.useLeaflet is not a function when using <PixiOverlay markers={markers} />

I notice that the example uses rather than so I am assuming the error I'm seeing is a react-leaflet 2.x vs 3.x issue but I've also seen some comments from people using this library with 3.x (apparently? )

Many thanks!

Hi,

I can't get this plugin to work when built for production.

It works perfectly locally running on a dev server but when built for production using react-scripts 'build' nothing is rendered. I've done quite a lot of digging through the source of this but cannot seem to work out what could be wrong.

Any pointers would be much appreciated.

Thanks

This lib is not being compiled to es5 when published to npm, some folder restructure should do the work.

not working with aplications with jest, for unit testing and es5 browser and aplications
and has no types

the objective is to not change any funcionality, but fix thsi structural changes, without any breaking change
add prettier and eslint for sync changes to the project and keep same format

When using customIcon, the potion is not correct and when you zoom in/out the map the position changes.

When I use a default icon with pixi

When I use a custom icon with pixi

But the same lat/long shows here when drawn directly ask leaflet marker not Pixi stuff.

The same points are drawn using normal marker and circle. You can see the pixi webgl filled circles are off.

Any thoughts? is it the offset?

Touch events are not supported, onClick does not works on mobile browsers.

On developer toolbar from Firefox or Chrome on desktop also doesn't works

Hi there, it seems I can only use svg format icon as custom icon.
How can I use png format instead?
Thanks!

I'm doing something like this:

<LayersControl.Overlay checked name="Test layer">
      <LayerGroup>
        <PixiOverlay markers={getMarkers()} />
      </LayerGroup>
</LayersControl.Overlay>

The markers don't disappear regardless of layer control state.

Hello, I'm João Victor, and I'm trying to use this lib to add geojsons to my map, but I'm not succeeding. In the documentation, there is no specifying how to do it. Could you help me?