Map: Geometry (wkid: 102656) cannot be converted to spatial reference of the map (wkid: 102100)

3798
1
07-18-2014 04:05 AM
kiranbodhasrungi
New Contributor

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">&times;</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>

0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Emeritus

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;