1. First things first, head over to supabase.com and either sign up or log in to your account.
2. Once you're in, create a new project and fill in all the necessary details. Easy peasy!

1. Navigate to your project dashboard and find the SQL editor.
2. To enable the PostGIS extension, run this command:

CREATE EXTENSION IF NOT EXISTS postgis;

1. Let's create a table with a geometry column. Run this SQL command:

CREATE TABLE locations (
  id serial PRIMARY KEY,
  name text,
  geom geometry(Point, 4326)
);

1. Now, let's add some sample data with geographical coordinates:

INSERT INTO locations (name, geom)
VALUES 
('Location A', ST_SetSRID(ST_MakePoint(-73.935242, 40.730610), 4326)),
('Location B', ST_SetSRID(ST_MakePoint(-74.935242, 41.730610), 4326));

1. To find locations within a certain distance from a given point, use the ST_DWithin function:

SELECT id, name 
FROM locations 
WHERE ST_DWithin(geom, ST_SetSRID(ST_MakePoint(-73.935242, 40.730610), 4326), 10000);

This query will return the locations within 10,000 meters of the specified point.

1. To get the distance between two points, use the ST_Distance function:

SELECT id, name, ST_Distance(geom::geography, ST_SetSRID(ST_MakePoint(-73.935242, 40.730610), 4326)::geography) AS distance 
FROM locations;

This query will return the distance in meters from each location to the specified point.

1. Install the Supabase client library in your project. For JavaScript/Node.js, run:

npm install @supabase/supabase-js

1. Initialize the Supabase client:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

1. Execute a geospatial query using the client library:

const { data, error } = await supabase
  .from('locations')
  .select('id, name')
  .filter('geom', 'st_dwithin', `SRID=4326;POINT(-73.935242 40.730610)`, 10000);

This query fetches the locations within 10,000 meters of the specified point using the Supabase client library.

1. Use a mapping library like Leaflet or Mapbox to visualize geospatial data in your frontend application.
2. Retrieve geospatial data from Supabase and plot it on the map. Here’s a basic example using Leaflet:

import L from 'leaflet';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('https://xyzcompany.supabase.co', 'your-anon-key');

const map = L.map('map').setView([40.730610, -73.935242], 12);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

(async () => {
  const { data: locations, error } = await supabase
    .from('locations')
    .select('name, geom');

  locations.forEach(location => {
    const coordinates = location.geom.coordinates;
    L.marker([coordinates[1], coordinates[0]]).addTo(map)
      .bindPopup(location.name);
  });
})();

This guide covers the basics of implementing geospatial queries in Supabase, including setup, table creation, querying, and visualization.