CODEWITHSUNDEEP
mapboxmapbox-glreact-map-gl
Shreyas Chorge
Shreyas Chorge

Reputation: 319

`react-map-gl` - Rendering thousands of poylgon on map using Source and Layer components

I have an API endpoint that returns around 10,000 Polygons each polygon is a Feature. I need to display all those polygons in a Map.

If I tweak the API to return all these polygons as a FeatureCollection and send this FeatureCollection as a data prop to Source Component, map does get rendered without any issues. But doing this restrict me from selecting and polygon and add different Layer styles (like: type="line") to that selected polygon.

Thus I need to loop through all the Features and look and send down a Feature as a data prop to Source Component. When I do this, browser crashes.

<MapGL
 ref={mapRef}
 {...mapState}
 {...viewport}
 onViewStateChange={_handleViewport}
 onClick={handleMapClick}
>
{plantLocations.map((pl, index) => (
  <Source key={`${pl.properties.id}-source`} type="geojson" 
     data={pl} 
     key={`${pl.properties.id}-source`}
     id={pl.properties.id}
    >                            // plantLocation is a Feature
    <Layer
      id={`${pl.properties.id}-layer`}
      type="fill"
      paint={{
      'fill-color': 'blue', 
      'fill-opacity': 0.6, 
       }}
    />
    {((selectedPl && selectedPl.id === pl.properties.id) ||
      (hoveredPl && hoveredPl.id === pl.properties.id)) && (
      <Layer
        key={`${pl.properties.id}-selected`}
        id={`${pl.properties.id}-selected-layer`}
        type="line"
        source={pl.properties.id}
        paint={{
          'line-color': '#007A49',
          'line-width': 4,
        }}
       />
     )}
  </Source>
))}
     // NavigationControl
</MapGL>

How can I fix this, So that I am able to click on a Layer and add additional styles and do operation on it?

Upvotes: 0

Views: 150

Answers (1)

Ethan
Ethan

Reputation: 398

You will need to render the polygons as FeatureCollection but add two separate Layers under the same Source component as you did -- one for the layer itself and another for highlighting.

You can apply the different stylings to the second layer and change values to the filter property to style only the polygons that satisfy certain conditions. For example:

const countiesLayer = {
  id: 'counties',
  type: 'fill',
  'source-layer': 'original',
  paint: {
    'fill-outline-color': 'rgba(0,0,0,0.1)',
    'fill-color': 'rgba(0,0,0,0.1)'
  }
};

const highlightLayer = {
  id: 'counties-highlighted',
  type: 'fill',
  source: 'counties',
  'source-layer': 'original',
  paint: {
    'fill-outline-color': '#484896',
    'fill-color': '#6e599f',
    'fill-opacity': 0.75
  }
};

const filter = ['in', 'COUNTY', selectedCounty], [selectedCounty];

<Source type="vector" url="mapbox://mapbox.82pkq93d">
 <Layer beforeId="waterway-label" {...countiesLayer} />
 <Layer beforeId="waterway-label" {...highlightLayer} filter={filter} />
</Source>

Please see the original demo and source code for reference.

Upvotes: 0

Related Questions