1

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.

2

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.

| improve this answer | |
  • Sorry, I just noticed that you mentioned version 4.4 of the JS API, and my answer applies to 3.x. I don't have much experience with the 4.x version but I'll take a look when time permits and see if there is any major difference with respect to GeoJSON. But the comment on invalid GeoJSON still applies – Stephen Lead Sep 8 '17 at 6:31
  • Thanks Stephen. I think the problem with copying and pasting the GeoJSON I posted is somehow newlines got embedded in the long descriptionHtml string. But removing or truncating the descriptionHtml is sound. One possibility of an issue here is the ColdFusion/Lucee function I'm using created a lot of whitespace near the top of the GeoJSON result which should be pretty easy to clean up. What's helpful is you've given me a few ideas of things to try. Thanks again. – Strat-O Sep 8 '17 at 18:41
  • 1
    I found a 4.x sample that handles a GeoJSON file. The way they "handle" it is they convert it to ESRI's JSON format! developers.arcgis.com/javascript/latest/sample-code/… – Strat-O Sep 9 '17 at 2:08
  • 1
    Cool, glad you figured it out. If you don't need to use ArcGIS, the Leaflet API supports GeoJSON directly. There's a good example at leafletjs.com/examples/geojson which uses static files, but you can use the same approach with an AJAX request for the data – Stephen Lead Sep 11 '17 at 0:17

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.