1

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?

1
  • 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/18 – john gravois Aug 12 '16 at 17:31
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.

2
  • 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 Aug 12 '16 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 Aug 15 '16 at 15:58

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.