Fullscreen with no basemap

1346
3
Jump to solution
04-25-2019 08:02 AM
ToddFagin
Occasional Contributor II

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>

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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/

View solution in original post

3 Replies
KellyHutchins
Esri Frequent Contributor

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/

ToddFagin
Occasional Contributor II

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

Thank you.

0 Kudos
KellyHutchins
Esri Frequent Contributor

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