Tolerance point selection question

PaulWilner_II · ‎08-25-2014

Hi all:

Below you'll see my code with a lot of placeholders currently, however I'm trying to select a point feature layer on click. All seems to work well outside of my layout, scheme, however when I apply my layout via css and html the selection seems to be way off(like selecting things far away from the click if at all)

Thanks in advance for help.

<Code>

<!DOCTYPE html>

<html >

<head>

height:100%;

margin-top: 2%;

}</style>

require([

"esri/map",

"dojo/dom", // for inserting value in TextBox example

"dojo/parser", // parser because of TextBox decoration

"dijit/form/HorizontalSlider",

"dijit/form/TextBox",

"dijit/form/HorizontalRule",

"dijit/form/HorizontalRuleLabels",

"dijit/TitlePane",

"dijit/layout/AccordionContainer",

"dijit/layout/AccordionPane",

"dijit/layout/ContentPane",

"dijit/layout/BorderContainer",

"dijit/layout/TabContainer",

"esri/dijit/Legend",

"esri/layers/FeatureLayer",

"esri/symbols/SimpleMarkerSymbol",

"esri/InfoTemplate",

"esri/tasks/QueryTask",

"esri/tasks/query",

"esri/geometry/Point",

"esri/geometry/Extent",

"dojo/domReady!"

// this we only include to make an example with TextBox

], function(Map,

dom,

parser,

HorizontalSlider,

TextBox,

HorizontalRule,

HorizontalRuleLabels,

TitlePane,

AccordianContainer,

AccordianPane,

ContentPane,

BorderContainer,TabContainer,Legend,FeatureLayer,SimpleMarkerSymbol,InfoTemplate,QueryTask,Query,Point,Extent){

//INITIALIZE MAP

var map;

map = new Map("map", {

basemap: "gray",

center:[-75.148, 42.706], //long, lat

zoom: 7

});

//FUNCTIONALITY CODE STARTS HERE

var infoTemplate = new InfoTemplate();

infoTemplate.setTitle(("${CAMPUSNAME}"));

infoTemplate.setContent("${CAMPUSNAME}");

//var SUNYSchools = new FeatureLayer("http://scentgis1.sysadmin.suny.edu:6080/arcgis/rest/services/tstServiceFolder/Mapof64/MapServer/0", {

//mode: FeatureLayer.MODE_SNAPSHOT,

// outFields: ["*"],

// infoTemplate: infoTemplate

//});

//map.addLayer(SUNYSchools);

var SUNYSchools2 = new FeatureLayer("http://scentgis1.sysadmin.suny.edu:6080/arcgis/rest/services/tstServiceFolder/Mapof64/FeatureServer/...", {

mode: FeatureLayer.MODE_SNAPSHOT,

outFields: ["CAMPUSNAME"],

infoTemplate: infoTemplate

});

map.addLayers([SUNYSchools2]);

var selectionSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE);

SUNYSchools2.setSelectionSymbol(selectionSymbol);

map.on("click",function calcTol(evt) {

var selectionQuery = new esri.tasks.Query();

var tol = map.extent.getWidth()/map.width * 5;

var x = evt.mapPoint.x;

var y = evt.mapPoint.y;

var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

selectionQuery.geometry = queryExtent;

SUNYSchools2.selectFeatures(selectionQuery,esri.layers.FeatureLayer.SELECTION_NEW);

console.log(selectionQuery.geometry);

});

//var selectQuery=new Query();

//map.on("click",function(evt){

//selectQuery.geometry=pointToExtent(map,evt.mapPoint,10);

//SUNYSchools2.selectFeatures(selectQuery,FeatureLayer.SELECTION_NEW,function(features){

//console.log(selectQuery.geometry);

//console.log(features.length);

//});

//Layout Stuff starts here

var legend = new Legend({

map: map,

layerInfos : [ {

layer:SUNYSchools2,

title : 'SUNY Campuses'

}]

}, "legenddiv");

legend.startup();

var x;

var slider = new HorizontalSlider({

name: "slider",

value: 2011,

minimum: 2011,

maximum: 2014,

intermediateChanges: true,

discreteValues:4,

style: "width:100%;",

showButtons: false,

onChange: function(value){

x = value;

if (x== 2014)

{

alert("Happy New Year!");

}

console.log(x);

}

}, "slider").startup();

var aContainer = new AccordianContainer("markup");

var tp = new TitlePane({title:"Tools", content: "markup"});

dom.byId("holder").appendChild(tp.domNode);

tp.startup();

});

</script>

sunyheader

</head>

</div>

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>

<div data-dojo-type="dijit/form/HorizontalRule" container="bottomDecoration"

count=4 style="height:5px;"></div>

<ol data-dojo-type="dijit/form/HorizontalRuleLabels" container="bottomDecoration"

style="height:1em;font-size:75%;color:gray;">

</ol>

</div></div>

</div>

</body>

<p>Posted by: Hege Refsnes</p>

<p>Contact information: <a href="mailto:someone@example.com">

someone@example.com</a>.</p>

</footer>

</html>

</code>

KenBuja · ‎08-25-2014

This can usually be solved by applying a resize to the map once it's loaded.

map.on("load", function(){
   map.resize();
});

View solution in original post

KenBuja · ‎08-25-2014

This can usually be solved by applying a resize to the map once it's loaded.

map.on("load", function(){
   map.resize();
});

PaulWilner_II · ‎08-25-2014

Looks like this is working! Thank you so much. It is the simple things most times that trip me up!

KenBuja · ‎08-25-2014

Glad to help. I use the code from this post in my projects now.

var resizeTimer;
map.on("load", function () {
  registry.byId("divMap").on("resize", function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
      map.resize();
      map.reposition();
    }, 500);
  });
});