Maps Configuration

Overview

OneStock uses Google Maps in both the Store App and the Back Office to display available endpoints. This functionality assists vendors and customer service teams in selecting the most appropriate endpoint for each client usecase.

Pages Where the Map Is Displayed :

[Store App] Order in store - Product page
[Store App] Order in store - Basket (click & collect / relay point selection)
[Back Office] Order detail - Return creation (endpoint selection)
[Back Office] Order detail - Change click & collect point
[Back Office] Order detail - Change relay point

Default Map Behavior

The behavior of the map and the associated endpoint list is consistent, regardless of whether the Delivery Promise is activated.

Center point Logic

The default center of the map varies based on the page and the context, in order to best suit the user’s need:

Page/Context	Default Map Center

Page/Context	Default Map Center
[SA] Product page	Connected endpoint
[SA] Basket (Click & Collect / Relay)	Customer's address
[BO] Return	Immediate pickup only → Endpoint of the orde Otherwise → Customer’s address
[BO] Change Click & Collect Point	Originally selected endpoint
[BO] Change Relay Point	Originally selected relay point

The MAP center point is not configurable.

To ensure your endpoints to be visibles on the MAP, make sure that the GPS coordinates are the good ones. If not they may not be displayed.

Zoom Level

All maps use the same default zoom: 10 kilometers around the center point.

While Google Maps doesn't natively support zoom in kilometers, a conversion is applied using the following formula:

function kmToZoom(km: number, lat: number, height: number) {
    return Math.floor(Math.log2((156543.03392 * Math.cos((lat * Math.PI) / 180) * height) / km))
}

The Zoom is configurable (see section bellow).

Endpoint List Behavior

The endpoint list appears next to the map and shows endpoints based on the current request.

Pagination

On first load: 10 endpoints (closest to map center)
On each reload: +10 endpoints
Maximum total: 500 endpoints

Default Endpoint Requests

Page	Default Request

Page	Default Request
Product page	`product_endpoints`
Basket	`basket_shipping_options_endpoints`
Return	TBC
Change CKC point	TBC
Change Relay point	TBC

The endpoint list behavior is configurable (see section bellow).

Using the search bar and searching a new address will reload the endpoint center on the new address.

Manual Map Interactions

For relay point Map, we depend on integration of carriers, the behavior may differ comparing on what is described bellow

When manually moving the map to view another area, a “Reload query” button appears. Clicking it restarts the endpoint request using the new map center and resets pagination to 0.
Simply scrolling the map without reloading will continue loading endpoints based on the original center and previously loaded results.

The manual behavior is not configurable.

Map Configuration

Configuration key

Main key : store_app.order_in_store_options.maps

Store App Map Configuration

Accessible in:
Configuration > Store App > Page Settings > Catalog > Specific settings

You can configure:

Product page map → route maps.product
Click & Collect map → route maps.ckc_delivery
Relay point map → route maps.relay_point_delivery

maps: {
  product: 
      request_name: string; // endpoint request. Default value is TBC
      zoom: number; // zoom around the center (in km). Default value is 10
      limit: number; // number of endpoint to load on first loading. Defaut value is 10. It cannot be configured under 10.
     
  ckc_delivery: EndpointMap;
      request_name: string;
      zoom: number;
      limit: number; 
    
  relay_point_delivery:
       zoom: number;
};

Distance criteria were removed, as this is already managed by the endpoint request logic.

store_app.order_in_store_options
	maps: {
		product: {
        	zoom: 20,
            limit: 10,
            request_name : "product_endpoints"
		},
		ckc_delivery: {
        	zoom: 50
            limit: 20,
            request_name : "basket_shipping_options_endpoints"
        },
        relay_point_delivery: {
            zoom: 15
        }
    }

Back Office Configuration

Available under:
Configuration > Back Office > Orders > Order Maps

There are 3 sections, one for each map available in the back office : modification of click&collect point, modification of relay point, creation of return.

Default configuration are :

zoom : 10
limit : 10

Custom conficguration can be :

{
  "zoom": 100,
  "limit": 15
}

Special usecases

The endpoint can be unavailable on the map. Verify that the GPS coordinates are goods.
Order in store - No endpoint available. Verify that the client have a good written address