[GIS] How to import geoJSON point file to ArcGIS Javascript API

arcgis-javascript-api-4geojsonimport

I am new to ArcGIS Javascript and so far I was using ArcGIS online service to import point feature layers. But now I need to use geoJSON files to import point feature layers. How can I do that? I checked the samples in the ESRI website and could not find anything.

I am using the ArcGIS API for JavaScript v4.3.

Best Answer

You can convert the geoJson to Graphics and add them to the map pretty easily (you can probably even cast to FeatureLayer). Esri has created a nice library to convert between geojson and esri json format, it's called geojson-utils. I have used it in the past and it works pretty nicely.

The following code worked for me:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>GeoJson test</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    body,
    html,
    #main {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script src="./test.js"></script> //my geojson test data is in here
  <!-- <script src="./jsonConverters.js"></script> -->
  <script>
    var map; //

    require([
      "esri/map",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/graphic",
      "esri/layers/GraphicsLayer",
      "esri/Color",
      "./jsonConverters.js", //this is the esri geojson-utils module
      "dojo/domReady!"
    ], function(Map, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, GraphicsLayer, Color, jsonConverters
    ) {
      map = new Map("map", {
        basemap: "streets",
        center: [-93.447, 44.781],
        zoom: 10
      });
      // symbol for graphics
      var pointSymbol = new SimpleMarkerSymbol(
        "diamond",
        20,
        new SimpleLineSymbol(
          "solid",
          new Color([88, 116, 152]), 2
        ),
        new Color([88, 116, 152, 0.45])
      );
      var esriJson = jsonConverters.geoJsonConverter().toEsri(geojson); //geojson is my geojson data
      var gl = new GraphicsLayer()
      esriJson.features.forEach(function(ft) {
        var graphic = new Graphic({
          geometry: ft.geometry,
          symbol: pointSymbol.toJson(),
          attributes: ft.attributes,
          infoTemplate: {
            title: '${Photo_Name}',
            content: '<a href=${Hyperlink} target="_blank">View Photo</a>'
          }
        })
        gl.add(graphic);
      });
      map.addLayer(gl);
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">
    <div id="map" dojotype="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>
</html>

EDIT:

As pointed out below by @BjornSvensson, looks like the goejson-utils project is not actively maintained, instead have a look at Terraformer or arcgis-to-geojson.

Related Question