What is the error in this code , file not fetch and not fetched in the basemap, not vissible in the browser

rpk

Joined
Jul 26, 2023
Messages
1
Reaction score
0
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes">
<title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>

<script src="main.js"></script>

</head>

<body>
<h1> hello</h1>


require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"


], function(esriConfig, Map, MapView, FeatureLayer) {

esriConfig.apiKey = "AAPKe641a4ee7dfe481090164eac253d82d33gOIjmFYhG4OJjR2u_l92orPVoqVtCjzbzqH9zJud6igDh9NT1n19QKQXF55hXp9";



const map = new Map({
basemap: "arcgis-topographic"

});

const view = new MapView({
container: "viewDiv",
map: map,
center: [77.594566, 12.971599],
zoom: 13
});

//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});

map.add(trailheadsLayer);

//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});

map.add(trailsLayer, 0);

// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJb...services/Parks_and_Open_Space/FeatureServer/0"
});

map.add(parksLayer, 0);

// fetch api .......

fetch("folder/districtmodijsonn.json")
.then(response => response.json())
.then(data => { console.log (data);

const geoJSONLayer = new GeoJSONLayer({

source: data,

// rendering inside .......


let polygonsRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
size: 6,
color: "black",
outline: { // autocasts as new SimpleLineSymbol()
width: 1,
color: "red"
}
}
};

let polygonsLayer = new FeatureLayer({
url: "http://url.to.service",
renderer: polygonsRenderer
});

});
map.add(geoJSONLayer);

})
.catch(error => {
console.error('Error fetching the JSON file:', error);
});

});



</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
 
Joined
Jul 4, 2023
Messages
356
Reaction score
41
You used 2 times </head><body> in the same html document that is incorrect

<script src="main.js"></script>

</head>
<body>
<h1> hello</h1>

require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"

...

</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

and you forgot use <script> tag for javascript code

HTML:
<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer"
    ...
</script>


check this (your code little bit tidy)
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes">
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.27/"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <h1> hello</h1>
    <div id="viewDiv"></div>

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function(esriConfig, Map, MapView, FeatureLayer) {
        esriConfig.apiKey = "AAPKe641a4ee7dfe481090164eac253d82d33gOIjmFYhG4OJjR2u_l92orPVoqVtCjzbzqH9zJud6igDh9NT1n19QKQXF55hXp9";

        const map = new Map({
          basemap: "arcgis-topographic"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [77.594566, 12.971599],
          zoom: 13
        });

        //Trailheads feature layer (points)
        const trailheadsLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
        });

        map.add(trailheadsLayer);

        //Trails feature layer (lines)
        const trailsLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
        });

        map.add(trailsLayer, 0);

        // Parks and open spaces (polygons)
        const parksLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
        });

        map.add(parksLayer, 0);

        // fetch api ...
        fetch("folder/districtmodijsonn.json")
          .then(response => response.json())
          .then(data => {
          console.log (data);
          const geoJSONLayer = new GeoJSONLayer({
            source: data,

            // rendering inside ...
            polygonsRenderer: {
              type: "simple", // autocasts as new SimpleRenderer()
              symbol: {
                type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                size: 6,
                color: "black",
                outline: { // autocasts as new SimpleLineSymbol()
                  width: 1,
                  color: "red"
                }
              }
            }      
          });

          let polygonsLayer = new FeatureLayer({
            url: "http://url.to.service",
            renderer: polygonsRenderer
          });

          map.add(geoJSONLayer);
        })
       .catch(error => {
          console.error('Error fetching the JSON file:', error);
        });
      });
    </script>
  </body>
</html>
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top