0

I am trying to build a row of buttons on the top of a page which changes the feature layer being viewed. I am using sample code from here: https://blogs.esri.com/esri/arcgis/2016/01/25/3d-visualization-working-with-objects-paths-and-extrusion/

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Number of Charters by State</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="Map.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0beta3/"></script>

  <script>
    require([
      "esri/Map",
      "esri/Color",
      "esri/views/SceneView",
      "esri/layers/FeatureLayer",
      "esri/symbols/PolygonSymbol3D",
      "esri/symbols/ExtrudeSymbol3DLayer",
      "esri/renderers/SimpleRenderer",
      "dojo/domReady!"
    ], function(Map, Color, SceneView, FeatureLayer, PolygonSymbol3D,
      ExtrudeSymbol3DLayer, SimpleRenderer) {

      //Create map
      var map = new Map({
        basemap: "dark-gray"
      });

      //Create SceneView for 3d visualization
      var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
          //central meridian, lattitude, zoom
          position: [-105, 18, 9000000],
          tilt: 15,
          heading: 0
        }
      });

      //Create featureLayer and add to the map
      var featureLayer = new FeatureLayer({
        url: "http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/State_Models/FeatureServer/0"
      });
      map.add(featureLayer);

      //Create the Renderer for the featureLayer,
      var extrudePolygonRenderer = new SimpleRenderer({
        symbol: new PolygonSymbol3D({
          symbolLayers: [new ExtrudeSymbol3DLayer()]
        }),
        visualVariables: [{
          type: "sizeInfo",
          field: "NOCHTRS",
          minSize: 40000,
          maxSize: 1000000,
          minDataValue: 1,
          maxDataValue: 1000
        }, {
          type: "colorInfo",
          field: "NOCHTRS",
          minDataValue: 1,
          maxDataValue: 1000,
          colors: [ "white", "maroon" ]
        }]
      });

      featureLayer.renderer = extrudePolygonRenderer;
    });
  </script>
</head>

<body>
<!-- buttons will be used to change the data accessed in the frame below, -->
  <div>
      <button type="button">About Charters</button>
      <button type="button">Charters by State</button>
      <button type="button">Charters by County</button>
      <button type="button">Charters by Urbanized Areas</button>
      <button type="button">Individual Schools</button>
      <button type="button">Data Access</button>
  </div>  
  <div id="viewDiv">
  </div>    
</body>
</html>

Line 51 contains the feature layer which I am currently viewing. What would be the best process to use so that each time a different button is clicked a different feature layer is displayed?

I am not a novice to HTML but I don't practice my coding skills regularly either.

2
  • Do you mean a different layer or rendering a different field within that particular Feature Layer
    – kenbuja
    Commented Apr 12, 2016 at 18:58
  • I would like to be able to do both, but for now I am concerned with selecting a different layer.
    – SteveC
    Commented Apr 12, 2016 at 20:01

1 Answer 1

1

This is a very simple way to do what you need: https://output.jsbin.com/gijokewena

You just define an array or object of layers with url and renderer (if it's needed) and then a function that load one of the layers using an id or key.

I hope this help you.

5
  • That seems to do the trick. Thank you. Now I need to speed up the rendering time.
    – SteveC
    Commented Apr 12, 2016 at 23:49
  • The problem is not the rendering time, but the download time, this because the big data size. The amount of data that is transmiting in that service is huge. Is like 10 MB I guess. If the amount of data is smaller, then the transmisión time is less.
    – edanmegu
    Commented Apr 13, 2016 at 14:41
  • Can you suggest strategies to accomplish this? I am thinking I may want to simplify polygons in desktop and republish the layer. Any other suggestions?
    – SteveC
    Commented Apr 13, 2016 at 15:17
  • Yes, simplify the poligons is one way to do that. Other approach is to use maxAllowableOffset. You can find some about that here: developers.arcgis.com/javascript/jshelp/…
    – edanmegu
    Commented Apr 13, 2016 at 16:53
  • Great suggestion. Simplifying polygons resulted in a great improvement. I will work on the offset next. Thanks for the guidance.
    – SteveC
    Commented Apr 16, 2016 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.