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

rpk · Jul 26, 2023

<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>

VBService · Aug 11, 2023

You used 2 times </head><body> in the same html document that is incorrect

rpk said:
<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>

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Image upload not working in browser	4	Sep 9, 2022
Why doesn't the function get called?	1	Nov 20, 2023
An unknown bug doesn't allow the quotes app to work. What's the issue?	3	Apr 23, 2023
Only one table shows up with the information	2	Mar 29, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
I keep getting this error when im trying to show category name.	0	Dec 26, 2023
Why is this WordPress comments form not submitting?	1	Jan 12, 2020

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

rpk

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads