Basically I am trying to perform a search and from the search results, I zoom to certain map level and show the exact location. Here is my html:
<div id='top-bar'>
<table>
<tr>
<td style='width:90%;'><input placeholder='Enter An Address' id='search-box' type='text'/></td>
<td id='search-button'><img id='search-icon' src='img/search.png' width='20' height='20' onClick='GetSearchData()'/></td>
</tr>
</table>
<div id='searchResults'></div>
</div>
And my javaScript:
function setMap()
{
function init()
{
require(
[
"esri/map",
"dojo/dom-construct",
"dojo/domReady!"
],
function
(
Map,
domConstruct
)
{
map = Map("map-canvas",
{
});
map.setZoom(1);
coreFunctions();
});
}
dojo.ready(init);
}
function GetSearchData() {
var basicSearch = new BasicSearch;
var searchText = document.getElementById("search-box").value;
basicSearch.searchVal = searchText;
basicSearch.returnGeom = '1';
basicSearch.GetSearchResults(displayData);
}
function displayData(resultData){
var results = resultData.results;
if (results=='No results'){
document.getElementById('searchResults').innerHTML = "No result(s) found";
return false
}
else{
var htmlStr = "<table style='overflow-y: scroll; min-height: 100px;'>";
for (var i = 0; i < results.length; i++) {
var row = results[i];
htmlStr = htmlStr + "<tr>";
htmlStr = htmlStr + "<td>";
htmlStr = htmlStr + "<a href='JavaScript:ZoomTo("+ row.X +","+ row.Y +")'>" + row.SEARCHVAL + "</a>";
htmlStr = htmlStr + "</td>";
htmlStr = htmlStr + "</tr>";
}
htmlStr = htmlStr + "</table>";
document.getElementById('searchResults').innerHTML = htmlStr;
}
}
function ZoomTo(xVal,yVal){
map.showLocation(xVal,yVal);
}
The search did shows some results. But when I click on one of the search results, it does not perform the zoom function. Instead, it shows me some error message: Uncaught TypeError: Object [object Object] has no method 'showLocation'
.
I wonder why is it so as I did followed the documnentation here: OneMap API
Thanks in advance.
EDIT
I think the problem was with spatial reference. One of the coordinates is 24607.8257, 46287.3873. But I remember the lat and long for Singapore map is 1.352083000000000000, 103.819836000000010000. Does anybody know how to fix this problem?
function ZoomTo(xVal,yVal){
var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(xVal, yVal));
map.centerAndZoom(pt, 5);
}
map
is already defined when you are calling theZoomTo
function? – DaKirsche Jun 4 '14 at 8:03if (!map || !map.showLocation || typeof(map.showLocation) !== 'function'){ alert('map is undefined'); return;}
into yourZoomTo
function and give it a try. – DaKirsche Jun 4 '14 at 9:18