GeoJSON polygons on import into ArcGIS Web are always solid filled, instead of the transparency/opacity styles we set for geoJson

Question

I've been playing with GeoJSON only recently, and was wanting to request some assistance on the below:

• We save the graphitems (polygon rings, etc), from the web maps.
• We then convert it to a GeoJSON file for export, along with styles for transparency/opacity (see code further below).
• We then send the exported GeoJSON file for import into ArcGIS.
• The file is imported successfully, but the, colour or transparency/opacity is not being set, it defaults to 20% opacity.

Is there a way to honour the transparency/opacity for GeoJSON imports into ArcGIS? Am I setting up the styles incorrectly in the GeoJSON file?

Sample GeoJson file is as per below:

{
    "type": "FeatureCollection",
    "crs": {
      "type": "name",
      "properties": {
        "name": "EPSG:3857"
      }
    },
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [
                15576024.93758691,
                -4055443.47590715
              ],
              [
                15576028.52057261,
                -4055971.3691337
              ],
              [
                15576624.49052747,
                -4055960.6201765984
              ],
              [
                15576618.518884636,
                -4055442.281578583
              ],
              [
                15576024.93758691,
                -4055443.47590715
              ]
            ]
          ]
        },
        "properties": {
          "id": 13,
          "centerPoint": [
            -34.20013348612295,
            139.9245056104621
          ],
          "address": "Golden Heights, South Australia",
          "title": "Golden Heights, South Australia",
          "area": 21.232800390625002
        },
        "style": {
          "fill": "blue",
          "stroke-width": "3",
          "fill-opacity": 0.5
        }
      }
    ]
  }

Any help on the above would be much appreciated. Thanks.

Answer 1

Esri layers use the Renderer property to determine how to render features. If you're looking for a generic solution that will work with any geojson, I'm not sure there's an easy way to transform svg-style css classes into an esri renderer. For your case, it looks like you need a SimpleRenderer whose symbol is a SimpleFillSymbol. I don't think there's a shortcut to use css properties from your JSON to tell the api how to create a renderer. This could be a great idea for a plugin, but on the other hand, a small list of simple css classes doesn't have the same capacity to render features at the level of complexity that a Renderer allows for, so I'm not sure how you could even map those css properties to the renderer propeties.

I would also try asking this question on esri's geonet forum - that forum has way more knowledge and activity when it comes to the arcgis js api than SO does.