[GIS] Can’t add GeoJSON layer to ArcGis js 4.4

arcgis-servergeojsonjavascript

I am new to ArcGis. I created a JSON service that creates a GeoJSON file. I ran the output through GeoJSONLint and it is exactly what I'm expecting and the point features show up on their map.

Here's my GeoJSON:

{
    "metadata": {
        "title": "Hurricane Track"
    },
    "type": "FeatureCollection",
    "features": [{
        "properties": {
            "strength": "#initial",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>Advisory Information<\/td><\/tr> \n\t   \t        <tr>
<td nowrap>Valid at:  8:00 PM EDT September 07, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 21.3 N, -72.4 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 145 knots (165 mph) <\/td>
<\/tr> \n\t   \t        <tr><td nowrap>Wind Gusts: 175 knots (200 mph) 
<\/td><\/tr> \n                        <tr><td nowrap>Motion: WNW 
<\/td><\/tr>\n                        <tr><td nowrap>Minimum Pressure: 
920 mb <\/td><\/tr>\n\t       "
        },
        "id": 1,
        "type": "Feature",
        "geometry": {
            "coordinates": [-72.4, 21.3],
            "type": "Point"
        }
    }, {
        "properties": {
            "strength": "#m",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>12 hr Forecast<\/td><\/tr> \n\t   \t        <tr><td 
nowrap>Valid at:  8:00 AM EDT September 08, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 21.8 N, -74.4 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 145 knots (165 mph) <\/td>
<\/tr> \n\t   \t        <tr><td nowrap>Wind Gusts: 175 knots (200 mph) 
<\/td><\/tr> \n                        <!-- HIDE_MOTION -->\n                        
<!-- HIDE_PRES -->\n\t       "
        },
        "id": 2,
        "type": "Feature",
        "geometry": {
            "coordinates": [-74.4, 21.8],
            "type": "Point"
        }
    }, {
        "properties": {
            "strength": "#m",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>24 hr Forecast<\/td><\/tr> \n\t   \t        <tr><td 
nowrap>Valid at:  8:00 PM EDT September 08, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 22.3 N, -76.7 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 140 knots (160 mph) <\/td>
<\/tr> \n\t   \t        <tr><td nowrap>Wind Gusts: 170 knots (195 mph) 
<\/td><\/tr> \n                        <!-- HIDE_MOTION -->\n                        
<!-- HIDE_PRES -->\n\t       "
        },
        "id": 3,
        "type": "Feature",
        "geometry": {
            "coordinates": [-76.7, 22.3],
            "type": "Point"
        }
    }, {
        "properties": {
            "strength": "#m",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>36 hr Forecast<\/td><\/tr> \n\t   \t        <tr><td 
nowrap>Valid at:  8:00 AM EDT September 09, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 22.9 N, -78.6 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 135 knots (155 mph) <\/td>
<\/tr> \n\t   \t        <tr><td nowrap>Wind Gusts: 165 knots (190 mph) 
<\/td><\/tr> \n                        <!-- HIDE_MOTION -->\n                        
<!-- HIDE_PRES -->\n\t       "
        },
        "id": 4,
        "type": "Feature",
        "geometry": {
            "coordinates": [-78.6, 22.9],
            "type": "Point"
        }
    }, {
        "properties": {
            "strength": "#m",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>48 hr Forecast<\/td><\/tr> \n\t   \t        <tr><td 
nowrap>Valid at:  8:00 PM EDT September 09, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 23.7 N, -79.9 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 135 knots (155 mph) <\/td>
<\/tr> \n\t   \t        <tr><td nowrap>Wind Gusts: 165 knots (190 mph) 
<\/td><\/tr> \n                        <!-- HIDE_MOTION -->\n                        
<!-- HIDE_PRES -->\n\t       "
        },
        "id": 5,
        "type": "Feature",
        "geometry": {
            "coordinates": [-79.9, 23.7],
            "type": "Point"
        }
    }, {
        "properties": {
            "strength": "#m",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>72 hr Forecast<\/td><\/tr> \n\t   \t        <tr><td 
nowrap>Valid at:  8:00 PM EDT September 10, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 27.2 N, -81.1 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 100 knots (115 mph) <\/td>
<\/tr> \n\t   \t        <tr><td nowrap>Wind Gusts: 120 knots (140 mph) 
<\/td><\/tr> \n                        <!-- HIDE_MOTION -->\n                        
<!-- HIDE_PRES -->\n\t       "
        },
        "id": 6,
        "type": "Feature",
        "geometry": {
            "coordinates": [-81.1, 27.2],
            "type": "Point"
        }
    }, {
        "properties": {
            "strength": "#s",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>96 hr Forecast<\/td><\/tr> \n\t   \t        <tr><td 
nowrap>Valid at:  8:00 PM EDT September 11, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 32.0 N, -83.5 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 50 knots (60 mph) <\/td><\/tr> 
\n\t   \t        <tr><td nowrap>Wind Gusts: 60 knots (70 mph) <\/td>
<\/tr> \n                        <!-- HIDE_MOTION -->\n                        
<!-- HIDE_PRES -->\n\t       "
        },
        "id": 7,
        "type": "Feature",
        "geometry": {
            "coordinates": [-83.5, 32.0],
            "type": "Point"
        }
    }, {
        "properties": {
            "strength": "#d",
            "descriptionHtml": " \n\t   \t  <table> \n                        
<tr><td><font color=black><b>Hurricane Irma (al112017)<\/b><\/font>
<\/td><\/tr> \n                        <tr><td>Advisory #36<\/td>
<\/tr> \n                        <tr><td><hr><\/td><\/tr> \n                        
<tr><td nowrap>120 hr Forecast<\/td><\/tr> \n\t   \t        <tr><td 
nowrap>Valid at:  8:00 PM EDT September 12, 2017 <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Location: 35.5 N, -86.5 W <\/td><\/tr> \n\t   
\t        <tr><td nowrap>Maximum Wind: 30 knots (35 mph) <\/td><\/tr> 
\n\t   \t        <tr><td nowrap>Wind Gusts: 40 knots (45 mph) <\/td>
<\/tr> \n                        <!-- HIDE_MOTION -->\n                        
<!-- HIDE_PRES -->\n\t       "
        },
        "id": 8,
        "type": "Feature",
        "geometry": {
            "coordinates": [-86.5, 35.5],
            "type": "Point"
        }
    }]
}

