AnsweredAssumed Answered

Tolerance point selection question

Question asked by PW941248 on Aug 25, 2014
Latest reply on Aug 25, 2014 by kenbuja

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>

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">

  <style type ="text/css">html, body {

 

    height:100%;

    margin-top: 2%;

 

}</style>

 

  <script>dojoConfig = {async: true, parseOnLoad: true}</script>

  <script src="http://js.arcgis.com/3.9/"></script>

 

 

  <script>

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/0", {

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>

<body class="claro">

  <div id ="holder"></div>

      <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%">

     <div id = "legends"div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style = "width:200px">

             <div id ="legenddiv" style = "width:200px"></div>

 

       </div>

     <div id ="map" div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style= "height:100%"></div>

 

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

 

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" ><div id="slider">

 

    <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;">

        <li>2011</li>

        <li>2012</li>

        <li>2013</li>

        <li>2014</li>

    </ol>

</div></div>

</div>

 

 

 

 

 

</body>

 

<footer>

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

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

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

</footer>

</html>

</code>

Outcomes