Hey and thanks for the answers, have made the altercations but the problem still persists, could you take a look at my setup?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Hlynur experiments</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle1 {
top: 13px;
right: 13px;
width: 165px;
position: absolute;
float: right;
color: #86888A;
text-align: left;
font-family: "arial";
font-size: 14px;
padding: 5px 2px;
background-color: white;
outline-color: white;
box-shadow: 1px 1px #bdbdbd;
}
#layerToggle2 {
top: 37px;
right: 13px;
width: 165px;
position: absolute;
float: right;
color: #86888A;
text-align: left;
font-family: "arial";
font-size: 14px;
padding: 5px 2px;
background-color: white;
outline-color: white;
box-shadow: 1px 1px #bdbdbd;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Home",
"esri/widgets/Zoom",
"esri/widgets/BasemapToggle",
"esri/tasks/Locator",
"esri/widgets/Search",
"esri/widgets/Expand",
"esri/layers/FeatureLayer",
"esri/core/watchUtils",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(
Map,
MapView,
Home,
Zoom,
BasemapToggle,
Locator,
Search,
Expand,
FeatureLayer,
watchUtils,
dom,
on,
) {
var map = new Map({
basemap: "gray",
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 9,
extent: {
xmin: -3730050,
ymin: 6277314,
xmax: 4468890,
ymax: 12147678,
spatialReference: 102100
}
});
var homeWidget = new Home({
view: view
});
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite",
container: document.createElement("div")
});
var basemapToggleExpand = new Expand({
view: view,
content: basemapToggle.container,
expandIconClass: "esri-icon-basemap",
});
var searchWidget = new Search({
view:view,
allPlaceholder: "Incident or address",
container: document.createElement("div"),
sources: [
{
locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
singleLineFieldName: "SingleLine",
name: "Adress search",
localSearchOptions: {
minScale: 300000,
distance: 50000
},
maxResults: 3,
maxSuggestions: 6,
suggestionsEnabled: false,
minSuggestCharacters: 0,
resultGraphicEnabled: false
},{
featureLayer: new FeatureLayer({
url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Report_Service/FeatureServer/0",
popupTemplate: {
title: "{Incident_Type} </br> {Incident_Description}",
overwriteActions: true
}
}),
searchFields: ["Incident_Type"],
displayField: "Incident_Description",
exactMatch: false,
outFields: ["Incident_Type", "Report_Date"],
name: "Incident",
placeholder: "huh?",
zoomScale: 10000,
resultGraphicEnabled: false
}, {
featureLayer: new FeatureLayer({
url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Iceland_Test/FeatureServer/0",
popupTemplate: {
title: "{Name}",
overwriteActions: true
}
}),
searchFields: ["Name"],
suggestionTemplate: "{Name}",
exactMatch: false,
outFields: ["Name"],
name: "Basecamps",
zoomScale: 5000,
resultGraphicEnabled: false
}],
popupEnabled: false
});
var searchWidgetExpand = new Expand({
view: view,
content: searchWidget.container,
expandIconClass: "esri-icon-search",
});
var reportLyr = new FeatureLayer({
url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Report_Service/FeatureServer/0",
id: "report",
visible: false,
popupTemplate: {
title: "{Incident_Type}",
content: [{
type: "text",
text: "Here something seriously interresting has taken place, stay tuned for more AMAZING adventures!!!"
}]
},
outFields: ["*"]
});
var reportLyrToggle = dom.byId("reportLyr");
on(reportLyrToggle, "change", function() {
reportLyr.visible = reportLyrToggle.checked;
});
var icelandLyr = new FeatureLayer({
url: "https://services1.arcgis.com/LpQVI6wAjYbHDKAK/arcgis/rest/services/Iceland_Test/FeatureServer/0",
id: "iceland",
visible: false,
popupTemplate: {
title: "Basecamp",
content: [{
type: "text",
Text: "Place: {Name} <br/> Region: {Region}"
}, {
type: "media",
mediaInfos: [{
title: "{Name}",
type: "image",
value: {
sourceURL: "{PICTURE}"
}
}]
}, {
type: "attachments"
}],
actions: [{
id: "see-more",
className: "esri-icon-home",
title: "Visit homepage"
}]
},
outFields: ["*"]
});
var icelandLyrToggle = dom.byId("icelandLyr");
on(icelandLyrToggle, "change", function() {
icelandLyr.visible = icelandLyrToggle.checked;
});
expandhandle1 = watchUtils.pausable(basemapToggleExpand, "expanded", function(newValue, oldValue){
if(newValue === true){
expandHandle1.pause();
setTimeout(function(){
expandHandle2.resume();
}, 100);
}else{
expandHandle1.resume();
}
if(searchWidgetExpand.expanded){
searchWidgetExpand.collapse();
}
});
expandhandle2 = watchUtils.pausable(searchWidgetExpand, "expanded", function(newValue, oldValue){
if(newValue === true){
expandHandle2.pause();
setTimeout(function(){
expandHandle1.resume();
}, 100);
}else{
expandHandle2.resume();
}
if(basemapToggleExpand.expanded){
basemapToggleExpand.collapse();
}
});
view.on("layerview-create", function(event) {if (event.layer.id === "report") {console.log("LayerView for reports created!", event.layerView)};
});
view.on("layerview-create", function(event) {if (event.layer.id === "iceland") {console.log("Layerview for Iceland created!", event.layerView)}
});
map.add(reportLyr);
map.add(icelandLyr);
view.ui.add(homeWidget, {position: "top-left", index: 1});
view.ui.add(searchWidgetExpand, {position: "top-left", index: 3});
view.ui.add(basemapToggleExpand, {position: "top-left", index: 2});
view.then(function () {
var popup = view.popup;
popup.viewModel.on("trigger-action", function(event) {
if (event.action.id === "see-more") {
var attributes = popup.viewModel.selectedFeature.attributes;
var info = attributes.Link;
if (info !== null) {
window.open(info.trim());
} else {
window.open ("https://www.google.com/search?q=" +
attributes.Name);
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<span id="layerToggle1">
<input type="checkbox" id="reportLyr">Hlynur has issues
</span>
<span id="layerToggle2">
<input type="checkbox" id="icelandLyr">Hlynur has basecamps
</span>
</body>
</html>
