Search By Filter Implementation

From Ka-Map Wiki

Jump to: navigation, search

by Alessio Di Lorenzo

Contents

[edit] Goal

The objective of this wiki page is to explain, in a quite easy way, how to add a search filter fuction (e.g. "search a text string by table_name") to the default search system of the Ka-Map framework. We will use the CVS code for searching because it fixes a problem with the PostGIS layers. So, if you plan to use PostGIS tables, get Ka-Map from cvs!

Before you start, prepare a classical Ka-Map application and include some searchable layers in your mapfile (Search_System).

[edit] Involved files

  • Your favourite HTML Ka-Map Template;
  • KaSearch.php (path: htdocs/tools/search);
  • KaSearch.js (path: htdocs/tools/search).


[edit] Editing HTML

In this example we are going to modify the ominiverdi's index.html (KaExplorer user interface). Open the file with your faourite text editor and locate this section:

 <div id="search">
	<h3>Search</h3>
	<hr>
	<h5>Use this form to search places in the database</h5>
	<form name="search" action="javascript:myKaSearch.search(document.forms['search'].elements['searchstring'].value);">
	<!--<label for="searchstring">text to search:</label>-->
	<input type="text" name="searchstring" style="width:90px;">
	<button type="button" onClick="myKaSearch.search(document.forms['search'].elements['searchstring'].value)">Go!</button>
	</form>
	<hr>
	<div id="searchres"> </div>
</div><!-- end identifier -->

modify it by inserting a <select> tag using your postgis tables/shapefiles names as <option> values:

 <div id="search">
	<h3>Search</h3>
	<hr>
	<h5>Use this form to search places in the database</h5>
	<form name="search" action="javascript:myKaSearch.search(document.forms['search'].elements['searchstring'].value);">
		<select id="searchlayer" style="width:85px">
			<option value="0">Search by...</option>
			<option value="my_real_table_name">My_Alias_1</option>
			<option value="my_real_table_name">My_Alias_2</option>
			and so on...
		</select>
	<!--<label for="searchstring">text to search:</label>-->
	<input type="text" name="searchstring" style="width:90px;">
	<button type="button" onClick="myKaSearch.search(document.forms['search'].elements['searchstring'].value)">Go!</button>
	</form>
	<hr>
	<div id="searchres"> </div>
</div><!-- end identifier -->


[edit] Editing PHP Search code

Open the htdocs/tools/search/KaSearch.php file and do the following:

a) insert this code after the request handling (at the beginning of the file, around line 34-35)

$layer = $_REQUEST['searchlayer'];

this code puts the value of the selected option (the current "my_real_table_name"), defined in the html template, in the $layer variable


b) Add the following line

if ($layer != "0") {
    $oLayer = $oMap->getLayerByName($layer);
} else {
    echo "No option selected in the dropdown menu!";
    die();
}

before the FOR cicle (that starts under the //LOOP ON LAYERS comment).
The getLayerByName() method uses the value of the $layer variable to "decide" in wich layer look for the user's defined searchstring


c) this is the more delicate operation (however not so difficult if you know a little php).
Comment the FOR cicle around the line 88-90 (it begins under the original //LOOP ON LAYERS comment, as we said).
Pay attention to comment also the closing "}" at the end of the cicle!


[edit] Editing AJAX Request

This is the last and easiest step!
Open the htdocs/tools/search/KaSearch.js file and do the following:

a) Add this line after the searchstring=encodeURIComponent(search_query); line:

searchlayer=document.getElementById('searchlayer').value;


b) Modify the request:

xmlhttp.open('GET', "tools/search/kaSearch.php?xmlRequest=true&map="+this.kaMap.getCurrentMap().name+"&searchstring="+searchstring, true);

in this way

xmlhttp.open('GET',"tools/search/kaSearch.php?xmlRequest=true&map="+this.kaMap.getCurrentMap().name+"&searchstring="+searchstring+"&searchlayer="+searchlayer, true);


[edit] Conclusions

This "patch" presents some "youth issues" like the needing of manually specify the layer names in the html template file.
I want to invite you to contribute and help to improve this functionality to get it packaged in a future ka-map release!

Personal tools