how can customize query buffer? I,m going to add a button for call query buffer function (like measurement tools), and a text area (textbox) for insert radius of buffer by client in web page.
Solved! Go to Solution.
Anjelina,
Here is a sample that uses dojo/Dialog:
<!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: 100%;
width: 100%;
margin: 0;
}
#map {
border: solid 1px #B5BCC7;
padding: 0;
}
#paneHeader,
#header {
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;
}
#header {
text-align: right;
}
#rightPane {
width: 150px;
margin: 0;
padding: 0;
}
#bufferDialogBtn {
float: right;
}
.nonModal_underlay {
display: none;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, bufferDialog, circle, circleSymb, tb, featureLayer;
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",
"dojo/on",
"esri/toolbars/draw",
"esri/units",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/Dialog",
"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, on, Draw, units
) {
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(evt) {
initToolbar(evt);
// 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.
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);
circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
on(dom.byId("clearGraphics"), "click", function() {
if (map) {
map.graphics.clear();
featureLayer.clearSelection();
dom.byId("messages").innerHTML = "";
}
});
});
esriConfig.defaults.io.proxyUrl = "/proxy/";
on(dom.byId("bufferDialogBtn"), "click", function(){
bufferDialog.show()
});
function initToolbar(evt) {
tb = new Draw(evt.map);
tb.on("draw-end", doBuffer);
on(dom.byId("drawBtn"), "click", function(){
tb.activate("point");
});
}
function doBuffer(evt) {
tb.deactivate();
circle = new Circle({
center: evt.geometry,
geodesic: true,
radius: dom.byId("distance").value,
radiusUnit: units[dom.byId("unit").value]
});
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;
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="float:right;">
<button id="bufferDialogBtn" type="button" data-dojo-type="dijit/form/Button">Buffer</button>
</div>
<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>
<div data-dojo-type="dijit/Dialog" data-dojo-id="bufferDialog" title="Buffer" class="nonModal">
<div><b>Buffer Parameters</b></div>
Distance:
<input type="text" id="distance" size="5" value="1" />
<select id="unit" style="width:100px;">
<option value="MILES">Miles</option>
<option value="FEET">Feet</option>
<option value="KILOMETERS">Kilometers</option>
<option value="METERS">Meters</option>
<option value="NAUTICAL_MILES">Nautical Miles</option>
<option value="YARDS">Yards</option>
</select>
<br /><br />
<span id="messages"></span>
<br /><br />
<button type="button" id="drawBtn" data-dojo-type="dijit/form/Button">Click On The Map</button>
<button type="button" id="clearGraphics" data-dojo-type="dijit/form/Button">Clear Graphics</button>
</div>
</body>
</html>
Anjelina,
So what do you have so far in your code? Are you going to use a dojo titlepane dijit for the dialog portion?
I wrote a sample by html and js, I don't know more and don't know what should I do.
Anjelina,
Here is a sample that uses dojo/Dialog:
<!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: 100%;
width: 100%;
margin: 0;
}
#map {
border: solid 1px #B5BCC7;
padding: 0;
}
#paneHeader,
#header {
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;
}
#header {
text-align: right;
}
#rightPane {
width: 150px;
margin: 0;
padding: 0;
}
#bufferDialogBtn {
float: right;
}
.nonModal_underlay {
display: none;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, bufferDialog, circle, circleSymb, tb, featureLayer;
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",
"dojo/on",
"esri/toolbars/draw",
"esri/units",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/Dialog",
"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, on, Draw, units
) {
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(evt) {
initToolbar(evt);
// 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.
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);
circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
on(dom.byId("clearGraphics"), "click", function() {
if (map) {
map.graphics.clear();
featureLayer.clearSelection();
dom.byId("messages").innerHTML = "";
}
});
});
esriConfig.defaults.io.proxyUrl = "/proxy/";
on(dom.byId("bufferDialogBtn"), "click", function(){
bufferDialog.show()
});
function initToolbar(evt) {
tb = new Draw(evt.map);
tb.on("draw-end", doBuffer);
on(dom.byId("drawBtn"), "click", function(){
tb.activate("point");
});
}
function doBuffer(evt) {
tb.deactivate();
circle = new Circle({
center: evt.geometry,
geodesic: true,
radius: dom.byId("distance").value,
radiusUnit: units[dom.byId("unit").value]
});
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;
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="float:right;">
<button id="bufferDialogBtn" type="button" data-dojo-type="dijit/form/Button">Buffer</button>
</div>
<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>
<div data-dojo-type="dijit/Dialog" data-dojo-id="bufferDialog" title="Buffer" class="nonModal">
<div><b>Buffer Parameters</b></div>
Distance:
<input type="text" id="distance" size="5" value="1" />
<select id="unit" style="width:100px;">
<option value="MILES">Miles</option>
<option value="FEET">Feet</option>
<option value="KILOMETERS">Kilometers</option>
<option value="METERS">Meters</option>
<option value="NAUTICAL_MILES">Nautical Miles</option>
<option value="YARDS">Yards</option>
</select>
<br /><br />
<span id="messages"></span>
<br /><br />
<button type="button" id="drawBtn" data-dojo-type="dijit/form/Button">Click On The Map</button>
<button type="button" id="clearGraphics" data-dojo-type="dijit/form/Button">Clear Graphics</button>
</div>
</body>
</html>
Hi
I think there is a bug in code.
When buffer tools is open in page, user can not change units in measurement tools also can not insert text in search textbox!!
Anjelina,
OK, that was an issue with the use of dojo dijit dialog with is more of a modal approach. Here is a better route:
<!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">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dojox/layout/resources/ResizeHandle.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#map {
border: solid 1px #B5BCC7;
padding: 0;
}
#paneHeader,
#header {
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;
}
#header {
text-align: right;
}
#rightPane {
width: 150px;
margin: 0;
padding: 0;
}
#bufferDialogBtn,
#measureDialogBtn {
float: right;
}
#divFloatingPane {
z-index: 90;
top: 50px;
width: 238px;
height: 220px;
border: 1px solid black;
background-color: white;
visibility: hidden;
}
.dojoxFloatingPaneContent {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
/*font-weight: bold;*/
overflow: auto;
}
.dojoxFloatingPaneTitle{
color: white;
background-color: #76a2c5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
overflow: auto;
}
.claro .dojoxFloatingMinimizeIcon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVChTlVIhDoNAENyWalRtFQY0qh8AHKIkoO8DlRXoin4Cj0AgOd9UIflA+xA6Q7jkQhFlkuGWYYZd7tiN4yhEXdcnLBcwBkNqQA92YJPn+YfCFID5jPoGphRX0IIPhF5OEAR8870oitR1XfE8b3IYaK2lLEs/y7LjMAxPB4WCfqW5qiqxQzRTU0pR8yG9D7hwZomiiMtkMDBm8wyIGTAf+BNamIlwPxd/gx24dQlv7JkJ08nq0jPAfU5ssz3GItRxpAZs18ysqc0hnkWz+eA2/hoiXyTHZtKhdrvuAAAAAElFTkSuQmCC);
padding-right: 10px;
}
.dojoxDock {
visibility: hidden;
}
#divMeasurePane {
position: absolute;
top: 100px;
right: 100px;
width: 300px;
height: 320px;
visibility: hidden;
}
#divBufferPane {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 320px;
visibility: hidden;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, bufferDialog, circle, circleSymb, tb, featureLayer;
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",
"dojo/on",
"esri/toolbars/draw",
"esri/units",
"esri/dijit/Measurement",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojox/layout/FloatingPane",
"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, on, Draw, units, Measurement, registry
) {
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);
});
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();
map.on("load", function(evt) {
initToolbar(evt);
// 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.
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);
circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
on(dom.byId("clearGraphics"), "click", function() {
if (map) {
map.graphics.clear();
featureLayer.clearSelection();
dom.byId("messages").innerHTML = "";
}
});
});
esriConfig.defaults.io.proxyUrl = "/proxy/";
on(dom.byId("bufferDialogBtn"), "click", function() {
registry.byId("divBufferPane").show();
});
on(dom.byId("measureDialogBtn"), "click", function() {
registry.byId("divMeasurePane").show();
});
function initToolbar(evt) {
tb = new Draw(evt.map);
tb.on("draw-end", doBuffer);
on(dom.byId("drawBtn"), "click", function() {
tb.activate("point");
});
}
function doBuffer(evt) {
tb.deactivate();
circle = new Circle({
center: evt.geometry,
geodesic: true,
radius: dom.byId("distance").value,
radiusUnit: units[dom.byId("unit").value]
});
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;
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="float:right;">
<button id="bufferDialogBtn" type="button" data-dojo-type="dijit/form/Button">Buffer</button>
<button id="measureDialogBtn" type="button" data-dojo-type="dijit/form/Button">Measure</button>
</div>
<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>
<div id="divMeasurePane" data-dojo-type="dojox/layout/FloatingPane" data-dojo-props="resizable:true, dockable:true, closable:false, title:'Measuring Tools'">
<div id="measurementDiv"></div>
</div>
<div id="divBufferPane" data-dojo-type="dojox/layout/FloatingPane" data-dojo-props="resizable:true, dockable:true, closable:false, title:'Buffer Tool'">
<div><b>Buffer Parameters</b></div>
Distance:
<input type="text" id="distance" size="5" value="1" />
<select id="unit" style="width:100px;">
<option value="MILES">Miles</option>
<option value="FEET">Feet</option>
<option value="KILOMETERS">Kilometers</option>
<option value="METERS">Meters</option>
<option value="NAUTICAL_MILES">Nautical Miles</option>
<option value="YARDS">Yards</option>
</select>
<br /><br />
<span id="messages"></span>
<br /><br />
<button type="button" id="drawBtn" data-dojo-type="dijit/form/Button">Click On The Map</button>
<button type="button" id="clearGraphics" data-dojo-type="dijit/form/Button">Clear Graphics</button>
</div>
</body>
</html>