| <!DOCTYPE html> | |
| <html dir="ltr"> | |
| <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>Basic Search Widget</title> | |
| <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> | |
| <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> | |
| <style> |
This example gets around the map's need for a height when you don't know the height of the map, but you do know the height of the header and footer. Set the map container's position: absolute and the top and bottom properties to account for the header and footer heights.
Firefox seems to treat box-sizing differently, so add 4 px to the map's top/bottom to account for the header/footer borders
| .esriLayerSearcher .esriLayerSearcherClearFloat { | |
| clear: both; | |
| display: block; | |
| overflow: hidden; | |
| visibility: hidden; | |
| width: 0; | |
| height: 0; | |
| } | |
| .simpleLayerSearcher .esriLayerSearcherContainer *, |
Demonstrates the ability to repeat a map horizontally.
The map's container's container gets a clip dynamically added to it such that repeated tiles are not shown. To get rid of the clip, we just need:
.map .container .container {
clip: inherit !important;
}
Note: Only the basemap layers will be repeated. The data layers will appear once.
| /* all this is around line 334 of SQLQuery/Widget.js */ | |
| // option 1 is to query the rest endpoint for unique values. | |
| // option 2 is to store featureSet clientside (1000 limit) | |
| var tokenRequest = esri.id.findCredential(this.activeInfo.fLayerUrl); // THIS IS NEW! | |
| if (!this.activeInfo.featureSet) { | |
| dojoXhr(this.activeInfo.fLayerUrl + '/query', { | |
| query: { | |
| where: '1=1', | |
| outFields: fieldInfo.name, |
This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:
| <!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></title> | |
| <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css"> | |
| <style> | |
| html, body, #map { | |
| height: 100%; width: 100%; margin: 0; padding: 0; |
This is a workaround to add line breaks to the Label Layer
NOTE: I can't figure out a way to return all the labels for a Feature Layer here, unfortunately. The Label Layer only returns the labels that will fit into their elements, or not conflict with other labels, as calculated based on the original, single-line label. Splitting these labels into multiple lines might reduce conflicts, or allow them to fit properly within their polygons, but because they were conflicted out in the first place, we never see them.
| <!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>Feature Layer Multi-Line Labels</title> | |
| <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css"> | |
| <style> | |
| html, body, #map { | |
| height: 100%; width: 100%; margin: 0; padding: 0; |
| concat: { | |
| options: { | |
| banner: 'require({\ncache: {\n', | |
| process: function(src, filepath) { | |
| var returnStr = '// Source: ' + filepath + '\n'; | |
| if (filepath.indexOf('.js') > 0) { | |
| // add file name | |
| returnStr += '\'' + filepath.replace('js/', '').replace('.js', '') + '\': '; | |
| // add function and file text | |
| returnStr += 'function() {\n' + src + '}'; |