Lemontree Boosts Map Performance with Symbol Layer Refactor

How Lemontree improved map performance with a small refactor

Lemontree, a nonprofit fighting food insecurity, recently refactored their map to improve performance. The refactor involved switching from markers to symbol layers, resulting in a 10x faster rendering speed.

Why This Matters

The original implementation of markers on Lemontree’s map led to poor performance, with the API call returning thousands of points and causing the device to lag. This was due to the fact that markers are rendered as individual DOM elements, which can lead to performance degradation as the count climbs. In contrast, symbol layers are rendered by the GPU as part of the map’s WebGL canvas, making them capable of displaying tens of thousands of points without breaking a sweat.

Key Insights

• Lemontree helped over a million people locate food pantries in 2025
• Symbol layers can handle thousands of points with ease, while markers can lead to performance degradation
• Mapbox GL JS provides a platform for extensible and accessible maps, allowing for targeted experiences

Working Examples

Old approach using markers

{/* Old approach: Render a DOM marker for each resource */}
{otherMarkersData?.features.map((feature) => (
<Marker
key={feature.properties.id}
latitude={feature.geometry.coordinates[1]}
longitude={feature.geometry.coordinates[0]}
>
<Image
src={purplePin}
alt="Resource"
width={20}
height={25}
style={{ cursor: 'pointer' }}
onClick={() => router.push(`/resources/${feature.properties.id}`)}
/>
</Marker>
))}

New approach using symbol layers

{/* New approach: Single GeoJSON source with symbol layer */}
<Source
id="other-resources"
type="geojson"
data={filteredOtherMarkersData}
promoteId="id"
>
<Layer
id="other-resources-layer"
type="symbol"
layout={{
'icon-image': 'purpleMarker',
'icon-allow-overlap': true,
}}
/>
</Source>

Practical Applications

• Lemontree uses Mapbox GL JS to display food pantry locations, allowing for a smooth user experience
• Organizations can use symbol layers to display large datasets on maps, improving performance and reducing lag

References:

• https://dev.to/mapbox/how-lemontree-improved-map-performance-with-a-small-refactor-2272