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.
Best Answer
Unfortunately, this is not possible through the current version it is planned though as future updates occur for this version.
ArcGIS API for JavaScript 3.20 Does have this capability.