I'm working on displaying GeoJSON data on ArcGIS map using ArcGIS javascript API.
Below is my code,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Geoj</title>
<!-- ArcGIS API for JavaScript CSS-->
<style>
html, body, #mapDiv {
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<script src="./vendor/terraformer/terraformer.min.js" ></script>
<script src="https://js.arcgis.com/3.9/"></script>
<script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"> </script>
<script src="./src/geojsonlayer.js"</script>
<script>
require([
"esri/map",
"./src/geojsonlayer",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function (Map, geoJsonLayer, on, dom) {
// Create map
var map = new Map("mapDiv", {
basemap: "gray",
center: [-122.5, 45.5],
zoom: 5
});
map.on("load", function () {
addGeoJsonLayer("http://services6.arcgis.com/ZHUwet99mNBqTsuu/ArcGIS/rest/services/ABHI/FeatureServer/0/query?where=city%3D%27BENGALURU%27&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&resultType=none&distance=&units=esriSRUnit_Meter&outFields=&returnGeometry=true&multipatchOption=&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnDistinctValues=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&quantizationParameters=&sqlFormat=none&f=pjson&token=");
});
// Add the layer
function addGeoJsonLayer(url) {
// Create the laye
var geoJsonLayer = new GeoJsonLayer({
url: url
});
// Zoom to layer
geoJsonLayer.on("update-end", function (e) {
map.setExtent(e.target.extent.expand(1.2));
});
//var GEOJSON= Terraformer.ArcGIS.parse(geoJsonLayer, sr)
// Add to map
map.addLayer(geoJsonLayer);
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
I'm getting the following error:
Error: multipleDefine
at Error (native)
at c (https://js.arcgis.com/3.9/init.js:15:378)
at Ka (https://js.arcgis.com/3.9/init.js:36:286)
at https://js.arcgis.com/3.9/init.js:37:216
at f (https://js.arcgis.com/3.9/init.js:15:291)
at Ya (https://js.arcgis.com/3.9/init.js:37:194)
at h (https://js.arcgis.com/3.9/init.js:34:301)
at HTMLScriptElement.<anonymous> (https://js.arcgis.com/3.9/init.js:39:128)
I'm not able to figure it out. Could anyone help me out on this?
asked Aug 11, 2016 at 10:14
-
its a bad idea to ask an ArcGIS service for GeoJSON to draw in the JSAPI because our own Geoservices JSON support is much more robust. i've answered your cross posted question here: github.com/Esri/geojson-utils/issues/18john gravois– john gravois2016年08月12日 17:31:03 +00:00Commented Aug 12, 2016 at 17:31
1 Answer 1
You don't need this line...
<script src="./src/geojsonlayer.js"</script>
...since you're already loading that via AMD.
All the Terraformer script tags should come before the ArcGIS API script tag.
answered Aug 11, 2016 at 17:15
-
Thank you Jeff .But now I'm getting this error XMLHttpRequest cannot load file:///E:/ArcGIS%20Javascript/src/geojsonlayer. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.p.getText @ init.js:18qa @ init.js:36f @ init.js:15(anonymous function) @ init.js:23ha @ init.js:32na @ init.js:23Ma @ init.js:24p @ init.js:15(anonymous function) @ Geojson3.html:37 init.js:18 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///E:/ArcGIS%20Javascript/src/geojsonlayer'.Shenbaga Rajan– Shenbaga Rajan2016年08月12日 04:50:25 +00:00Commented Aug 12, 2016 at 4:50
-
It looks like you're trying to load a script from a file system URL. You'll need to run a web server (e.g., IIS Express) in order for the page to work correctly. If you're using Visual Studio Code, you can use either the IIS Express or Express extentions to easily run your code from a web server.Jeff Jacobson– Jeff Jacobson2016年08月15日 15:58:24 +00:00Commented Aug 15, 2016 at 15:58
lang-js