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?
Here's a live example: County Level Species Occurrences
And the code:
<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>
Solved! Go to Solution.
The fullscreen widget has a default background color that is set to black. In your app you could overwrite that behavior doing something like this:
.esri-view:fullscreen {
background-color: #fff;
}
You can find more details on using :fullscreen here:
The fullscreen widget has a default background color that is set to black. In your app you could overwrite that behavior doing something like this:
.esri-view:fullscreen {
background-color: #fff;
}
You can find more details on using :fullscreen here:
I knew it had to be something ridiculously easy. I, of course, didn't think to add something to the stylesheet.
Thank you.
We will get this info documented so it'll be easier for the next person who runs into this issue to figure out.