0

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.

enter image description here

  • 1
    Can you show us the start of the script where you define the modules to use? – Marcelo Villa Sep 17 at 14:07
  • Yep, just added them. – gwydion93 Sep 17 at 14:11
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()).

  • This seems like it should work, but I am getting ane error: GET https://js.arcgis.com/3.24/esri/layers/GeoJSONLayer.js net::ERR_ABORTED 404 – gwydion93 Sep 17 at 16:43
  • What version of the API are you using? It seems like you are using 3.x but GeoJSONLayer is only implemented in 4.x. – Marcelo Villa Sep 17 at 16:54
  • Yep, I'm using 3.x. Is there a way to do this (something similar) using the 3.x API? – gwydion93 Sep 17 at 17:07
  • 1
    I'd ask a new question because other people can give a more relevant answer than me. However, if it is not too big, I'd publish it as a service or upload it to ArcGIS Online and consume it as a FeatureLayer. Other option is to read the GeoJSON and create a FeatureSet and ultimately a FeatureLayer so you can do it on the fly rather than storing it on AGOL. – Marcelo Villa Sep 17 at 20:43
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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