All,
I am querying a layer and showing the results in a table.
When i click the table row it has to zoom to the selected area.While doing this am getting this " Map: Geometry (wkid: 102656) cannot be converted to spatial reference of the map (wkid: 102100) " error in the console.
It works fine when i include the latest dojo file but the map doesnt properly(i added a street map on map load).
Anybody has a solution to this problem?
here is my complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>City Of Middletown</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet"
href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet"
href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script type="text/javascript"
src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1"></script>
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script>
djConfig = {
parseOnLoad:true
}
</script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, addresslist;
function init() {
center = [-72.65065, 41.56232];
zoom = 11;
map = new esri.Map("map", {
basemap: "topo",
// center: center,
zoom: zoom
});
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(
"http://12.132.106.112:6080/arcgis/rest/services/MidParcelFabric/MapServer");
map.addLayer(dynamicMapServiceLayer);
queryTask = new esri.tasks.QueryTask(
"http://12.132.106.112:6080/arcgis/rest/services/MidParcelFabric/MapServer/1");
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = [ "OLD_MBL_1", "MAPLOT_1" , "MAP_1", "LOT_1", "CAMAACCT_1", "pid", "PROPERTY_LOCATIO", "STREET_NUMBER", "STREET_NAME" ,"UNIT__", "GRANTEE", "CO_GRANTEE_S_NAM", "Shape_Length", "Shape_Area" ];
symbol = new esri.symbol.SimpleFillSymbol();
symbol.style = esri.symbol.SimpleFillSymbol.STYLE_SOLID;
symbol.color = new dojo.Color([98, 194, 204, 0.5]);
}
dojo.addOnLoad(init);
function executeQueryTask(streetName,streetNumber,ownerName,maplot,lot,unit,accountID,pid) {
var queryString="";
queryString+= "STREET_NAME" + " like '%" + streetName +"%'" ;
queryString+= " OR " + "GRANTEE" + " like '%" + streetName +"%'" ;
//queryString+= " OR " + "pid" + " = " + streetName ;
console.log(queryString);
query.where = queryString;
queryTask.execute(query, showResults);
}
function showResults(featureSet) {
map.graphics.clear();
var resultFeatures = featureSet.features;
for ( var i = 0, il = resultFeatures.length; i < il; i++) {
var graphic = resultFeatures;
graphic.setSymbol(symbol);
//create infotemplate for each point
var pid = resultFeatures.attributes['pid'];
var infoTemplate = new esri.InfoTemplate();
infoTemplate
.setTitle(resultFeatures.attributes.CAMAACCT_1);
infoTemplate
.setContent("Owner Name: "
+ resultFeatures.attributes["GRANTEE"]
+ "<br />Address:"
+ resultFeatures.attributes["PROPERTY_LOCATIO"]
+ "<br />Street Name: "
+ resultFeatures.attributes["STREET_NAME"]
+ "<br/>Account Number:"
+ resultFeatures.attributes["CAMAACCT_1"]
+ "<br/>Click<a href='#' onclick='viewPropertyCard(\""
+ pid
+ "\")'>here</a>to View Property Card");
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic);
}
resultList(featureSet);
}
//populate grid
function resultList(results) {
console.log('resultList');
var text = '';
var addr = results.features;
addresslist = results.features;
text += '';
for ( var i = 0, il = addr.length; i < il; i++) {
text += '<li class="list-group-item" id="searchfield" onclick="zoomToProperty('+i+')">' + addr.attributes["PROPERTY_LOCATIO"]+ '</li>';
//+ '</td>' + '<td>' + addr.attributes["GRANTEE"]
//+ '</td>' + '<td>' + addr.attributes["CAMAACCT_1"]
//+ '</td>' + '<td>' + '<a href="#" onclick="featureZoom('
//+ addr + ')">(Zoom To)</a>' + '</td>'
//+ '<td><a href="#property-card" onclick="zoomToProperty('+i+')">View Property</a></td>'
//+ '</ul></div>';
}
$('#resultsList').html(text);
}
function zoomToProperty(cammaacct) {
var clickedCammaacct = addresslist[cammaacct].attributes["CAMAACCT_1"];
var selectedCammaacct;
for ( var i = 0, il = map.graphics.graphics.length; i < il; i++) {
var currentGraphic = map.graphics.graphics;
if ((currentGraphic.attributes)
&& currentGraphic.attributes.CAMAACCT_1 == clickedCammaacct) {
selectedCammaacct = currentGraphic;
console.log(selectedCammaacct);
break;
}
}
map.setExtent(selectedCammaacct.geometry.getExtent(), true);
}
function viewPropertyCard(pid) {
console.log('pid:'+pid);
window.open("http://gis.vgsi.com/essexct/Parcel.aspx?pid="+pid);
}
</script>
</head>
<body class="claro">
<div id="map" data-dojo-type="dijit/layout/ContentPane" style="position: relative;">
</div>
<div class="alert alert-dismissable alert-info" style="position: absolute; top: 20px; left: 100px; z-index: 999;>
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="panel panel-info" style="position: absolute; top: 200px; left: 100px; z-index: 99;width:200px;height:400px;">
<div class="panel-heading">
<h3 class="panel-title">Panel info</h3>
</div>
<div class="panel-body" style="height:400px;">
<div>
<form id="searchForm">
<input type="text" placeholder="What are searching for?" id="searchParam"/>
</form>
</div>
<div class="bs-example" style="height:280px;overflow-y:scroll;">
<ul class="list-group" id="resultsList" style="height:200px;">
</ul>
</div>
</div>
</div>
<!-- end template -->
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
<script>
$("#searchForm").bind( "submit", function() {
executeQueryTask(dojo.byId('searchParam').value,'','','','','','','');
return false;
});
</script>
</body>
</html>
Kiran,
When you do your query make sure that you set the query's out spatial reference to the maps spatial reference.
query.outSpatialReference = map.spatialReference;