Geocoding & Store Locator, GetFood4Less Module

📍 Mapbox Store Locator

How it works

Mapbox Store Locator Integration

This feature allows users to quickly find nearby partner stores for pickup orders using Mapbox GL JS and the Mapbox Geocoding API.

It's the same SDK integration used in GetFood4Less to center the map on Saskatoon, display stores dynamically, and highlight searched postal codes or current location, without enabling delivery routes (pickup only at this stage).

Search or use your location

The user types an address or taps "Use My Location".

Mapbox Geocoding response

Mapbox returns normalized coordinates and context.

Camera + custom pin on the map

The globe smoothly flyTo the location with a gradient pin.

Technical Highlights

Key Features of This Module

🗺️

Mapbox GL JS + Geocoding API

Interactive map rendering with precise geocoding search.

📍

Custom Gradient DOM Pin

A custom-built DOM marker with soft glow + shadow blur.

🛰️

Native Geolocation API

Instant user location lookup using the browser API.

⚡

Smooth flyTo() Camera

Ultra-smooth animated transitions with easing.