base map+query buffer

anjelinaponkerat · ‎11-26-2017

Hi

I add query buffer to your sample code, but the map service can not show!!.

If I remove map.addLayer(featureLayer); from code the map service load ok . please help me

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Display Multiple ArcGIS Online Services</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html,
body {
height: 97%;
width: 98%;
margin: 1%;
}

#map {
border: solid 1px #B5BCC7;
padding: 0;
}

#paneHeader {
background: url(images/header.png) repeat-x;
color: white;
border-bottom: solid 1px #B5BCC7;
text-align: center;
height: 30px;
margin: 0;
overflow: hidden;
font-size: 16px;
padding: 8px 5px;
}

#rightPane {
width: 150px;
margin: 0;
padding: 0;
}
</style>

], function(
dom, Color, keys, parser, esriConfig,
has, Map,SnappingManager, Measurement,
FeatureLayer, SimpleRenderer, GeometryService,
SimpleLineSymbol, SimpleFillSymbol,
Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate , HomeButton , Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic, SimpleMarkerSymbol
) {
parser.parse();

map = new Map("map");

var basemaps = [];
var waterTemplateLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
});
var waterBasemap = new Basemap({
layers: [waterTemplateLayer],
title: "Water Template",
thumbnailUrl: "images/waterThumb.png"
});
basemaps.push(waterBasemap);
var publicSafetyLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServ..."
});
var publicSafetyBasemap = new Basemap({
layers: [publicSafetyLayer],
title: "Public Safety",
thumbnailUrl: "images/safetyThumb.png"
});
basemaps.push(publicSafetyBasemap);

var basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
map: map
}, "basemapGallery");
basemapGallery.startup();

basemapGallery.on("error", function(error) {
console.log(error);
});

esriConfig.defaults.io.proxyUrl = "/proxy/";

// Add the census block points in on demand mode. An outfield is specified since it is used when calculating the total population falling within the one mile radius.
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
outFields: ["POP2000"]
});

// Selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
featureLayer.setSelectionSymbol(symbol);

// Make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

map.addLayer(featureLayer);

var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
var circle;

// When the map is clicked create a buffer around the click point of the specified distance
map.on("click", function(evt){
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "esriMiles"
});
map.graphics.clear();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);

var query = new Query();
query.geometry = circle.getExtent();
// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
featureLayer.queryFeatures(query, selectInBuffer);
});

function sumPopulation(features) {
var popTotal = 0;
for (var x = 0; x < features.length; x++) {
popTotal = popTotal + features.attributes["POP2000"];
}
return popTotal;
}

});
</script>

</head>

<body class="claro">
<span id="messages">Click on the map to select census block points within 1 mile.</span>

<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
<div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Select Basemap</span>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>

</html>

RobertScheitlin__GISP · ‎11-26-2017

Anjelina,