So next I have my ArcGis code:

<body>
  <script>
    "use strict";    
    let topo;
    let satellite;
    let mapview;
    let geoJson;

    require (["esri/Map",   
              "esri/views/MapView", 
              "esri/layers/FeatureLayer", 
              "esri/request", 
              "esri/layers/support/Field",
              "esri/renderers/SimpleRenderer",
              "esri/symbols/SimpleMarkerSymbol"],
    function(
        Map, 
        MapView, 
        FeatureLayer, 
        ERequest, 
        Field, 
        SimpleRenderer, 
        SimpleMarkerSymbol) {   
          topo = new Map({basemap:"topo"});
          satellite = new Map({basemap:"satellite"});
          mapview = new MapView({
          container: "map-view",
          map: topo,
          zoom: 15,
          center: [0, 0]
        });

        let url = 'http://localhost:8888/gis/getHurriCone.cfm';
        ERequest(url, {
          responseType: "json"
        }).then(function(response){
          // The requested data
          var geoJson = response.data;
        });

        let hurriTrackLayer = SimpleRenderer({
          symbol: new SimpleMarkerSymbol({
            size: 6,
            color: "black",
            outline: {
              width: 0.5,
              color: "white"
            }
          })
        }); 

        let fields = [
          new Field({
            name: "id",
            alias: "id",
            type: "oid"
          }), new Field({
            name: "descriptionHtml",
            alias: "descriptionHtml",
            type: "string"
          }), new Field ({
            name: "strength",
            alias: "strength",
            type: "string"
          })
        ];

        let hurriTrack = new FeatureLayer({
          source: geoJson,
          // create an instance of esri/layers/support/Field for each field object
          fields: fields,
          objectIdField: "id",
          geometryType: "point",
          spatialReference: { wkid: 4326 },

          renderer: hurriTrackLayer  // set the visualization on the layer
        });
        topo.add(hurriTrack);

    });
  </script>

I run this and get the topo base map displaying. I get an error at this point saying:

init.js:321 [] #load() Failed to load layer (title: 'undefined', id: 'undefined')
e {name: "feature-layer:missing-url-or-source", message: "Feature layer must be created with either a url or a source", details: undefined}

(I realize that simply defining the feature layer is not enough to display anything yet but I was running the map at this point to see if there were any problems)

The ESRI docs are not clear about GeoJSON and what is required in the fields definition so I just sort of guessed.

Best Answer

I believe that your GeoJSON is not actually valid - at http://geojsonlint.com/ I'm getting an error message due to the embedded HTML.

You could try removing the descriptionHtml parameter while you're testing this (you can reintroduce the description once the basics are working, using JSON syntax rather than embedded HTML).

As far as I can see, the ArcGIS Server JS API doesn't have direct support for true GeoJSON, but the featureCollection method for defining a feature layer may work. This is slightly different than the source method you've used.

Using this approach, you define the layer's properties in advance, then provide the data via an AJAX call (or use esriRequest).

There is a sample at https://developers.arcgis.com/javascript/3/jssamples/fl_featureCollection.html which demonstrates how to do this with the Flickr API, but the principle is the same with your http://localhost:8888/gis/getHurriCone.cfm service.

Best Answer

Related Solutions

Add GeoJSON Layer to OpenLayers 3 – JavaScript Mapping Integration

[GIS] geopandas: can’t save geojson

Related Question