|
POST
|
I have a featureLayer that may have a definition expression, controlled by a list of provider types. I am using Typeahead to create a list of values for the user to select from using the values from my provider field, which executes a find. Since there might be a filter already applied, I'd like to limit the choices in my list of values to only those that meet my current definition expression on my layer. It looks like layerDefinitions on my findParameters ought to allow me to use the same expression as I have already on my featureLayer. My findtask and parameters are defined as: app.findTask = new FindTask(config.findFeatureLayerUrl);
app.findParams = new FindParameters();
app.findParams.returnGeometry = true;
app.findParams.outSpatialReference = app.spatialReference;
app.findParams.layerIds = [0];
app.findParams.searchFields = ['NA_PROVIDER']; The layer I'm searching on is layer 0. I may or may not have a definition expression set. I want the list that typeahead is producing to be limited to only those that meet the current definition. The definition is dynamic, so I can just add it when I'm defining it initially. I've tried this: query(node).typeahead({
minLength:4,
items:10,
source: function(q, process) {
app.findParams.searchText = q;
var def = app.featureLayer.getDefinitionExpression();
if (def) {
app.findParams.layerDefinitions[0] = def;// error occurs here
}
app.findTask.execute(app.findParams).then(function(x) {
results = x;
process(x.map(function(a) {
return a.value;
}));
});
} I get an Uncaught TypeError: cannot set property '0' of null when attempting to the layerDefinitions. Either I don't have the right syntax for that, my definitionExpression from the featureLayer is too complicated (it is a where clause with several AND and ORs in it) or I can't set my layerDefinitions at this point in the code. I couldn't find any threads for findParameters and layerDefinitions, which tells me it isn't used much.
... View more
07-30-2015
09:09 AM
|
0
|
8
|
6174
|
|
POST
|
I'll just tell the users that's in the next release. Once I upgrade to 10.3, I'll just incorporate that into the Search widget. I want this to fire an infoWindow, but I always get confused between setContent and setFeatures. It seems like one or the other should work, but maybe this is failing because I'm not passing the right type of object. updater: function(x) { var geom = asGeom(findResult(results, x)); var feat = asFeatures(findResult(results, x)); centerZoom(map, geom); app.map.infoWindow.setTitle('Find Provider Result'); // map.infoWindow.setFeatures(feat); app.map.infoWindow.setContent(x); //this works, since x is just a string app.map.infoWindow.show(geom[0]); return x; }
... View more
07-29-2015
01:55 PM
|
0
|
0
|
2469
|
|
POST
|
I thought I'd tried this already before I posted my question. When I tried one more time, suddenly it decided to work. The only thing I don't like about this is that it seems like you have to hit "Enter", it doesn't work on a mouse click to pick it from the list. I figure that's how typeahead works and not something I'm missing in my code.
... View more
07-29-2015
10:09 AM
|
0
|
3
|
2469
|
|
POST
|
I really didn't expect to get this figured out so quickly. Sometimes I get lucky. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Auto Complete Find Example</title>
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Example found at http://odoe.net/blog/dojo-bootstrap-with-arcgis-javascript-api/
I made my example 4/29/2015
Tracy Schloss
-->
<style>
#map {
height: 800px;
}
#autocomplete {
position: fixed;
z-index: 99;
left: 75px;
top: 20px;
background-color: #fff;
padding: 10px;
border: 1px solid #e3e3e3;
}
</style>
<script>
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
}]
};
</script>
<script src="http://js.arcgis.com/3.11/"></script>
</head>
<body>
<script type=text/javascript>
require([
'esri/map',
'dojo/query',
'bootstrap/Typeahead',
'esri/tasks/FindParameters',
'esri/tasks/FindTask',
'esri/layers/FeatureLayer',
'esri/graphicsUtils',
'dojo/domReady!'
], function(
Map, query, Typeahead,
FindParameters, FindTask,
FeatureLayer,
graphicsUtils
) {
var pathName = "https://ogitest.oa.mo.gov";
// var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer';
var url = pathName + '/arcgis/rest/services/DSS/medProvider/MapServer';
var graphicsExtent = graphicsUtils.graphicsExtent;
/*
var asFeatures = function asFeatures(data) {
return [data.feature];
};
*/
var asGeom = function asGeom(data){
return [data.feature.geometry]
}
var findResult = function findResult(results, item) {
return results.filter(function(x) {
return x.value === item;
}).shift();
};
/*
var setExtent = function setExtent(map, features) {
return map.setExtent(features);
};
*/
var centerZoom = function centerZoom(map,features){
return map.centerAndZoom(features[0], 12);
}
var map = new Map('map', {
center: [-92.593, 38.5],
zoom: 7,
basemap: 'topo'
});
var featureLayer = new FeatureLayer(url+"/0", {
id:'featureLayer',
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ['*']
});
map.addLayer(featureLayer);
map.on('load', function() {
var findTask = new FindTask(url);
var params = new FindParameters();
params.returnGeometry = true;
params.outSpatialReference = map.spatialReference;
params.layerIds = [0];
params.searchFields = ['NA_PROVIDER'];
var results;
var node = document.getElementById('search');
query(node).typeahead({
source: function(q, process) {
params.searchText = q;
findTask.execute(params).then(function(x) {
results = x;
process(x.map(function(a) {
return a.value;
}));
});
},
updater: function(x) {
centerZoom(map,
asGeom(findResult(results, x)));
/*
setExtent(
map,
graphicsExtent(
asFeatures(findResult(results, x))
));
*/
return x;
}
});
});
})
</script>
<div id="map">
<div id="autocomplete">
<label>Search For Provider:</label><br/>
<input id="search" type="text" class="span4"></input>
</div>
</div>
</body>
</html>
... View more
07-29-2015
09:50 AM
|
0
|
5
|
2469
|
|
POST
|
I am using this example as my starting point: Dojo Bootstrap with ArcGIS JavaScript API - odoenet I am not in a position to upgrade our servers to 10.3 to take advantage of including a featureLayer in my Search widget, at least not in time to meet my current deadline. I'm hoping this code will do the trick for now. It takes the text the enters and provides a list of suggestions based on what they've typed. Once they select an item. the map centers on it. The user is likely to initiate a search while the map is still zoomed to the whole state, so I need it to both zoom and center. I'm not wrapping my head around how to modify this code to accomplish this. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Auto Complete Find Example</title>
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Example found at http://odoe.net/blog/dojo-bootstrap-with-arcgis-javascript-api/
-->
<style>
#map {
height: 500px;
}
#autocomplete {
position: fixed;
z-index: 99;
left: 75px;
top: 20px;
background-color: #fff;
padding: 10px;
border: 1px solid #e3e3e3;
}
</style>
<script>
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
}]
};
</script>
<script src="http://js.arcgis.com/3.11/"></script>
</head>
<body>
<script type=text/javascript>
require([
'esri/map',
'dojo/query',
'bootstrap/Typeahead',
'esri/tasks/FindParameters',
'esri/tasks/FindTask',
'esri/layers/FeatureLayer',
'esri/graphicsUtils',
'dojo/domReady!'
], function(
Map, query, Typeahead,
FindParameters, FindTask,
FeatureLayer,
graphicsUtils
) {
var pathName = "https://ogitest.oa.mo.gov";
// var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer';
var url = pathName + '/arcgis/rest/services/DSS/medProvider/MapServer';
var graphicsExtent = graphicsUtils.graphicsExtent;
var asFeatures = function asFeatures(data) {
return [data.feature];
};
var findResult = function findResult(results, item) {
return results.filter(function(x) {
return x.value === item;
}).shift();
};
var setExtent = function setExtent(map, features) {
return map.setExtent(features);
};
var map = new Map('map', {
center: [-92.593, 38.5],
zoom: 7,
basemap: 'topo'
});
var featureLayer = new FeatureLayer(url+"/0", {
id:'featureLayer',
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ['*']
});
map.addLayer(featureLayer);
map.on('load', function() {
var findTask = new FindTask(url);
var params = new FindParameters();
params.returnGeometry = true;
params.outSpatialReference = map.spatialReference;
params.layerIds = [0];
params.searchFields = ['NA_PROVIDER'];
var results;
var node = document.getElementById('search');
query(node).typeahead({
source: function(q, process) {
params.searchText = q;
findTask.execute(params).then(function(x) {
results = x;
process(x.map(function(a) {
return a.value;
}));
});
},
updater: function(x) {
setExtent(
map,
graphicsExtent(
asFeatures(findResult(results, x))
));
return x;
}
});
});
})
</script>
<div id="map">
<div id="autocomplete">
<label>Search For Provider:</label><br/>
<input id="search" type="text" class="span4"></input>
</div>
</div>
</body>
</html>
... View more
07-29-2015
09:10 AM
|
0
|
6
|
5961
|
|
POST
|
I still want the popup for selecting features for other reasons, though. I ended up setting my highlight symbol to the orange flag and set showInfoWindowOnSelect to false. It's opening the infoWindow, apparently, that's causing my yellow highlighted symbol. If I don't show it, then I'm only seeing the flag I want. It still shows up when I click to see the information, but that makes more sense than having two different symbols show up right when I search (one for the location and the 2nd that's the highlight from showInfoWindowOnSelect).
... View more
07-28-2015
02:34 PM
|
0
|
0
|
1606
|
|
POST
|
I came up with a workaround. When using a row renderer, I'm combining information from several attributes and formatting it to be more of a paragraph. It's really a grid that's one column wide. I added the ColumnHider extension. I took out the renderRow parameter, but was able to use the exact same function to render just one column. var dataGrid = new declare([Grid, Selection, Keyboard, ColumnResizer, ColumnHider]);
//providers in the sidebar
app.provGridColumns = [
{
field:'List',
name:'List',
label:'',
renderCell:renderRowFunction,
hidden:true
},
{
field: 'facility',
label: 'Provider',
hidden:true
},
{
field: 'compoundCell',
label: 'Address / Phone',
renderCell: renderCellFunction,
hidden:false
},
{
field: 'city',
label: 'City',
hidden:true
},
{ field: 'state',
label: 'State',
hidden:true
},
{
field: 'phone',
label: 'Phone',
hidden:true
},
{
field: 'specialty',
label: 'Specialty',
hidden:false
}
];
app.providerGrid = new dataGrid({
id: 'selectGrid',
selectionMode: 'single',
columns:app.provGridColumns,
loadingMessage: 'Loading data...',
noDataMessage: 'No providers available in this area.'
}, "providerDiv"); I included a few more columns to my grid, but made them hidden. Now my button is used to turn off the column the contains the paragraph style formatted attributes and turns on the columns with individual attributes. It gives me the results I was looking for. I still have a renderCell in the middle, but that's mostly an experiment to see how I can fit the most information into a sidebar. I may end up with a different combination of attributes, but at least I have a mechanism to do it. function toggle_GridTable() {
var head = app.providerGrid.get("showHeader");
if (app.providerGrid.columns[0].hidden){
app.providerGrid.columns[0].hidden = false;
app.providerGrid.columns[1].hidden = true;
app.providerGrid.columns[6].hidden = true;
} else {
app.providerGrid.columns[0].hidden = true;
app.providerGrid.columns[1].hidden = false;
app.providerGrid.columns[2].hidden = false;
app.providerGrid.columns[6].hidden = false;
}
if (head){
app.providerGrid.set("showHeader", false);
}else {
app.providerGrid.set("showHeader", true);
}
... View more
07-28-2015
10:08 AM
|
1
|
0
|
1342
|
|
POST
|
I have a dgrid that I had originally set up with a renderRow providerGrid = new dataGrid({ id: 'selectGrid', selectionMode: 'single', showHeader: false, renderRow: renderRowFunction, loadingMessage: 'Loading data...', noDataMessage: 'No providers available in this area.' }, "providerDiv"); When each row is rendered, it's based on several fields and each record is rather tall. I would like to be able to allow the user to see a tabular version, using the same grid, but just change how it's displayed. I haven't been able to figure out how to remove the renderRow parameter. I have a button that executes a function that will turn on the headers. I tried making a render function that just returned the object without doing any formatting, but that doesn't do anything. function toggle_GridTable() { providerGrid.set("showHeader", true); providerGrid.set('renderRow', renderNothing); } function renderNothing (obj, options){ return obj; }
... View more
07-27-2015
12:49 PM
|
0
|
2
|
3978
|
|
POST
|
I have a highlight symbol defined already. What I'm seeing is two symbols - the pin as well as second highlighted circle.
... View more
07-23-2015
12:25 PM
|
0
|
2
|
1606
|
|
POST
|
I wanted to be able to use my own icon for the Search widget, so I changed the source as: var searchTool = new Search ({
map:map,
minCharacters: 8,
countryCode: "US",
searchExtent:startExtent
}, dom.byId('searchDiv'));
var sources = [];
sources.push({
locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
singleLineFieldName: "SingleLine",
outFields: ["Addr_type"],
name: "World Geocode Service",
localSearchOptions: {
minScale: 300000,
distance: 50000
},
placeholder: "Enter an address or place",
highlightSymbol: new PictureMarkerSymbol(geoSymbol).setOffset(9, 18)
});
searchTool.set("sources", sources);
searchTool.startup(); I also have a popup defined as highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,255,0]), 2),new Color([255,255,0,0.5]));
highlightFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,200,0]), 2), new Color([255,255,0,0.50]));
var popup = new Popup({
markerSymbol: highlightMarkerSymbol}, domConstruct.create("div"));
map = new Map("mapDiv", {
infoWindow: popup,
basemap: "streets",
center: [-92.593, 38.5],
zoom: 7
}); I need the popup for other sections of my code. Every time I use the Search, I see both the orange flag I defined for the symbol, as well as the yellow highlighted circle I have defined in my popup. If I add the parameter enableHighlight:false to my definition, that removes my flag symbol only and I still have my yellow highlightMarkerSymbol. This is the opposite of what I want to happen. Am I missing a parameter in my Search constructor or misreading what some of the parameters are for?
... View more
07-23-2015
09:16 AM
|
0
|
4
|
5061
|
|
POST
|
Since you're replying to a 2 year old thread, a lot has changed since then, including updating to dGrid and AMD. Here's a sample of how I'm handling it now. queryTask_dGrid - JSFiddle
... View more
07-23-2015
08:17 AM
|
0
|
0
|
2363
|
|
POST
|
I put in an if statement to first check that the div contained the class and only toggled it if it did. This seems to have taken care of my problem. if (domClass.contains('specialtyDiv', 'div-visible')) { domClass.toggle('specialtyDiv', 'div-visible'); }
... View more
07-20-2015
01:00 PM
|
0
|
0
|
1165
|
|
POST
|
I've been using setOpacity and I've used this on both dynamic map services as well as feature layers. I have a dojo horizontal slider defined as: <div id="parcelOpacity"
data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="showButtons:'true', value:1, minimum:0, maximum:1">
Parcel Transparency
</div> I have a listener associated with it: on(registry.byId('parcelOpacity'), 'change', changeOpacity); This is the function: function changeOpacity(op) {
status_stateOwnParcelLayer.setOpacity(op);//this is an ArcGISDynamicMapServiceLayer
stateOwnFeatureLayer.setOpacity(op);//this is a featureLayer
}
... View more
07-20-2015
12:51 PM
|
1
|
0
|
2381
|
|
POST
|
I have a menu that creates a new dropdown once the user makes a selection. The contents of this dropdown are only appropriate for certain selections, so I don't want it displayed all the time. I have a Clear button that gets rid of the dropdown I created, but I still want to keep the original DIV I created, so I can populate it with new contents as needed. Once I have created the first dropdown, even if I use something like domConstruct.empty to get rid of the dropdown I make, the parent div never does resize back to how it was before I ever created the dropdown in the first place. I tried defining style that has visibility:hidden and display:none and using domClass.toggle to switch to a style that wouldn't occupy any height, but that doesn't work either. Do I have to remove the entire DIV I used for my dropdown and create a new one of those too? It doesn't seem like I should have to do this. Here's my HTML: <div class="panel-body">
<h5>Choose one:</h5>
<div id="categoryDiv" class="mySelect">
</div>
<h5 id="specHeader"></h5>
<div id="specialtyDiv" class="mySelect div-visible"> </div>
<div id="clearDiv" class="div-visible">
<button id="btnClearCat" type="button" class="btn btn-default" style="float:right;">Clear</button>
</div>
</div> My dropdown is actually a dgrid with a single column and is getting created with a click in another grid: var dataGrid = new declare([Grid, Selection]);
app.specDropDown = new dataGrid({
selectionMode: 'single',
store: currentMemory,
showHeader: false,
columns: {
"id": "id",
"name": "name",
"value": "value"
},
renderRow: renderCategoryRow
}, "specialtyDiv");
app.specDropDown.startup(); The clear button executes this function: //clears category filter on featureLayer
function removeDefinitionExpression(){
var whereClause= '1=1';
app.featureLayer.setDefinitionExpression(whereClause);
dom.byId('subHeader').innerHTML = 'Medicaid Provider Search';
dom.byId('gridHeader').innerHTML = "Providers in this area:"
searchType = "";
domClass.toggle('clearDiv', 'div-visible');
app.dropDown.clearSelection();
domConstruct.empty(dom.byId('specialtyDiv'));
domClass.toggle('specialtyDiv', 'div-visible');
dom.byId('specHeader').innerHTML = "";
app.map.infoWindow.hide();
initGridUpdate();
} Here is the style I set for div-visible: .div-visible {
visibility: hidden;
display:none;
height:0px;
} It works properly as far as getting rid of the dropdown contents. A new one is created in the place. It's just that once the space is allocated initially, I can never get it back to it's initial height. When I examine specialtyDiv, I can see that most of the style parameters I'm attempting to add are crossed out, so I know they're overwritten somewhere else.
... View more
07-17-2015
10:09 AM
|
0
|
1
|
3883
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 06-02-2017 02:38 PM | |
| 2 | 03-18-2022 10:14 AM | |
| 2 | 02-18-2016 06:28 AM | |
| 1 | 03-18-2024 07:29 AM | |
| 4 | 08-02-2023 06:08 AM |
| Online Status |
Offline
|
| Date Last Visited |
02-25-2025
01:56 PM
|