Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Data-driven continuous size - 4.13</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/dark-green/main.css"
    />
    <script src="https://js.arcgis.com/4.13/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/Legend"
      ], function(Map, MapView, FeatureLayer, Legend) {
        const defaultSym = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          color: [0, 0, 0, 0],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: "#71de6f",
            width: 1
          }
        };

        /*****************************************************************
         * Set a size visual variable on the renderer. Size visual variables
         * create continuous ramps that map low data values to small icons
         * and high data values to large icons. Features
         * with data values in between the min and max data values are assigned
         * a size proportionally between the min and max sizes specified in
         * `minSize` and `maxSize` or `stops`.
         *****************************************************************/

        const renderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: defaultSym,
          visualVariables: [
            {
              type: "size",
              field: "REITINGAS2015_LT",
             // normalizationField: "SAVIVALDYBE",
              legendOptions: {
                title: "% population in poverty by county"
              },
              stops: [
                {
                  value: 25,
                  size: 4,
                  label: "<15%"
                },
                {
                  value: 50,
                  size: 12,
                  label: "25%"
                },
                {
                  value: 100,
                  size: 20,
                  label: ">35%"
                }
              ]
            }
          ]
        };

        const povLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/fFwZ4t9mPyCe14FA/arcgis/rest/services/HBContent_RTNGAS15/FeatureServer",
          renderer: renderer,
          title: "Mokyklų reitingas 2015 m.: ",
          popupTemplate: {
            // autocasts as new PopupTemplate()
            title: "{MOKYKLOS_ID}, {MOKYKLA}",
            content:
              "Visu VBE vidurkis {REITINGAS2015_LT}.",
            fieldInfos: [
              {
                fieldName: "REITINGAS2015_LT",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },

            ]
          }
        });

        const map = new Map({
          basemap: "dark-gray",
          layers: [povLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-85.0502, 33.125524],
          zoom: 6
        });

        /******************************************************************
         *
         * Add layers to layerInfos on the legend
         *
         ******************************************************************/

        view.ui.add(
          new Legend({
            view: view
          }),
          "top-right"
        );
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>