[GIS] Uncaught ReferenceError: require is not defined ArcGIS javascript API

arcgis-javascript-apigeojson

Below is my code.I'm tryng to display a GeoJSON layer from ArcGIS online. I get the error,
Uncaught ReferenceError: require is not defined. 

<!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>ArcGIS GeoJSON Layer</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(url);
            });

            // Add the layer
            function addGeoJsonLayer(url) {
                // Create the laye
                var geoJsonLayer = new GeoJSONLayer({
                    url: "http://services6.arcgis.com/ZHUwet99mNBqTsuu/ArcGIS/rest/services/ABHI/FeatureServer/0/query?where=city%3D%27BENGALURU%27+&objectIds=&time=&geometry=&geometryType=esriGeometryPoint&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=pgeojson&token="

                });
                // Zoom to layer
                geoJsonLayer.on("update-end", function (e) {
                    map.setExtent(e.target.extent.expand(1.2));
                });
                // Add to map
                map.addLayer(geoJsonLayer);
            }
        });
    </script>
    </head>
    <body>
        <div id="mapDiv"></div>
    </body>
    </html>

Can anyone help me on this?

Best Answer

In your example you are missing a closing angled bracket when calling the terraformer.min.js script.

Problem Line

<script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js" </script>

Corrected as

<script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"> </script>
Related Question