Pickup Point Selection Widget: Aggregation, Clustering, Filters

Pickup Point Selection Widget Integration

A customer adds items to the cart, proceeds to checkout — and gets stuck choosing a pickup point. The map loads slowly, markers overlap, and it's unclear where the nearest parcel locker is. Such behavior can eat up to 20% conversion at the self-pickup stage. Our task is to combine data from CDEK, BoxBerry, DHL, 5Post, and Yandex Delivery into a single widget that runs smoothly even with 5000+ points. With 5+ years in e-commerce integrations and over 50 successful projects, we bring proven expertise to deliver a guaranteed performance boost.

We design a PostgreSQL schema with geo indexes, configure grouping for speed, and adapt the interface for mobile screens. The result: the user finds a suitable collection point in 10–15 seconds, and the store gains +5–10% conversion at the self-pickup stage. Our user city detection works via IP geolocation, enabling immediate display of points in their region.

Problems We Solve

• Data fragmentation: each delivery service provides points in its own format. We need to unify and update them on a schedule.
• Performance with many markers: without grouping, the browser freezes with as few as 1000 points.
• Mobile adaptation: the map on a small screen competes with scrolling.
• Geocoding accuracy: not all services work correctly in Russia, especially for regional addresses.

How to Aggregate Data from Multiple Delivery Services

Each provider offers an API to get a list of pickup points. For CDEK, it's GET /v2/deliverypoints?city_code={id}&type=PVZ; for BoxBerry, a custom endpoint with authorization. We create integration modules for each source and map fields to a unified schema:

pickup_points ( id, provider, external_id, name, address, city_id, lat, lng, working_hours (jsonb), max_weight, max_dimensions (jsonb), has_fitting_room, has_cash, has_card, is_active, updated_at ) 

Data updates run via Cron scheduled jobs every 6–12 hours. If one provider goes down, points are kept from the last successful snapshot. According to Yandex Maps recommendations, clustering is available from version 3.0 and allows grouping markers at zoom below 12.

Comparison of Map Services

We choose Yandex Maps for Russian online stores with traffic up to 300,000 visitors per month — optimal quality and budget. Leaflet with OSM is 2x slower in geocoding precision than Yandex Maps for regional Russian addresses, so we recommend Leaflet only for corporate portals with low load. We do not recommend Google Maps due to legal and financial risks.

Comparison of Pickup Point Data Update Approaches

We recommend combining pull requests with manual import for emergency updates.

Why Clustering Is Critical for Large Numbers of Pickup Points

If the map has 2000+ markers, the browser starts lagging — FPS drops to 5–10. The user can neither select a point nor zoom in. The solution is grouping markers at zoom below 12. For Yandex Maps, we use Clusterer:

import { Clusterer } from '@yandex/ymaps3-clusterer'; const clusterer = new Clusterer({ clusterize: (coordinates, zoom) => zoom < 12 }); 

For Leaflet, we use the leaflet.markercluster plugin with similar logic. Result: even with 10,000 points, the map runs smoothly. Clustering improves FPS by 10x compared to displaying all markers.

Filters and Search

Filter pickup points by type (parcel locker or staffed), working hours (open now, 24 hours), additional services (fitting room, card payment), and maximum parcel weight (slider from 1 to 30 kg with increments of 0.5 kg). Search by address is implemented via geocoding — enter an address, get coordinates, map centers, and highlights nearby points. For Yandex, we use ymaps.geocode; for Leaflet, Nominatim (OSM).

Mobile Adaptation

On mobile devices, the map often competes with page scrolling. Solution: a "expand map" button — the map opens in full screen via CSS position: fixed. Alternatively, a separate bottom sheet with the map overlaid on content. Additionally, we add a sticky search bar and a "near me" button using browser geolocation.

What Is Included in the Work

• Data architecture: design and normalization of the pickup_points table for PostgreSQL (with indices on lat/lng for fast geospatial queries).
• Integration of providers (CDEK, BoxBerry, DHL, 5Post, Yandex Delivery, own points).
• Map integration (Yandex Maps or Leaflet) with clustering, filters, and geocoding.
• Mobile adaptation (fullscreen/bottom sheet).
• Order data transfer (JSON schema for API).
• Documentation (API spec, DB schema, pickup point update instructions) and user manual with screenshots.
• Training for staff on managing pickup point data.
• One month of support after launch (bug fixes, consultations).

Work Process

1. Analysis — study requirements, provider list, expected number of points.
2. Design — create DB schema, API contracts, interface prototype.
3. Implementation — write integration modules, map widget, backend aggregator.
4. Testing — check with 5000+ mock points, measure Core Web Vitals (LCP < 2.5s, CLS < 0.1).
5. Deployment — deploy on production server (Docker + Nginx + PostgreSQL), configure monitoring.

Timelines and Cost

The estimated development time for a widget aggregating 3–5 providers, with clustering and filters, is from 3 to 8 working days. The exact cost is calculated individually, but typical projects range from $500 to $1500 depending on complexity. Our clients report a 15% increase in conversion after implementing the widget. Contact us for a consultation — we will evaluate your project and offer the optimal solution.

Order widget integration — get a ready-made solution for your online store. Guaranteed performance with our certified integration specialists.