Skip to main content
This guide walks through building a basic farm finder app that shows farms on a map with product filters.

​
Architecture

User's browser
  → Your app (React/Next.js/Vue)
    → Bhumi API (farm data)
    → Map provider (Mapbox/Google Maps/Leaflet)

​
Step 1: Get an API key

Sign up at console.bhumifarms.co and create a key. Store it as an environment variable — never expose it in client-side code.

​
Step 2: Search farms by location

// Server-side API route (e.g., Next.js route handler)
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const lat = searchParams.get("lat");
  const lng = searchParams.get("lng");

  const res = await fetch(
    `https://api.bhumifarms.co/v1/search?lat=${lat}&lng=${lng}&radius=25`,
    { headers: { "X-API-Key": process.env.BHUMI_API_KEY! } }
  );

  return Response.json(await res.json());
}

​
Step 3: Plot on a map

Each farm in the response includes lat and lng coordinates. Use these to place markers on your map. 
// Using Leaflet
farms.forEach((farm) => {
  L.marker([farm.lat, farm.lng])
    .bindPopup(`<b>${farm.name}</b><br>${farm.products.slice(0, 3).join(", ")}`)
    .addTo(map);
});

​
Step 4: Add product filters

Pass product names as comma-separated values: 
/v1/search?lat=45.52&lng=-122.68&products=raw%20milk,eggs&radius=25

​
Step 5: Farm detail pages

When a user clicks a farm, fetch the full profile: 
GET /v1/farms/{farm_id}
The paid tier returns rich data: description, story, certifications, practices, images, hours, and product listings with pricing.

​
Tips

  • Cache aggressively — farm data doesn’t change frequently. The API returns Cache-Control headers.
  • Use pagination — for dense areas, page through results rather than requesting everything at once.
  • Proxy through your server — never expose your API key to the browser.