SHARE
TWEET

Untitled

a guest Dec 3rd, 2019 82 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top