Your issue is adding the FeatureLayer is occurring before the basemap gallery widget is done so the first layer the feature layer is setting the maps WKID and thus the basemaps WKIDs do not match the maps and you get your issue. Here is your code fixed:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Display Multiple ArcGIS Online Services</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
  <style>
    html,
    body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #map {
      border: solid 1px #B5BCC7;
      padding: 0;
    }

    #paneHeader {
      background: url(images/header.png) repeat-x;
      color: white;
      border-bottom: solid 1px #B5BCC7;
      text-align: center;
      height: 30px;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      padding: 8px 5px;
    }

    #rightPane {
      width: 150px;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map;
    require([
      "dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/config",
      "esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement",
      "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Scalebar",
      "esri/dijit/BasemapGallery",
      "esri/dijit/BasemapLayer",
      "esri/dijit/Basemap",
      "esri/dijit/OverviewMap",
      "esri/tasks/locator",
      "esri/dijit/Search",
      "esri/symbols/PictureMarkerSymbol",
      "esri/InfoTemplate",
      "esri/dijit/HomeButton",
      "esri/geometry/Extent",
      "esri/SpatialReference",
      "esri/dijit/VisibleScaleRangeSlider",
      "esri/geometry/scaleUtils",
      "esri/virtualearth/VETiledLayer",
      "dijit/form/Button",
      "esri/tasks/query",
      "esri/geometry/Circle",
      "esri/graphic",
      "esri/symbols/SimpleMarkerSymbol",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/form/CheckBox",
      "dojo/domReady!"
    ], function(
      dom, Color, keys, parser, esriConfig,
      has, Map, SnappingManager, Measurement,
      FeatureLayer, SimpleRenderer, GeometryService,
      SimpleLineSymbol, SimpleFillSymbol,
      Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate, HomeButton, Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic,
      SimpleMarkerSymbol
    ) {
      parser.parse();
      map = new Map("map");
      var basemaps = [];
      var waterTemplateLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
      });
      var waterBasemap = new Basemap({
        layers: [waterTemplateLayer],
        title: "Water Template",
        thumbnailUrl: "images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      var publicSafetyLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServ..."
      });
      var publicSafetyBasemap = new Basemap({
        layers: [publicSafetyLayer],
        title: "Public Safety",
        thumbnailUrl: "images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      basemapGallery.on("error", function(error) {
        console.log(error);
      });
      map.on("load", function() {
        // Add the census block points in on demand mode. An outfield is specified since it is used when calculating the total population falling within the one mile radius.
        var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
          outFields: ["POP2000"]
        });
        // Selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol);

        // Make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);

        var circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );
        var circle;
        // When the map is clicked create a buffer around the click point of the specified distance
        map.on("click", function(evt) {
          circle = new Circle({
            center: evt.mapPoint,
            geodesic: true,
            radius: 1,
            radiusUnit: "esriMiles"
          });
          map.graphics.clear();
          var graphic = new Graphic(circle, circleSymb);
          map.graphics.add(graphic);
          var query = new Query();
          query.geometry = circle.getExtent();
          // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
          featureLayer.queryFeatures(query, selectInBuffer);
        });

        function selectInBuffer(response) {
          var feature;
          var features = response.features;
          var inBuffer = [];
          // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
          for (var i = 0; i < features.length; i++) {
            feature = features[i];
            if (circle.contains(feature.geometry)) {
              inBuffer.push(feature.attributes[featureLayer.objectIdField]);
            }
          }
          var query = new Query();
          query.objectIds = inBuffer;
          // Use an objectIds selection query (should not need to go to the server)
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results) {
            var totalPopulation = sumPopulation(results);
            var r = "";
            r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
            dom.byId("messages").innerHTML = r;
          });
        }

        function sumPopulation(features) {
          var popTotal = 0;
          for (var x = 0; x < features.length; x++) {
            popTotal = popTotal + features[x].attributes["POP2000"];
          }
          return popTotal;
        }
      });

      esriConfig.defaults.io.proxyUrl = "/proxy/";

    });
  </script>
</head>

<body class="claro">
  <span id="messages">Click on the map to select census block points within 1 mile.</span>
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" id="rightPane">
      <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
        <div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
          <span>Select Basemap</span>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
          <div id="basemapGallery"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎11-26-2017

Anjelina,

