Add a local GeoJSON file as a layer with GeoJsonLayer

Question

I turned a state boundary feature class into a geojson file called region2_boundary.json:

 {
  "type" : "FeatureCollection",
  "crs" : {
    "type" : "name",
    "properties" : {
      "name" : "ESRI:102008"
    }
  },
  "features" : [
    {
      "type" : "Feature",
      "id" : 1,
      "geometry" : {
        "type" : "Polygon",
        "coordinates" : [
          [
            [
              1708004.4871000014,
              329793.41640000045
            ],
           ....
  }

I have placed it into my Scripts folder in my ASP.Net app at the same level as my app.js. I am trying to bring it in as a layer in my app.js code, but there seems to be a problem. I keep getting the error:

Uncaught ReferenceError: GeoJsonLayer is not defined

I am thinking that I am just using a bad filepath/url in my boundaries variable. Any suggestions on how to get this simple json file added as a layer or how to resolve this error?

require([
  "esri/map",
  "esri/basemaps",
  "esri/dijit/BasemapToggle",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/tasks/ImageServiceIdentifyTask",
  "esri/tasks/ImageServiceIdentifyParameters",
  "esri/layers/WebTiledLayer",
  "esri/dijit/Search",
  "esri/config",
  "esri/request",
  "esri/tasks/IdentifyTask",
  "esri/tasks/IdentifyParameters",
  "esri/tasks/query",
  "esri/tasks/QueryTask",
  "dojo/json",
  "dojo/promise/all",
  "dojo/domReady!"], function(
    Map,
    esriBasemaps,
    BasemapToggle,
    ArcGISDynamicMapServiceLayer,
    ImageServiceIdentifyTask,
    ImageServiceIdentifyParameters,
    WebTiledLayer,
    Search,
    esriConfig,
    esriRequest,
    IdentifyTask,
    IdentifyParameters,
    Query,
    QueryTask,
    JSON,
    all) {
    ...
    var boundaries = "./region2_boundary.json";
    var geoJsonLayer1 = new GeoJsonLayer({
        data: boundaries
    });
    ...
    map = new esri.Map("map", {
        //basemap: "streets",
        basemap: "topo",
        center: [-66.664513,18.200178], //PR
        zoom: 9,
        layers: [geoJsonLayer1]
    });

EDIT I have added my dependencies above.

Answer 1

I will assume that you are using the 4.x version of the API since it seems GeoJSONLayer was implemented in 4.11.

Remember that you have to define the modules and classes you will use on top of your script. I see you are calling several modules and classes but GeoJsonLayer is not listed (hence the error you are getting). If you take a look at the documentation, you will see that you need to integrate the following piece of code:

require(["esri/layers/GeoJSONLayer"], function(GeoJSONLayer) { /* code goes here */ });

Also, note that it is GeoJSONLayer and not GeoJsonLayer (althought you could name it anything you want inside function()).

Answer 2

To answer my own question, I was already using arcGIS Javascript API version 3.29. The answer above obviously will not work and I had too many other dependencies using that version to change it at this point. What I found was this: geojson-layer-js . It can be downloaded from Github but requires that you bring in Terraformer as well. I added the geojsonlayer.js to an src folder in my Asp.Net app and created a 'vendor' folder for the Terraformer stuff. I should not that some styling and events handling had to be done in that geojsonlayer.js file and the layers should already be in SpatialReference of wkid: 4326 or have no projection at all. I had to use some esri components like SimpleMarkerSymbol() and SimpleRenderer in my app.js file:

var riverine_symbol = new SimpleMarkerSymbol();
riverine_symbol.style = SimpleMarkerSymbol.STYLE_SQUARE;
riverine_symbol.setSize(8);
riverine_symbol.setColor(new Color([255, 255, 0, 0.5]));

var rivJson = {
    //"type": "simple",
    "label": "Riverine",
    "symbol": riverine_symbol
};
var riv_renderer = new SimpleRenderer(rivJson);

Then, when loading my map, I added the layer like this:

var geoJsonLayer4 = new GeoJsonLayer({
    url: "./data/riv_gauges_parsed.json",
    renderer: riv_renderer
});

Its a little tricky but doable. If you are reading this, I highly recommend using version 4.1 and up of the API as the tools for this are way easier.