Fullscreen with no basemap

ToddFagin — Thu, 25 Apr 2019 15:02:21 GMT

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>

Re: Fullscreen with no basemap

KellyHutchins — Sat, 11 Dec 2021 22:02:52 GMT

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:

https://tympanus.net/codrops/css_reference/fullscreen/

Re: Fullscreen with no basemap

ToddFagin — Fri, 26 Apr 2019 01:16:25 GMT

I knew it had to be something ridiculously easy. I, of course, didn't think to add something to the stylesheet.

Thank you.

Re: Fullscreen with no basemap

KellyHutchins — Fri, 26 Apr 2019 15:28:28 GMT

We will get this info documented so it'll be easier for the next person who runs into this issue to figure out.

topic Fullscreen with no basemap in ArcGIS JavaScript Maps SDK Questions

Fullscreen with no basemap

Re: Fullscreen with no basemap

Re: Fullscreen with no basemap

Re: Fullscreen with no basemap