Your issue is adding the FeatureLayer is occurring before the basemap gallery widget is done so the first layer the feature layer is setting the maps WKID and thus the basemaps WKIDs do not match the maps and you get your issue. Here is your code fixed:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Display Multiple ArcGIS Online Services</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
  <style>
    html,
    body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #map {
      border: solid 1px #B5BCC7;
      padding: 0;
    }

    #paneHeader {
      background: url(images/header.png) repeat-x;
      color: white;
      border-bottom: solid 1px #B5BCC7;
      text-align: center;
      height: 30px;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      padding: 8px 5px;
    }

    #rightPane {
      width: 150px;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map;
    require([
      "dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/config",
      "esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement",
      "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Scalebar",
      "esri/dijit/BasemapGallery",
      "esri/dijit/BasemapLayer",
      "esri/dijit/Basemap",
      "esri/dijit/OverviewMap",
      "esri/tasks/locator",
      "esri/dijit/Search",
      "esri/symbols/PictureMarkerSymbol",
      "esri/InfoTemplate",
      "esri/dijit/HomeButton",
      "esri/geometry/Extent",
      "esri/SpatialReference",
      "esri/dijit/VisibleScaleRangeSlider",
      "esri/geometry/scaleUtils",
      "esri/virtualearth/VETiledLayer",
      "dijit/form/Button",
      "esri/tasks/query",
      "esri/geometry/Circle",
      "esri/graphic",
      "esri/symbols/SimpleMarkerSymbol",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/form/CheckBox",
      "dojo/domReady!"
    ], function(
      dom, Color, keys, parser, esriConfig,
      has, Map, SnappingManager, Measurement,
      FeatureLayer, SimpleRenderer, GeometryService,
      SimpleLineSymbol, SimpleFillSymbol,
      Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate, HomeButton, Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic,
      SimpleMarkerSymbol
    ) {
      parser.parse();
      map = new Map("map");
      var basemaps = [];
      var waterTemplateLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
      });
      var waterBasemap = new Basemap({
        layers: [waterTemplateLayer],
        title: "Water Template",
        thumbnailUrl: "images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      var publicSafetyLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServ..."
      });
      var publicSafetyBasemap = new Basemap({
        layers: [publicSafetyLayer],
        title: "Public Safety",
        thumbnailUrl: "images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      basemapGallery.on("error", function(error) {
        console.log(error);
      });
      map.on("load", function() {
        // Add the census block points in on demand mode. An outfield is specified since it is used when calculating the total population falling within the one mile radius.
        var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
          outFields: ["POP2000"]
        });
        // Selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol);

        // Make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);

        var circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );
        var circle;
        // When the map is clicked create a buffer around the click point of the specified distance
        map.on("click", function(evt) {
          circle = new Circle({
            center: evt.mapPoint,
            geodesic: true,
            radius: 1,
            radiusUnit: "esriMiles"
          });
          map.graphics.clear();
          var graphic = new Graphic(circle, circleSymb);
          map.graphics.add(graphic);
          var query = new Query();
          query.geometry = circle.getExtent();
          // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
          featureLayer.queryFeatures(query, selectInBuffer);
        });

        function selectInBuffer(response) {
          var feature;
          var features = response.features;
          var inBuffer = [];
          // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
          for (var i = 0; i < features.length; i++) {
            feature = features[i];
            if (circle.contains(feature.geometry)) {
              inBuffer.push(feature.attributes[featureLayer.objectIdField]);
            }
          }
          var query = new Query();
          query.objectIds = inBuffer;
          // Use an objectIds selection query (should not need to go to the server)
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results) {
            var totalPopulation = sumPopulation(results);
            var r = "";
            r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
            dom.byId("messages").innerHTML = r;
          });
        }

        function sumPopulation(features) {
          var popTotal = 0;
          for (var x = 0; x < features.length; x++) {
            popTotal = popTotal + features[x].attributes["POP2000"];
          }
          return popTotal;
        }
      });

      esriConfig.defaults.io.proxyUrl = "/proxy/";

    });
  </script>
</head>

<body class="claro">
  <span id="messages">Click on the map to select census block points within 1 mile.</span>
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" id="rightPane">
      <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
        <div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
          <span>Select Basemap</span>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
          <div id="basemapGallery"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

anjelinaponkerat · ‎11-26-2017

Hi

thanks a lot

I have one more important problem, when I use query buffer in my code, I can not use measurement tools. because when I click for measurement, it return buffer! how can I add button for query buffer in js api like measurement tools, after select button each click start a query for buffer.

Regards