0

I am using React PixiOverlay wrapper (https://github.com/knapcio/react-leaflet-pixi-overlay) which has the nice ability to draw markers at scale on a leaflet map.

While this provides me with a really nice way to draw hundreds of thousands of markers efficiently, I do not know how to programmatically select these markers. I want to be able to draw a shape on the map and select the markers within that geometry. I have the ability to draw the shape, but I don't know how to search and select for the markers inside.

Any help would be very much appreciated.

EDIT: For those wondering how the initial rendering is done, there are an array of markers that are passed, which PixiOverlay reads and the renders. The color, marker type, coordinates, etc are all passed in this array.

import PixiOverlay from 'react-leaflet-pixi-overlay';
import { Map } from 'react-leaflet';
import { renderToString } from 'react-dom/server';

const App = () => {

    const markers = [{
            id: 'randomStringOrNumber',
            iconColor: 'red',
            position: [-37.814, 144.96332],
            popup: renderToString(
              <div>All good!</div>
            ),
            onClick: () => alert('marker clicked'),
            tooltip: 'Hey!',
        },
        {
            id: '2',
            iconColor: 'blue',
            position: [-37.814, 144.96332],
            popup: 'Quack!',
            popupOpen: true, // if popup has to be open by default
            onClick: () => alert('marker clicked'),
            tooltip: 'Nice!',
        }
    ];

    return {
        <Map
            preferCanvas={true}
            maxZoom={20}
            minZoom={3}
            center={[-37.814, 144.96332]}
            // Other map props...
        >
            <TileLayer
                url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            />
            <PixiOverlay markers={markers} />
        </Map>
    };

}

somethingstrang
  • 1,079
  • 2
  • 14
  • 29
  • What have you tried? Assuming you have an array of markers somewhere in state, each with their `latlng`, you can [check if each point is within a given polygon](https://stackoverflow.com/questions/31790344/determine-if-a-point-reside-inside-a-leaflet-polygon). With a lot of markers, this could get CPU heavy. – Seth Lutske Mar 02 '21 at 22:50
  • I have an array of markers in state, but I can also search through the database instead and get their IDs. The problem is, once I have the ID, I don't have an idea of how to extract the elements within Pixioverlay to update their color. I think this is because Pixioverlay doesn't change the dom? I don't want to re-render the whole thing either... – somethingstrang Mar 03 '21 at 18:42
  • So that's sort of a separate issue. The ability to select pixioverlay markers inside a given shape is one thing, the ability to then color the icons of markers in the polygon a different color is another issue. How are you assigning icon colors *now*? Is that done on the front end, or is that on the database? You could have more than 1 PixiOverlay component, with each PixiOverlay assigning a different color to its markers icons based on whether or not they fall in the polygon – Seth Lutske Mar 03 '21 at 19:08
  • The rendering of the colors is passed as a parameter within the array of markers (see main edit above). All the proper of all the markers are pre-determined, which then Pixioverlay somehow reads and renders. There doesn't seem to be an obvious way to select and modify the markers after the render (at least to me). I hope that clarify things. Again, what I can do is draw the boundary and then use that to search the database to return a subset of markers that would exist within the boundary. – somethingstrang Mar 04 '21 at 04:40
  • What I would do is filter the markers coming back from the database based on whether or not they are within the drawn polygon. So rather than feeding the markers array directly to the PixiOverlay, you can maintain state variables like `markersInPolygon` and `markersNotInPolygon`. On shape draw end, detect which markers are within the polyon, and set those state variables to contain the correct marker entries. Then you can change the icon color of all the markers `markersInPolygon`, and render them in a separate `PixiOverlay` than the `markersNotInPolygon` – Seth Lutske Mar 04 '21 at 05:23
  • Gotcha, so you would actually just have two layers - one with markers in polygon, and one without. Whenever the state changes for what's in or not in the polygon, you just re-render both layers? – somethingstrang Mar 04 '21 at 16:00

0 Answers0