There are many ways to enhance the geospatial search features of SearchUnit, but this tutorial should serve as a good starting point to work from.

Watch the video, or read below for full details.

Initial Setup

For this demo we have setup a simple ASP.NET web application and added SearchUnit to the project. If you need help on setting up your first SearchUnit project, please see either the ASP.NET quick start guide or the MVC guide.

I've created some basic HTML pages that represent the different jobs to be searched, and just for ease of indexing, have added a simple link to each of the HTML pages to help the crawler index the pages.

Adding Custom Data

For our job web pages to be included in a geospatial search, they must have the latitude and longitude of the job location specified in the Custom Data field. There are various ways of adding Custom Data to indexed items, for details please see the Custom Data section of the Help documentation. For our purposes, we are simple going to add the geolocation Custom Data by adding the following meta tag to each of our job pages;

Once we have added the Custom Data to our pages, we can go ahead and create our Index. For simplicity, we have stored our HTML pages to be indexed within the web application and will just carry out a simple website import. As the pages are within the project, we have run the application so the webserver is running and then imported the documents using the Index Manager tool.

Next we add the geolocation filter control to our search page using the following code;

	<div class="sew_filterControl"><!-- {"FieldName":"geolocation", 
			"ControlType":"geolocation","Label":"Location:", "Label2":"Within:", 
			"Type":"geolocation", 
			"Options":[{"name":"Any", "value": "" }, {"name":"1 mile", "value": "0-1" }, 
			{"name":"5 miles", "value": "0-5" }, {"name":"10 miles", "value": "0-10" }, 
			{ "name":"20 miles","value": "0-20" }, {"name":"50 miles", "value": "0-50" },   
			{"name":"100 miles", "value": "0-100" }], "GetLiveDataFromServer": "false"} -->

	</div>
					

The filter control will provide a drop down list of different radius options for the location being searched.

Add a Geocoding Service

To facilitate the user entering free text to describe their location, use a geocoding service such as Google's Places API. Add the following code to the search page;

    <script type="text/javascript">
    KSQ(function () {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        var tb = keyotiCustomDataFilters.getGeoLocationFilterControls()[0].getHomeLocationTextBoxElement();
        tb.width(300);
        var autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(tb[0]),
            { types: ['geocode'] });

        // When the user selects an address from the drop down, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            keyotiCustomDataFilters.getGeoLocationFilterControls()[0].setHomeLocation(place.geometry.location.lat(), 
                    place.geometry.location.lng(), place.name);

        });

        // Bias the autocomplete object to the user's geographical location,
        // as supplied by the browser's 'navigator.geolocation' object.
        tb.focus( function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        });

    });      
    </script>     
    <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrt7_leRTs18a_blBUAV8qb618H9kS-xQ&libraries=places"></script>
     
                        

The code above includes Keyoti's API key which will only work from localhost. You can obtain your own API key from Google and replace it in the code.

Add the Search Box and Search Result Controls

Next we add the search box control to the page using the following code;

And then the Search Result control which will display our search results for us. This also contains the sort control and geospatial search options.

	<div id="sew_searchResultControl">
            <div id="sew_sortControl" style="display: inline-block">
                <!-- {"Options":[
                            {"Label":"Distance (Descending)", "Field":"geolocation", "Direction":"DES", "Type":"Distance"},
                            {"Label":"Distance (Ascending)", "Field":"geolocation", "Direction":"ASC", "Type":"Distance"}
                        ]}-->

            </div>
        </div>
					

Set the Index Directory

Lastly, we just need to set the Index Directory path for our job site index, like this;

You should now have the basics of geospatial search setup and ready to use with SearchUnit. There are so many different ways you can tailor your geo search setup such as adding mapping features. Please see the demo projects installed with SearchUnit or contact us if you have any questions.