---
title: "Geo Queries with PostGIS in Ionic Angular"
description: "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."
---

# Geo Queries with PostGIS in Ionic Angular

[Supabase](https://yomu.fyi/company/supabase) · simon\_grimm · Mar 1, 2023

**Type:** Tutorial

## 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.

## Context

The tutorial addresses storing latitude and longitude data and querying distances or geographic areas for an application. It states that directly storing coordinates and querying them is not very effective or scalable, motivating the use of PostGIS data types and spatial indexes.

## Approach / What changed

Enable the PostGIS extension in Supabase, create a stores table with a geography(POINT) column and GiST index, and define nearby\_stores and stores\_in\_view database functions. Build the client with Ionic Angular, Capacitor Google Maps and geolocation, Supabase Storage, native location permissions, and marker-driven store detail loading with image transformations.

## Takeaways

- The stores table uses a geography(POINT) location column, and a GiST index is created on that column for more performant geographic queries.
- 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.
- 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.

**Tags:** [Android](https://yomu.fyi/topic/android), [iOS](https://yomu.fyi/topic/ios), [Performance](https://yomu.fyi/topic/performance), [Postgres](https://yomu.fyi/topic/postgres), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Supabase](https://supabase.com/blog/geo-queries-with-postgis-in-ionic-angular)
- Source URL: https://supabase.com/blog/geo-queries-with-postgis-in-ionic-angular
- Ingested by Yomu: 2026-08-29T01:16:39.431Z

[Read original post](https://supabase.com/blog/geo-queries-with-postgis-in-ionic-angular)