[GIS] Error: Multiple Define with Arcgis Javascript API

arcgis-javascript-apigeojson

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?

Best Answer

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.

Related Question