EPiServer  /  Find November 07, 2011

Search by drawing on a Google Map

NOTE Since writing this post the company behind Truffler, 200OK, has been sold to EPiServer and the product Truffler has been renamed to EPiServer Find. Most of the content of this blog post is however applicable to EPiServer Find as well. For questions regarding Find, be sure to visit the forum on EPiServer World.

Leverage the powerful Within method in Truffler's .NET API to find locations within a geographical area drawn by users on a map.

During the weekend I finally got around to building a feature on the Truffler Sample site that I’ve been meaning to do for quite some time. I call it “crazy map search” as it’s A) probably not very useful in most applications and B) pretty darn cool.

For those that haven’t checked out the sample site yet, it demonstrates some of the search and filtering capabilities of Truffler by querying an index with a number of famous restaurants. The source code for the site is available for download on GitHub and it uses a read-only index so that anyone can download it and play with it without having to first create a Truffler index.

google_mapI grabbed the source code from one of the Google Maps samples that, among other things, show how to mark an area by placing a number of points on a map. I then stripped away the other examples, and adapted the code to perform a search for restaurants in the marked area. That is, as soon as at least three points have been added to the map and every time thereafter a point is added or moved the search result is updated to show restaurants within that area.

On the client side the functionality combines the points that make up the polygon into a string and executes an AJAX request to the server which responds with a partial view with the search results. On the server side the serialized points is de-serialized and the search is performed. While the whole functionality consists of about 60 lines of JavaScript and 20 lines of C# code, the actual filtering is as simple as filtering with the Within method.

Check out Crazy map search here. And by all means, download the sample site and see what other geo search things you can come up with :)

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.

Joel Abrahamsson

Joel Abrahamsson

I'm a passionate web developer and systems architect living in Stockholm, Sweden. I work as CTO for a large media site and enjoy developing with all technologies, especially .NET, Node.js, and ElasticSearch. Read more


comments powered by Disqus

My book

Want a structured way to learn EPiServer 7 development? Check out my book on Leanpub!

More about EPiServer Find