Geo Queries with PostGIS in Ionic Angular

Summary

This tutorial shows how to build an Ionic Angular cross-platform app that stores and queries store locations with Supabase and PostGIS. It enables PostGIS, defines a stores table with a geography(POINT) location, adds a GiST spatial index, creates storage policies, and seeds example coordinates. SQL functions named nearby_stores and stores_in_view calculate distances or select stores inside a coordinate box, while Ionic uses Capacitor Google Maps and geolocation to display markers and query nearby data. The app also uploads store images to Supabase Storage, retrieves them with a 300-pixel contain transformation, and opens store details in an Ionic bottom-sheet modal after marker selection. The completed code is provided on GitHub and requires project and Google Maps credentials plus the included SQL.

Takeaways

1. 1

   The stores table uses a geography(POINT) location column, and a GiST index is created on that column for more performant geographic queries.

2. 2

   The nearby_stores function returns stores with distances in meters and orders them using the location-distance operator; stores_in_view filters locations within a coordinate box.

3. 3

   Supabase Storage serves store images through getPublicUrl with a 300-pixel contain transformation, and marker selection loads the store details into an Ionic bottom-sheet modal.