|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<!--The viewport meta tag is used to improve the presentation and behavior of the samples |
|
on iOS devices--> |
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> |
|
<title>Select with feature layer</title> |
|
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css"> |
|
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> |
|
<style> |
|
html, body, #mapDiv { |
|
padding: 0; |
|
margin: 0; |
|
height: 100%; |
|
} |
|
#messages{ |
|
background-color: #fff; |
|
box-shadow: 0 0 5px #888; |
|
font-size: 1.1em; |
|
max-width: 15em; |
|
padding: 0.5em; |
|
position: absolute; |
|
right: 20px; |
|
top: 20px; |
|
z-index: 40; |
|
} |
|
#header-div{ |
|
font-family: helvetica, serif; |
|
position: relative; |
|
background: #000000; |
|
color: #ffffff; |
|
width: 100%; |
|
height: 50px; |
|
display:inline-block; |
|
vertical-align:middle; |
|
line-height: 50px; |
|
padding-left: 8px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="header-div">Click on the map to start a query.</div> |
|
<div id="mapDiv"></div> |
|
</body> |
|
|
|
<script src="http://js.arcgis.com/3.9/"></script> |
|
<script> |
|
var map; |
|
require([ |
|
"esri/map", "esri/tasks/QueryTask", |
|
"esri/tasks/query", "esri/geometry/Circle", |
|
"esri/graphic", "esri/symbols/SimpleMarkerSymbol", |
|
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", |
|
"esri/config", "esri/Color", "dojo/dom", "dojo/domReady!" |
|
], function( |
|
Map, QueryTask, |
|
Query, Circle, |
|
Graphic, SimpleMarkerSymbol, |
|
SimpleLineSymbol, SimpleFillSymbol, |
|
esriConfig, Color, dom |
|
) { |
|
map = new Map("mapDiv", { |
|
basemap: "streets", |
|
center: [-104.9, 39.74], |
|
zoom: 11 |
|
}); |
|
|
|
// Create a query task pointing at a subset of RTD Bus Stops |
|
var queryTask = new QueryTask("http://services.arcgis.com/IZtlGBUe4KTzLOl4/ArcGIS/rest/services/BPX_RTD_BusStops3/FeatureServer/0"); |
|
|
|
// 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]) |
|
); |
|
|
|
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]) |
|
); |
|
|
|
// When the map is clicked create a buffer around the click point of the specified distance. |
|
map.on("click", function(evt){ |
|
map.graphics.clear(); |
|
|
|
var circle = new Circle({ |
|
center: evt.mapPoint, |
|
geodesic: true, |
|
radius: 6, |
|
radiusUnit: "esriMiles" |
|
}); |
|
map.graphics.add(new Graphic(circle, circleSymb)); |
|
|
|
var query = new Query(); |
|
query.geometry = evt.mapPoint; |
|
query.distance = 6; |
|
query.units = "miles"; |
|
query.returnGeometry = true; |
|
query.outSpatialReference = map.spatialReference; |
|
query.spatialRelationship = Query.SPATIAL_REL_CONTAINS; |
|
|
|
queryTask.execute(query, function(response) { |
|
var features = response.features; |
|
|
|
for (var i = 0; i < features.length; i++) { |
|
var feature = features[i]; |
|
feature.setSymbol(symbol); |
|
map.graphics.add(feature); |
|
} |
|
}, function(error) { |
|
console.log("Got an error " + error); |
|
}); |
|
}); |
|
}); |
|
</script> |
|
</html> |