renderer.fromJSON

deleted-user-wcpelUUf_XXx · ‎05-21-2019

I am trying to convert a layer back to its original drawing,after changing it.

the service include the layer in json form(i think) i tried both the fromJSON func and rewriting it manually but I think there is something wrong with the way i wrote it.

heres a codepen:

https://codepen.io/segev-salman/pen/MdEbwv

*is there a function to revertback to the original drawing or do i have to change the renderer with the full info inside?

RobertScheitlin__GISP · ‎05-21-2019

Then just clone the original renderer for latter use:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Heat-map creator</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <style>
    #rendPanel {
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .esri-button {
      margin: 2px;
    }

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

  <!-- <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> -->
  <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    var origRend;
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/smartMapping/creators/heatmap"
    ], function (Map, MapView, FeatureLayer, heatmapRendererCreator) {

      var pov = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1",
        minScale: 40000000,
        maxScale: 4000
      });

      var TF = new FeatureLayer({
        url: "https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
      });

      //apply HM to layer      
      function apply(result) {
        origRend = TF.renderer.clone();
        TF.renderer = result.renderer;
      };

      function remove() {
        console.log("removing")
        TF.renderer = origRend;
      }

      var map = new Map({
        basemap: "gray",
        layers: [pov, TF]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-102.370576, 40.172530],
        zoom: 5
      });

      var heatmapParams = {
        layer: TF,
        basemap: map.basemap,
        field: "adlt",
        view: view
      };

      document.getElementById("butt-1").addEventListener("click", function () {
        heatmapRendererCreator.createRenderer(heatmapParams).then(apply)
      });

      document.getElementById("butt-2").addEventListener("click", function () {
        remove();
      });

      view.ui.add("rendPanel", "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="rendPanel" class="esri-widget">
    <button id="butt-1" class="esri-button">
      create Heatmap
    </button>
    <button id="butt-2" class="esri-button">
      remove Heatmap
    </button>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎05-21-2019

Segev,

Here is your code working (with some UI changes):

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Heat-map creator</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <style>
    #rendPanel {
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .esri-button {
      margin: 2px;
    }

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

  <!-- <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> -->
  <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/smartMapping/creators/heatmap"
    ], function (Map, MapView, FeatureLayer, heatmapRendererCreator) {

      var pov = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1",
        minScale: 40000000,
        maxScale: 4000
      });

      var TF = new FeatureLayer({
        url: "https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
      });

      //apply HM to layer      
      function apply(result) {
        console.log("applying")
        TF.renderer = result.renderer;
      };

      function remove() {
        console.log("removing")
        /////instead of this
        TF.renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: [0, 197, 255, 255],
            size: 7,
            outline: {
              color: [255, 255, 255, 255],
              width: 0.75
            }
          }
        }
      }

      var map = new Map({
        basemap: "gray",
        layers: [pov, TF]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-102.370576, 40.172530],
        zoom: 5
      });

      var heatmapParams = {
        layer: TF,
        basemap: map.basemap,
        field: "adlt",
        view: view
      };

      document.getElementById("butt-1").addEventListener("click", function () {
        heatmapRendererCreator.createRenderer(heatmapParams).then(apply)
      });

      document.getElementById("butt-2").addEventListener("click", function () {
        remove();
      });

      view.ui.add("rendPanel", "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="rendPanel" class="esri-widget">
    <button id="butt-1" class="esri-button">
      create Heatmap
    </button>
    <button id="butt-2" class="esri-button">
      remove Heatmap
    </button>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

deleted-user-wcpelUUf_XXx · ‎05-21-2019

Robert,

this is exactly what i wanted to do, but I still want to know about the fromJSON or a different solution to handle multiple layers with different symbology.
lets say i have a select with three point layers so i could make a heatmap from each individually.

what would you do if you'd want the layers to go back to their original symbology.

i know you can just make a new FeatureLayer and add it but what if I gave the user the ability to query the layer and dont want to lose that info.

RobertScheitlin__GISP · ‎05-21-2019

Then just clone the original renderer for latter use:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Heat-map creator</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <style>
    #rendPanel {
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .esri-button {
      margin: 2px;
    }

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

  <!-- <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> -->
  <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    var origRend;
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/smartMapping/creators/heatmap"
    ], function (Map, MapView, FeatureLayer, heatmapRendererCreator) {

      var pov = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1",
        minScale: 40000000,
        maxScale: 4000
      });

      var TF = new FeatureLayer({
        url: "https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
      });

      //apply HM to layer      
      function apply(result) {
        origRend = TF.renderer.clone();
        TF.renderer = result.renderer;
      };

      function remove() {
        console.log("removing")
        TF.renderer = origRend;
      }

      var map = new Map({
        basemap: "gray",
        layers: [pov, TF]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-102.370576, 40.172530],
        zoom: 5
      });

      var heatmapParams = {
        layer: TF,
        basemap: map.basemap,
        field: "adlt",
        view: view
      };

      document.getElementById("butt-1").addEventListener("click", function () {
        heatmapRendererCreator.createRenderer(heatmapParams).then(apply)
      });

      document.getElementById("butt-2").addEventListener("click", function () {
        remove();
      });

      view.ui.add("rendPanel", "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="rendPanel" class="esri-widget">
    <button id="butt-1" class="esri-button">
      create Heatmap
    </button>
    <button id="butt-2" class="esri-button">
      remove Heatmap
    </button>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

deleted-user-wcpelUUf_XXx · ‎05-21-2019

thank you so much that will work!

deleted-user-wcpelUUf_XXx · ‎05-22-2019

Robert,

You used the " class="esri-widget"" for the panel.
Does that mean Its possible to use the Expand function on it?

I am using this as an example:

https://developers.arcgis.com/javascript/latest/sample-code/widgets-expand/index.html

but Im not sure how to declare the panel or if its possible at all.

RobertScheitlin__GISP · ‎05-22-2019

Sure just use:

      var bgExpand = new Expand({
        view: view,
        content: document.getElementById("rendPanel")
      });
      view.ui.add(bgExpand, "top-right");‍‍‍‍‍