Thanks to a helpful person, I have a working example of a map with a QueryTask.
Now I want to add both Geolocation and a Locate Button. My attempts have been close but buggy. The following is my best effort.
I would greatly appreciate any assistance to add both features to the previous map.
<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html,body,#mapDiv,#mapDiv.container{
padding:20;
margin:;
height:650px;
width:650px;
}
#LocateButton {
position: absolute;
top: 200px;
left: 20px;
z-index: 50;
}
</style>
<script src="http://js.arcgis.com/3.13compact/"></script>
<script type="text/javascript">
// TODO
// zoom to 50 miles
// center map on geolocation, else ZIP code, else CalPoly
// Add Locate Button
// https://developers.arcgis.com/javascript/jssamples/widget_locate.html
//
// Add search location widget
// https://developers.arcgis.com/javascript/jshelp/intro_search_widget.html
//
// OR Add geocoder widget
// https://developers.arcgis.com/javascript/jshelp/tutorial_geocoder.html
// http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=widget_geocoder_tutorial
// remove duplicates nurseries
var map;
window.onload=function(){
require([
"esri/map",
"esri/arcgis/utils",
"esri/dijit/LocateButton", // locate button
"esri/geometry/webMercatorUtils", // geolocation
"esri/geometry/Point", // geolocation
"esri/layers/DynamicMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/symbols/SimpleMarkerSymbol",
"esri/InfoTemplate",
"dojo/_base/Color",
"dojo/ready",
"dojo/domReady!"
], function(Map, arcgisUtils, LocateButton, webMercatorUtils, Point, DynamicMapServiceLayer, ArcGISDynamicMapServiceLayer, Query, QueryTask, SimpleMarkerSymbol, InfoTemplate, Color, ready){
var createMapOptions = {
mapOptions: {
basemap: "streets",
center: [-120.696,37.372],
zoom: 10
}
};
//create map and add layer
arcgisUtils.createMap("bf27abedb4dd4197b0fd2237a56d1555", "mapDiv", createMapOptions).then(function (response) {
map = response.map;
executeQueryTask(dojo.byId('wholesaler_id').value);
});
//initialize query task
queryTask = new esri.tasks.QueryTask("https://services1.arcgis.com/0j6vZbECadDEXdAS/arcgis/rest/services/Retail_Nurseries/FeatureServer/0");
//initialize query
query = new Query();
query.returnGeometry = true;
query.outFields = ["name","street_address","city","state","zip_code","telephone","website"];
//initialize InfoTemplate
infoTemplate = new InfoTemplate();
infoTemplate.setTitle(getTextTitle);
infoTemplate.setContent(getTextContent);
function getTextTitle(graphic) {
return graphic.attributes.name;
}
function getTextContent(graphic) {
return (graphic.attributes.street_address + "<br/>"
+ graphic.attributes.city + ", "
+ graphic.attributes.state + " "
+ graphic.attributes.zip_code + "<br/>"
+ graphic.attributes.telephone
+ (String(graphic.attributes.website).length > 0
& graphic.attributes.website !== null
? "<br/><a href=\"" + graphic.attributes.website + "\" target=\"_blank\">website</a>"
: " "));
}
//create symbol for selected features
symbol = new SimpleMarkerSymbol();
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(10);
symbol.setColor(new Color([255,255,0,0.5]));
// geolocation
function zoomToLocation(location) {
var pt = webMercatorUtils.geographicToWebMercator(new Point(location.coords.longitude, location.coords.latitude));
map.centerAndZoom(pt, 10);
}
function showLocation(location) {
if (location.coords.accuracy <= 500) {
// the reading is accurate, do something
} else {
// reading is not accurate enough, do something else
}
}
function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("Location not provided");
break;
case error.POSITION_UNAVAILABLE:
alert("Current location not available");
break;
case error.TIMEOUT:
alert("Timeout");
break;
default:
alert("unknown error");
break;
}
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
navigator.geolocation.watchPosition(showLocation, locationError);
}
// geolocate
var geoLocate = new LocateButton({
map: mapDiv
}, "LocateButton");
geoLocate.startup();
});
}
function executeQueryTask(wholesaler_id) {
//set query based on what user typed in for id;
query.where = "wholesaler_id IN(" + wholesaler_id + ")";
// query.where = "wholesaler_id = " + wholesaler_id;
// query.where = "wholesaler_id IN (1,2,3)";
//execute query
queryTask.execute(query,showResults);
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = featureSet.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(symbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
}
}
</script>
</head>
<body>
<h1>SelecTree Web Map</h1>
Enter wholesaler_id (0, 1, 2, or 3):
<input type="text" id="wholesaler_id" value="1,2,3">
<input type="button" value="Get Nurseries" onclick="executeQueryTask(dojo.byId('wholesaler_id').value);">
<div id="mapDiv" class="map"><div id="LocateButton"></div></div>
</body>
</html>
