Arcgis server layer won't load on browser

deleted-user-uslSuRwdQ2l4 · ‎08-08-2018

So I'm trying to make a site that uses a layer from ArcGIS Server but for some reason, it works on my chrome browser but doesn't on other peoples computer. Help!

Los Angeles County Vetting Guide

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Los Angeles County Vetting Guide</title>

}
.header {
overflow: hidden;
background-color: lightblue;
height:10%;
padding:20px;

}
.buttonx {
float: right;}
#div2 {
padding: 0;
margin: 0;
height: 95%;
width: 100%;
overflow: hidden;
}
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

#infoDiv, #price, #HS, #district, #crime, #crimez{
padding: 8px;
background-color: lightblue;
font-family: white;
}
</style>

var fieldSelect, classSelect, numClassesInput;

var alayer = new FeatureLayer({
title: "Median Price of a House Per Sqft",
url: "https://GIS-SERVER-02.GISTONLINE.USC.EDU:6443/arcgis/rest/services/asnake/LA_County_App/MapServer/3",
popupTemplate: { // autocast as esri/PopupTemplate
title: "Median Price House Value Per Sqft",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Zip",
lable: "Zip Code",
format: {
digitSeparator: false,
places: 0
}
},{
fieldName: "City",
lable: "City",
format: {
digitSeparator: false,
places: 0
}
},{
fieldName: "F2007_media",
label: "2007 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2008_media",
label: "2008 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2009_media",
label: "2009 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2010_media",
label: "2010 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2011_media",
label: "2011 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2012_media",
label: "2007 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2013_media",
label: "F2013 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2014_media",
label: "2014 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2015_media",
label: "2015 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2016_media",
label: "2016 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2017_media",
label: "2017 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
},{
fieldName: "F2018_media",
label: "2018 Median $/sqft",
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
});
var blayer = new FeatureLayer({
title: "Reported Crime for June 2018 by LAPD, SMPD, and LASD",
url: "https://GIS-SERVER-02.GISTONLINE.USC.EDU:6443/arcgis/rest/services/asnake/LA_County_App/MapServer/1",popupTemplate: { // autocast as esri/PopupTemplate
title: "Crime Reports",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Date_Occur",
lable: "Date",
format: {
digitSeparator: false,
places: 0
}},{
fieldName: "Type",
lable: "Crime type",
format: {
digitSeparator: false,
places: 0
}
}]}]},
visible: false
});
var clayer = new FeatureLayer({
title: "SAT score rating (0-100)",
url: "https://GIS-SERVER-02.GISTONLINE.USC.EDU:6443/arcgis/rest/services/asnake/LA_County_App/MapServer/2",
popupTemplate:{content: [{
type: "fields",
fieldInfos: [{
fieldName: "SAT_Pct",
lable: "SAT",
format: {
digitSeparator: false,
places: 0
}
} ]
}]}});
var dlayer = new FeatureLayer({
title: "Public Highschools with an SAT score",
url: "https://GIS-SERVER-02.GISTONLINE.USC.EDU:6443/arcgis/rest/services/asnake/LA_County_App/MapServer/0", popupTemplate: { // autocast as esri/PopupTemplate
title: "Highschools In LA County",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "sname",
lable: "School Name",
format: {
digitSeparator: false,
places: 0
}},{
fieldName: "Percent_Sa",
lable: "SAT Rating",
format: {
digitSeparator: false,
places: 0
}
}]}]},visible: false
});
var elayer = new FeatureLayer({
title: "Reported Crime Rate (incident/mile squared) June of 2018",
url: "https://GIS-SERVER-02.GISTONLINE.USC.EDU:6443/arcgis/rest/services/asnake/LA_County_App/MapServer/4",visible: false
});

var map = new Map({
basemap: "gray",
layers:[]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.2487846, 34.219070],
zoom: 9
});

// Set up UI elements

view.ui.add(new Legend({
view: view
}), "bottom-left");

var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "national-geographic"
});
view.ui.add(basemapToggle, "bottom-right");
basemapToggle.on("toggle", generateRenderer);

