AnsweredAssumed Answered

404 Error on /data/week.json

Question asked by novanum on Oct 3, 2018
Latest reply on Oct 4, 2018 by novanum

Hello,

 

I'm building a simple map with one marker on it.

My code works fine on Ersi's sandbox. But when I try to put it somewhere else, my marker won't show and I get a 404 error because dojo.js can't find ./data/week.json .

 

Thank you for your help.

 

Here is the Code Pen

Here is my code:

 

 

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

 

<title>Create a FeatureLayer with client side graphics - 4.9</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

 

#infoDiv {
position: absolute;
bottom: 15px;
right: 0;
max-height: 80%;
max-width: 300px;
background-color: black;
padding: 8px;
border-top-left-radius: 5px;
color: white;
opacity: 0.8;
}
</style>

 

<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script ></script>

 

<script type="text/javascript">
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/widgets/Legend",
"esri/request",
"esri/tasks/Locator"
], function(Map, MapView, FeatureLayer, Point, Legend, esriRequest, Locator) {
var locatorUrl = {url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"};
var locator = new Locator(locatorUrl);
var address = {
"SingleLine": "Rue de Sèvres Paris"
};

var addressCoord;

 

var fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "title",
alias: "title",
type: "string"
}, {
name: "place",
alias: "place",
type: "string"
}];

 

var pTemplate = {
title: "{title}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "place",
label: "Adresse",
visible: true
}]
}]
};

locator.addressToLocations({address: address}).then(function(resolvedVal) {
addressCoord = resolvedVal;

 

var map = new Map({
basemap: "streets"
});

var view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [addressCoord[0].location.longitude, addressCoord[0].location.latitude] // longitude, latitude
});

var quakesRenderer = {
type: "simple",
symbol: {
type: "simple-marker",
size: 15,
color: [211, 255, 0, 0],
outline: {
width: 8,
color: "#FF0055",
style: "solid"
}}};

 

view.when(function() {
getData()
.then(createGraphics)
.then(createLayer)
.catch(errback);
});

 

function getData() {
var url = "data/week.json";

 

return esriRequest(url, {
responseType: "json"
});
}

 

function createGraphics(response) {
return [{
geometry: {
type: "point",
"x": addressCoord[0].location.longitude,
"y": addressCoord[0].location.latitude
},
attributes: {
ObjectID: 1,
title: "Location",
place: "a random Paris street"
}
}];
}

 

function createLayer(graphics) {
var layer = new FeatureLayer({
source: graphics,
fields: fields,
objectIdField: "ObjectID",
renderer: quakesRenderer,
popupTemplate: pTemplate
});
map.add(layer);
return layer;
}


}, function(error) {
console.err(error);
});
});
</script>
</head>

 

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

Outcomes