0

I'm trying to create a data-driven visualization using a GeoJSONLayer with ArcGIS Javascript 4.14 using "esri/renderers/smartMapping/creators/color" on a field named "Number" (specifically a Class Break Render following this and the documentation) but I'm getting a 404 error and the layer is not rendering properly (only default color). The JSON layer, placed in my root folder, is (I guess) a proper JSON working with other renderers but not with this one.

JSON (sample)

{
    "type": "FeatureCollection",
    "features": [
        {
            "id": "12",
            "type": "Feature",
            "properties": {
                "ISO": "DEU",
                "NAME_0": "Germany",
                "Number": 116,
                "Region": "Baden-Württemberg",
                "index": 12
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                9.651418686000056,
                                49.780555725000056
                            [.........]
                            [
                                8.682067871000072,
                                49.61891174300007
                            ]
                        ]
                    ]
                ]
            }
        },
..........


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>TEST</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }

      #sidebar {
      z-index: 99;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      width: 320px;
    }

    #text {
      color: white;
      padding: 3%;
    }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/dark/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/GeoJSONLayer",
  "esri/renderers/smartMapping/creators/color"
], function(Map, MapView, GeoJSONLayer, colorRendererCreator){


    const layer = new GeoJSONLayer({
        url: "output.json"
    });
    layer.opacity = 0.9;
    layer.title = "Title";


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

    const view = new MapView({
    map: map,
    container: "viewDiv",
    zoom: 5,
    center: [10, 50]
    });



    const params = {
      layer: layer,
      field: "Number",
      classificationMethod: "quantile",
      numClasses: 4,
      legendOptions: {
        title: "This is the title"
      }
    };

// generate the renderer and set it on the layer
    colorRendererCreator.createClassBreaksRenderer(params).then(function(response) {
  layer.renderer = response.renderer;
});

});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

The error is

https://localhost/output.json/generateRenderer?classificationDef=%7B%22type%22%3A%22classBreaksDef%22%2C%22breakCount%22%3A4%2C%22classificationField%22%3A%22Number%22%2C%22classificationMethod%22%3A%22esriClassifyQuantile%22%7D&where=1%3D1&f=json 404

What am I doing wrong?

Thanks in advance. m.

Improve this question

1 Answer 1

Reset to default
0

You're required to provide a reference to the view in which the layer is rendered when working with layers whose stats need to be queried on the client. This is always true of GeoJSONLayer and CSVLayer. 

const params = {
  layer: layer,
  view: view, // the MapView reference. This is required for GeoJSONLayer
  field: "Number",
  classificationMethod: "quantile",
  numClasses: 4,
  legendOptions: {
    title: "This is the title"
  }
};

Since version 4.13 of the ArcGIS JS API, you should always specify this parameter since the basemap param was deprecated.

Improve this answer
5
  • yes, replacing js.arcgis.com/4.14 with js.arcgis.com/next (if that's what you meant) doesn't change anything (still plain orange color).
    – mic
    Commented Mar 13, 2020 at 7:46
  • 1
    Ok. I just noticed the params don't have the view parameter. Can you provide a reference to the view where the layer is rendered?
    – Kristian
    Commented Mar 20, 2020 at 17:10
  • Yep, it worked! Although I still get the error in console and before rendering the colors the map appears default orange-ish and then, after a noticeable time, it switches to the color ramp. Any clue about why that happens? In the meanwhile (if this is another issue) you can formalize the comment as answer so I can accept it. Thanks.
    – mic
    Commented Mar 21, 2020 at 6:52
  • Can you post the exact error message in the console? If it's a 404, it just means it can't access a file at the path you're specifying. The flash from default to the color ramp is expected because you're adding the layer to the map before calling the smart mapping method. You can set the layer.visible to false, then switch it to true when the response comes back. That should help.
    – Kristian
    Commented Mar 24, 2020 at 16:59
  • The error is the same as the one above but I can see it surfing it How can I get the error and see the rendered json on the map? Regarding the flashing, I figured I had to work with layer visibility and wait for the response from the render but I'm not able to set it up correctly. How should I change the code above to render first and show layer then? (Sorry, not great in JS, I actually do everything in Python and only plot the final result). Again, apart from that error and my last question, you solved my problem so , I can accept it if you make it as a response. Thanks for your help.
    – mic
    Commented Mar 25, 2020 at 10:52

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.