Guest User

Untitled

a guest
Dec 3rd, 2019
86
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta
  6. name="viewport"
  7. content="initial-scale=1,maximum-scale=1,user-scalable=no"
  8. />
  9. <title>Data-driven continuous size - 4.13</title>
  10.  
  11. <link
  12. rel="stylesheet"
  13. href="https://js.arcgis.com/4.13/esri/themes/dark-green/main.css"
  14. />
  15. <script src="https://js.arcgis.com/4.13/"></script>
  16.  
  17. <style>
  18. html,
  19. body,
  20. #viewDiv {
  21. padding: 0;
  22. margin: 0;
  23. height: 100%;
  24. width: 100%;
  25. }
  26. </style>
  27.  
  28. <script>
  29. require([
  30. "esri/Map",
  31. "esri/views/MapView",
  32. "esri/layers/FeatureLayer",
  33. "esri/widgets/Legend"
  34. ], function(Map, MapView, FeatureLayer, Legend) {
  35. const defaultSym = {
  36. type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
  37. color: [0, 0, 0, 0],
  38. outline: {
  39. // autocasts as new SimpleLineSymbol()
  40. color: "#71de6f",
  41. width: 1
  42. }
  43. };
  44.  
  45. /*****************************************************************
  46. * Set a size visual variable on the renderer. Size visual variables
  47. * create continuous ramps that map low data values to small icons
  48. * and high data values to large icons. Features
  49. * with data values in between the min and max data values are assigned
  50. * a size proportionally between the min and max sizes specified in
  51. * `minSize` and `maxSize` or `stops`.
  52. *****************************************************************/
  53.  
  54. const renderer = {
  55. type: "simple", // autocasts as new SimpleRenderer()
  56. symbol: defaultSym,
  57. visualVariables: [
  58. {
  59. type: "size",
  60. field: "REITINGAS2015_LT",
  61. // normalizationField: "SAVIVALDYBE",
  62. legendOptions: {
  63. title: "% population in poverty by county"
  64. },
  65. stops: [
  66. {
  67. value: 25,
  68. size: 4,
  69. label: "<15%"
  70. },
  71. {
  72. value: 50,
  73. size: 12,
  74. label: "25%"
  75. },
  76. {
  77. value: 100,
  78. size: 20,
  79. label: ">35%"
  80. }
  81. ]
  82. }
  83. ]
  84. };
  85.  
  86. const povLayer = new FeatureLayer({
  87. url:
  88. "https://services.arcgis.com/fFwZ4t9mPyCe14FA/arcgis/rest/services/HBContent_RTNGAS15/FeatureServer",
  89. renderer: renderer,
  90. title: "Mokyklų reitingas 2015 m.: ",
  91. popupTemplate: {
  92. // autocasts as new PopupTemplate()
  93. title: "{MOKYKLOS_ID}, {MOKYKLA}",
  94. content:
  95. "Visu VBE vidurkis {REITINGAS2015_LT}.",
  96. fieldInfos: [
  97. {
  98. fieldName: "REITINGAS2015_LT",
  99. format: {
  100. digitSeparator: true,
  101. places: 0
  102. }
  103. },
  104.  
  105. ]
  106. }
  107. });
  108.  
  109. const map = new Map({
  110. basemap: "dark-gray",
  111. layers: [povLayer]
  112. });
  113.  
  114. const view = new MapView({
  115. container: "viewDiv",
  116. map: map,
  117. center: [-85.0502, 33.125524],
  118. zoom: 6
  119. });
  120.  
  121. /******************************************************************
  122. *
  123. * Add layers to layerInfos on the legend
  124. *
  125. ******************************************************************/
  126.  
  127. view.ui.add(
  128. new Legend({
  129. view: view
  130. }),
  131. "top-right"
  132. );
  133. });
  134. </script>
  135. </head>
  136.  
  137. <body>
  138. <div id="viewDiv"></div>
  139. </body>
  140. </html>
RAW Paste Data