I encountered a major challenge while creating a directory for local businesses: designing an intuitive search interface that allows users to easily find listings by location and property type. I aimed to create a strong real-time search experience, starting with a solid foundation for future improvements.
This first iteration focuses on three core user needs:
- Finding listings by property type
- Searching by location
- Adjusting search radius to expand or narrow results
By omitting JavaScript in this version, we guarantee that the search functions in all browsers, ensuring a consistent experience. Future versions will use Turbo for real-time updates and a more dynamic interface. This version shows how to create a clean, functional geographic search using only Rails and Geocoder.
The solution outlined below uses Bootstrap’s floating labels for a modern feel, while maintaining a straightforward form submission process. It’s a great foundation for any location-based directory system, like property listings, business directories, or apps needing geographic search.
Let’s dive into how to implement this foundation, which you can later enhance with progressive improvements.
Model Setup
Controller
View
Required Database Columns
Geocoder Configuration
# config/initializers/geocoder.rb
Geocoder.configure(
units: :mi,
distances: :linear
)Required CSS
Add Bootstrap to your application:
# app/assets/stylesheets/application.scss
@import "bootstrap";
.form-floating {
> label {
z-index: 3;
}
> .form-select {
padding-top: 1.625rem;
padding-bottom: 0.625rem;
}
}Key Features
- Location-based search using Geocoder
- Predefined search radiuses
- Property type filtering
- Bootstrap 5 floating labels
- Responsive card grid for results
- Distance calculation for search results
Requirements
- Ruby on Rails 7.0+
- Bootstrap 5
- Geocoder gem
- PostgreSQL (recommended for geographic queries)
Remember to:
- Run migrations
- Add appropriate address validation
- Configure Geocoder API keys if needed
- Add appropriate indexes for performance
- Consider rate limiting for production use
Conclusion: It’s Time for You to Experience Geo-Amazing! 🌍
Well, there you have it – a clean, functional geographic search that doesn’t need JavaScript to be awesome! But this is just the beginning of our location-based adventure.
What’s Next?
Watch for the enhanced version of this tutorial, where we’ll create a smooth, real-time search experience using Hotwire/Turbo. Subscribe to stay updated!
Useful Links
- Geocoder – The gem that makes geographic magic happen
- Bootstrap – For those floating labels and responsive goodness
- Turbo – Sneak peek at what’s coming next!
Let’s Chat!
I’d love to hear from you:
- What features would you add to this search?
- Are you building something similar? What challenges are you facing?
- Have you found creative ways to use Geocoder in your projects?
Drop a comment below, and let’s geek out about geographic search together! If you found this helpful, don’t forget to like and share – it helps other developers find this resource.
Show & Tell
Built something cool with this tutorial? Share your project in the comments! There’s nothing better than seeing what the community creates.
And remember, even T-Rex had small arms, but that didn’t stop him from being awesome – start small, iterate often! 🦖
P.S. If you’re impatient for the Turbo version, throw a “🚀” in the comments, and I’ll know to speed things up!
0 Comments