Pickup Point Map Widget Integration

Pickup Point Map Widget Integration

Pickup point selection widget on map is mandatory element of order checkout for online stores offering self-pickup. Customer sees all available points on map, can filter by type (postamate/PVZ), working hours, distance from current location.

Data Sources for PVZ

Pickup points come from multiple sources:

• SDEK API — GET /v2/deliverypoints?city_code={id}&type=PVZ
• DHL, BoxBerry, 5Post — each provider's own API
• Yandex.Delivery — endpoint for getting PVZ list
• Store's own points — stored in DB

Aggregation: all points combined into single format and stored in pickup_points table. Update — scheduled job every 6–12 hours.

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
)

Map: Yandex.Maps vs Google Maps vs Leaflet

Yandex.Maps JS API 3.0 — best for Russian users, more accurate address detection. Free limit 1000 requests/day, then paid.

Leaflet + OpenStreetMap — free, unlimited, worse geocoding in RF. Good for corporate sites with small traffic.

Google Maps — high cost for RF, some features limited.

Clustering Implementation

With 2000+ points map gets slow. Clustering needed.

// Yandex.Maps
import { Clusterer } from '@yandex/ymaps3-clusterer';

const clusterer = new Clusterer({
    clusterize: (coordinates, zoom) => {
        return zoom < 12;
    }
});

For Leaflet — leaflet.markercluster plugin.

Filters and Search

UI filters:

• Type: postamate / PVZ with staff
• Working hours: open now / 24h
• Services: fitting room / card payment / COD
• Max parcel weight

Search by address — geocoding — input address, get coordinates, map centers, nearest points highlighted.

Data to Order

After point selection form saves:

{
    "pickup_type": "pvz",
    "pickup_point_id": 1234,
    "pickup_provider": "cdek",
    "pickup_external_id": "MSK001",
    "pickup_address": "Moscow, Arbat St, 5"
}

Sent to delivery API when creating shipment.

Mobile Adaptation

On mobile, map competes with page scrolling. Solution: "expand map" button → map opens fullscreen via CSS position: fixed. Or — bottom sheet with map over content.

User City Detection

Map centers on city determined via:

1. IP geolocation (api.sypexgeo.net or ipgeolocation.io)
2. Browser geolocation (user permission)
3. Previous order address (for authorized users)

Development timeline: 3–5 working days for widget with multi-provider aggregation, clustering, and filters.