view.ui.add("infoDiv", "top-right");
view.ui.add("crime","top-right");
view.ui.add("HS","top-right");
view.ui.add("district","top-right");
view.ui.add("price","top-right");
view.ui.add("crimez","top-right");

// Generate a new renderer each time the user changes an input paramter
var checkbox = document.getElementById("Checkbox1");
checkbox.onclick = function () {

alayer.visible = this.checked; clayer.visible = false; elayer.visible = false; document.getElementById("Checkbox2").checked = false;document.getElementById("Checkbox5").checked = false;document.getElementById("field-select").value="F2018_media"; generateRenderer();
/*var x = document.getElementById("infoDiv");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}*/
}
var checkbox = document.getElementById("Checkbox2");
checkbox.onclick = function () {
elayer.visible = this.checked; clayer.visible = false; alayer.visible = false; document.getElementById("Checkbox1").checked = false;document.getElementById("Checkbox5").checked = false; document.getElementById("field-select").value="Rate";generate();
}
var checkbox = document.getElementById("Checkbox3");
checkbox.onclick = function () {
blayer.visible = this.checked;}
var checkbox = document.getElementById("Checkbox4");
checkbox.onclick= function(){
dlayer.visible = this.checked;}
var checkbox = document.getElementById("Checkbox5");
checkbox.onclick= function(){
clayer.visible = this.checked; elayer.visible = false; alayer.visible = false; document.getElementById("Checkbox1").checked = false;document.getElementById("Checkbox2").checked = false; document.getElementById("field-select").value="SAT_Pct"; gen(); }

view.when(function() {

fieldSelect = document.getElementById("field-select");
fieldSelect.addEventListener("change", gen);
fieldSelect.addEventListener("change", generateRenderer);
fieldSelect.addEventListener("change", generate);

numClassesInput = document.getElementById("num-classes");
numClassesInput.addEventListener("change", gen);
numClassesInput.addEventListener("change", generateRenderer);
numClassesInput.addEventListener("change", generate);

generateRenderer();
gen();
generate()
});

function generateRenderer() {
var fieldLabel = fieldSelect.options[fieldSelect.selectedIndex].text;

var params = {
layer: alayer,
field: fieldSelect.value,

basemap: map.basemap,

numClasses: parseInt(numClassesInput.value),
minValue:1,
maxValue:1700,
legendOptions: {
title: "$ Value for " + fieldLabel
}
};

// generate the renderer and set it on the layer
colorRendererCreator.createClassBreaksRenderer(params)
.then(function(response) {
alayer.renderer = response.renderer;

if (!map.layers.includes(alayer)) {
map.add(alayer);
} if (!map.layers.includes(elayer)) {map.add(elayer);
}

if (!map.layers.includes(clayer)) {map.add(clayer);
}if (!map.layers.includes(blayer)) {map.add(blayer);
}
if (!map.layers.includes(dlayer)) {map.add(dlayer);
}

});

}

function gen() {
var fieldLabel = fieldSelect.options[fieldSelect.selectedIndex].text;

var params = {
layer: clayer,
field: fieldSelect.value,

basemap: map.basemap,

numClasses: parseInt(numClassesInput.value),
minValue:1,
maxValue:100,
legendOptions: {
title: "SAT Rating Per School District " + fieldLabel
}
};

// generate the renderer and set it on the layer
colorRendererCreator.createClassBreaksRenderer(params)
.then(function(response) {
clayer.renderer = response.renderer;

if (!map.layers.includes(alayer)) {
map.add(alayer);
}
if (!map.layers.includes(elayer)) {map.add(elayer);
}

if (!map.layers.includes(clayer)) {map.add(clayer);
}if (!map.layers.includes(blayer)) {map.add(blayer);
}
if (!map.layers.includes(dlayer)) {map.add(dlayer);
}

});

}
function generate() {
var fieldLabel = fieldSelect.options[fieldSelect.selectedIndex].text;

var params = {
layer: elayer,
field: fieldSelect.value,

basemap: map.basemap,

numClasses: parseInt(numClassesInput.value),
minValue:1,
maxValue:800,
legendOptions: {
title: "Crime rate of Zip/sqmi " + fieldLabel
}
};

// generate the renderer and set it on the layer
colorRendererCreator.createClassBreaksRenderer(params)
.then(function(response) {
elayer.renderer = response.renderer;

if (!map.layers.includes(alayer)) {
map.add(alayer);
}if (!map.layers.includes(elayer)) {map.add(elayer);
}
if (!map.layers.includes(blayer)) {map.add(blayer);
}
if (!map.layers.includes(clayer)) {map.add(clayer);
}if (!map.layers.includes(blayer)) {map.add(blayer);
}
if (!map.layers.includes(dlayer)) {map.add(dlayer);
}

});

}

});
</script>
</head>

