1

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.

2

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.

  • This seems to be for ArcGIS Javascript version 3.20. Do you know if it works with the latest 4.3?? – Stratos Tso May 13 '17 at 7:24
  • Yes, that is using the 3.20 API. However, I imagine the code for 4.3 would be very similar. I haven't done much testing with the 4.x API yet. The geojson-utils just converts the features to esri json format, from there it is very easy to integrate with JS API. – crmackey May 13 '17 at 21:02
  • 2
    Note that the readme for that project says it's deprecated and recommends two additional options. github.com/Esri/geojson-utils – Bjorn Svensson May 17 '17 at 18:52

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.