Skip to content

Latest commit

 

History

History
227 lines (177 loc) · 6.24 KB

File metadata and controls

227 lines (177 loc) · 6.24 KB

Geolocation Accuracy Information

Why "Get My Location" Shows Wrong Location on Localhost

The Problem

When you click "Get My Location" on localhost/HTTP, the browser shows Bhopal instead of your actual location Satna because:

  1. HTTP uses IP-based geolocation (not GPS)
  2. IP geolocation returns your ISP's location, not your device location
  3. Bhopal is likely your ISP hub or data center location
  4. Accuracy can be off by 50-200+ kilometers

HTTP vs HTTPS Geolocation

Environment Method Accuracy GPS Used?
Localhost (HTTP) IP-based ±50-200 km ❌ No
Production (HTTPS) GPS-based ±5-10 meters ✅ Yes

Why This Happens

HTTP Request → Browser Geolocation API → Uses IP address
                                       → Queries IP database
                                       → Returns ISP location (Bhopal)
                                       → NOT your device GPS
HTTPS Request → Browser Geolocation API → Uses Device GPS
                                        → Queries GPS satellites
                                        → Returns precise location (Satna)
                                        → Accurate to 5-10 meters

Solution: Use Search Box Feature

NEW FEATURE: Location Search

We've added a search box to help you find your exact location manually:

How to Use:

  1. Open the "Set Shop Location" modal
  2. Type your city in the search box: Satna, Madhya Pradesh
  3. Click the 🔍 Search button
  4. Select your city from the results
  5. The map will fly to your location automatically
  6. Drag the marker to fine-tune the exact position
  7. Click "Save Location"

Three Ways to Set Location

1. 🔍 Search Box (Recommended on Localhost)

  • Best for: Testing on localhost/HTTP
  • Accuracy: Very high (uses OpenStreetMap data)
  • Steps:
    Type "Satna, Madhya Pradesh" → Click Search → Select result
    → Drag marker to your shop → Save
    

2. 📍 Get My Location (Best for Production)

  • Best for: HTTPS websites on mobile devices
  • Accuracy: GPS-based (5-10 meters)
  • Requirements: HTTPS + device GPS permission
  • Note: Won't work accurately on localhost

3. 🖱️ Click on Map (Manual)

  • Best for: When you know the exact location visually
  • Accuracy: Depends on zoom level
  • Steps:
    Zoom in to your area → Click on your shop location
    → Drag marker to adjust → Save
    

Search Box Technical Details

Geocoding API: Nominatim (OpenStreetMap)

  • Provider: OpenStreetMap (100% free, no API key)
  • Endpoint: https://nominatim.openstreetmap.org/search
  • Coverage: Worldwide (India fully covered)
  • Accuracy: City/street level

Search Query Format

// Example: Searching for "Satna"
https://nominatim.openstreetmap.org/search?
  q=Satna,Madhya+Pradesh
  &format=json
  &limit=5
  &countrycodes=in
  &addressdetails=1

Search Results Example

When you search "Satna", you'll see:

  • Satna, Madhya Pradesh, India
  • Satna Railway Station, Satna, MP
  • Satna District, MP
  • Satna Bus Stand, Satna, MP
  • Civil Lines, Satna, MP

Click any result, and the map flies to that location!


For Production Deployment

Enable GPS-based Geolocation

To get accurate GPS positioning in production:

  1. Deploy on HTTPS (required for GPS access)

    https://yourdomain.com/smart-tailoring/
    
  2. Browser will request GPS permission

    "yourdomain.com wants to know your location"
    [Block] [Allow]
    
  3. GPS accuracy on HTTPS:

    • Desktop: 10-50 meters (WiFi + IP)
    • Mobile: 5-10 meters (GPS + WiFi)
    • With good GPS signal: 3-5 meters

Recommended Setup for Tailors

  1. On localhost: Use search box to find your city
  2. Zoom in to your shop location on the map
  3. Click or drag marker to exact position
  4. Save location
  5. On production (HTTPS): GPS will work accurately

Testing the New Search Feature

Test Search Queries

Try these searches to test the feature:

  1. City-level:

    • Satna
    • Satna, Madhya Pradesh
    • Satna, MP, India
  2. Area-level:

    • Civil Lines, Satna
    • Railway Station, Satna
    • Rewa Road, Satna
  3. Landmark-based:

    • Satna Bus Stand
    • Satna Railway Station
    • Satna Collectorate

Expected Behavior

  1. Type query → Click search
  2. See 5 results from OpenStreetMap
  3. Click a result
  4. Map flies to location (2-second animation)
  5. Marker appears (draggable)
  6. Adjust position by dragging
  7. Click "Save Location"

Troubleshooting

Search Not Working?

  • Check internet connection (needs to reach nominatim.openstreetmap.org)
  • Try different query format: "City, State" works best
  • Clear search box and try again

Still Shows Wrong Location?

  • Ignore "Get My Location" on localhost (always inaccurate)
  • Use search box instead
  • Manually zoom to your area and click on map

Location Not Saving?

  1. Check if 002_add_tailor_location.sql migration is executed
  2. Check browser console for errors (F12)
  3. Verify you're logged in as a tailor
  4. Check save_location.php API response

Summary

Issue Cause Solution
Wrong city on localhost HTTP uses IP location Use search box
Need exact shop location Geolocation not precise enough Drag marker to adjust
GPS not working HTTP doesn't allow GPS Deploy on HTTPS or use search
Can't find my area Need manual search Type city in search box

Quick Fix for Satna Location

  1. Click "Set Shop Location"
  2. Type: Satna, Madhya Pradesh
  3. Click Search 🔍
  4. Select first result
  5. Zoom in and drag marker to your shop
  6. Click "Save Location" ✅

Future Improvements (Optional)

Preset City Buttons (Coming Soon)

We can add quick city buttons:

[Delhi] [Mumbai] [Satna] [Bangalore] [Kolkata]

Click → Map jumps to that city instantly

Current Location Accuracy Indicator

Show accuracy level:

  • 🟢 Green: GPS (5-10m)
  • 🟡 Yellow: WiFi (50-100m)
  • 🔴 Red: IP (50-200km)

The search box feature is now live! Try searching for "Satna, Madhya Pradesh" and see how it works.