I have created a very simple map that displays species occurrences by county based on a query. The map has two feature layers, the species occurrences and a county outline. I am not using a basemap. I decided it might be nice to allow the users to view the map full screen. However, when I do this, the background turns black and, as a result, the county outlines (which are also black) are obscured.
The simple solution is to add a renderer to the county feature layer to make the fill white (which I have done). However, I am still not really thrilled about the black background overall.
Is there any fixes to this so the map has a white background as it does when not at full screen?
<html>
<head>
<meta name="description" content="DevLav: Query a feature layer">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>County Level Species Occurrences</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
</head>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/geometry/Extent",
"esri/geometry/SpatialReference",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/Graphic",
"esri/widgets/Fullscreen"
],
function(
Map,
MapView,
FeatureLayer,
SimpleRenderer,
Extent,
SpatialReference,
Query,
QueryTask,
Graphic,
Fullscreen
) {
//map extent: Need this since no basemap; otherwise extent is pretty wonky
var bounds = new Extent({
"xmin":-103.5,
"ymin":33.0,
"xmax":-93.5,
"ymax":37.5,
"spatialReference":{"wkid":4326} //this is for the extent only; need to set map spatial reference in view.
});
var countyRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "white",
outline: { // autocasts as new SimpleLineSymbol()
width: 1,
color: "black"
}
}
};
// Oklahoma Counties Layer
var okcounties = new FeatureLayer({
url: "https://obsgis.csa.ou.edu:6443/arcgis/rest/services/ONHI/ArcGISServer_Counties/MapServer",
renderer: countyRenderer
});
var map = new Map({
//basemap: "satellite",
layers: [okcounties]
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: bounds,
spatialReference: 3857 //spatial reference of map; different from the extent
});
// Define sql expression eventually want to bind to record selected in OBIS explorer
var query = new Query();
query.where = "sname = 'Alnus maritima'"
query.outFields = ["*"];
query.returnGeometry = true;
// Define the query task
var queryTask = new QueryTask({
url: "https://obsgis.csa.ou.edu:6443/arcgis/rest/services/ONHI/Taxa_Centroids/MapServer/0/"
});
// Execute the query
queryTask.execute(query)
.then(function(result){
result.features.forEach(function(item){
var g = new Graphic({
geometry: item.geometry,
attributes: item.attributes,
symbol: {
type: "simple-marker",
size: 10,
color: [55, 55, 55],
outline: null
},
popupTemplate: {
title: "<em>{sname}</em> ({vernacularname})",
content: "ONHI has {count} occurrence record(s) for <em>{sname}</em> ({vernacularname}) in {county} County"
}
});
view.graphics.add(g);
});
})
.otherwise(function(e){
console.log(e);
});
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-right");
view.when(disableZooming);
/**
* Disables all zoom gestures on the given view instance.
*
* @param {esri/views/MapView} view - The MapView instance on which to
* disable zooming gestures.
*/
function disableZooming(view) {
view.popup.dockEnabled = true;
// Removes the zoom action on the popup
view.popup.actions = [];
// stops propagation of default behavior when an event fires
function stopEvtPropagation(event) {
event.stopPropagation();
}
// exlude the zoom widget from the default UI
view.ui.components = ["attribution"];
// disable mouse wheel scroll zooming on the view
view.on("mouse-wheel", stopEvtPropagation);
// disable zooming via double-click on the view
view.on("double-click", stopEvtPropagation);
// disable zooming out via double-click + Control on the view
view.on("double-click", ["Control"], stopEvtPropagation);
// disables pinch-zoom and panning on the view
view.on("drag", stopEvtPropagation);
// disable the view's zoom box to prevent the Shift + drag
// and Shift + Control + drag zoom gestures.
view.on("drag", ["Shift"], stopEvtPropagation);
view.on("drag", ["Shift", "Control"], stopEvtPropagation);
// prevents zooming with the + and - keys
view.on("key-down", function(event) {
var prohibitedKeys = ["+", "-", "Shift", "_", "="];
var keyPressed = event.key;
if (prohibitedKeys.indexOf(keyPressed) !== -1) {
event.stopPropagation();
}
});
return view;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>