<body><div class="header"><a href="#default" class="logo"> Los Angeles Neighbourhood Vetting App</a><div class="buttonx"><p> By Chernet Asnake</p>
<button id="but" onclick="change();mFunction();">Query!</button></div></div>
<div id="div1" style="display:block">
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
Select Field:
<select id="field-select" class="esri-widget">
<option value="SAT_Pct"> SAT Rate</option>
<option value="Rate">Crime Rate </option>
<option value="F2007_media">House Price 2007 </option>
<option value="F2008_media">House Price 2008 </option>
<option value="F2009_media">House Price 2009 </option>
<option value="F2010_media">House Price 2010 </option>
<option value="F2011_media">House Price 2011 </option>
<option value="F2012_media">House Price 2012 </option>
<option value="F2013_media">House Price 2013 </option>
<option value="F2014_media">House Price 2014 </option>
<option value="F2015_media">House Price 2015 </option>
<option value="F2016_media">House Price 2016 </option>
<option value="F2017_media">House Price 2017 </option>
<option value="F2018_media">House Price 2018 </option>
</select>
Breaks: <input type="number" id="num-classes" class="esri-widget"
value="5">
</div>
<div id="price" class="form-check">
<input class="form-check-input" type="checkbox" id="Checkbox1" value="option1" >
<label class="form-check-label" for="Checkbox1">House Price / Sq. ft.</label>

</div> <div id="crimez" class="form-check">
<input class="form-check-input" type="checkbox" id="Checkbox2" value="option2" >
<label class="form-check-label" for="Checkbox2">Crime Per ZIP</label>
</div> <div id="crime" class="form-check">
<input class="form-check-input" type="checkbox" id="Checkbox3" value="option3">
<label class="form-check-label" for="Checkbox3">Crime Points</label>
</div> <div id="district" class="form-check">
<input class="form-check-input" type="checkbox" id="Checkbox5" value="option4" checked>
<label class="form-check-label" for="Checkbox5">School District</label>

</div> <div id="HS" class="form-check">
<input class="form-check-input" type="checkbox" id="Checkbox4" value="option5">
<label class="form-check-label" for="Checkbox4">High School Points</label>

</div>
</div>
<div id="div2" style="display:none">
<iframe width=100% height=100% frameborder="0" src="http://gis-web.usc.edu/asnake/App/query3.html"></iframe></div>
<script>
function mFunction() {
var x = document.getElementById("div2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
var y = document.getElementById("div1");
if (y.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}
}
function change() // no ';' here
{
var elem = document.getElementById("but");

if (but.innerHTML == "Query!")
{
but.innerHTML = "Back";
}
else {
but.innerHTML = "Query!";
}
}

</script>
</body>

</html>

JustinWilson · ‎08-09-2018

Based on the link at the top, it looks like you got it working.

deleted-user-uslSuRwdQ2l4 · ‎08-11-2018

Yea apparently it was working on my browser because of cache. I published the web service again and it seemed to solve the issue.

KenBuja · ‎08-13-2018

If you ever add GroupLayers to your map, you're going to have a problem. You'll have to reverse the order of the GroupLayer and domReady modules in the require statement.