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.
Add a comment
|
1 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.
-
This seems to be for ArcGIS Javascript version 3.20. Do you know if it works with the latest 4.3?? Commented May 13, 2017 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-utilsjust converts the features to esri json format, from there it is very easy to integrate with JS API.– crmackeyCommented May 13, 2017 at 21:02 -
2Note that the readme for that project says it's deprecated and recommends two additional options. github.com/Esri/geojson-utils Commented May 17, 2017 at 18:52