title: Remove background map Leaflet
body: <p>I'm using Leaflet to make a cloropleth map over Europe. I would like to remove the map so that just the cloropleth layer is visible (background white). </p>
  
  <p>I've tried to use different versions of map.removeLayer but I haven't been able to make a change without removing all layers. </p>
  
  <p>I've also tried to alter .leaflet-container in the css. </p>
  
  <p>Any ideas on how to remove the background map and keep the colored layer over the countries?</p>
  
  <pre><code>&lt;script type="text/javascript" src="europe_countries.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var map = L.map('map').setView([50.888571, 10.413779], 3);
  
  
  
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
          maxZoom: 18,
          attribution: 'Map data &amp;copy; &lt;a href="https://www.openstreetmap.org/"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
              '&lt;a href="https://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
              'Imagery © &lt;a href="https://www.mapbox.com/"&gt;Mapbox&lt;/a&gt;',
          id: 'mapbox.light'
      }).addTo(map);
  
  
      // control that shows state info on hover
      var info = L.control();
  
      info.onAdd = function (map) {
          this._div = L.DomUtil.create('div', 'info');
          this.update();
          return this._div;
      };
  
      info.update = function (props) {
          this._div.innerHTML = '&lt;h4&gt;US Population Density&lt;/h4&gt;' +  (props ?
              '&lt;b&gt;' + props.name + '&lt;/b&gt;&lt;br /&gt;' + props.density + ' people / mi&lt;sup&gt;2&lt;/sup&gt;'
              : 'Hover over a state');
      };
  
      info.addTo(map);
  
  
      // get color depending on population density value
      function getColor(d) {
          return d &gt; 1000 ? '#800026' :
                  d &gt; 500  ? '#BD0026' :
                  d &gt; 200  ? '#E31A1C' :
                  d &gt; 100  ? '#FC4E2A' :
                  d &gt; 50   ? '#FD8D3C' :
                  d &gt; 20   ? '#FEB24C' :
                  d &gt; 10   ? '#FED976' :
                              '#FFEDA0';
      }
  
      function style(feature) {
          return {
              weight: 2,
              opacity: 1,
              color: 'white',
              dashArray: '3',
              fillOpacity: 0.7,
              fillColor: getColor(feature.properties.density)
          };
      }
  
      function highlightFeature(e) {
          var layer = e.target;
  
          layer.setStyle({
              weight: 2,
              color: '#666',
              dashArray: '',
              fillOpacity: 0.7
          });
  
          if (!L.Browser.ie &amp;&amp; !L.Browser.opera &amp;&amp; !L.Browser.edge) {
              layer.bringToFront();
          }
  
          info.update(layer.feature.properties);
      }
  
      var geojson;
  
      function resetHighlight(e) {
          geojson.resetStyle(e.target);
          info.update();
      }
  
      function zoomToFeature(e) {
          map.fitBounds(e.target.getBounds());
      }
  
      function onEachFeature(feature, layer) {
          layer.on({
              mouseover: highlightFeature,
              mouseout: resetHighlight,
              click: zoomToFeature
          });
      }
  
      geojson = L.geoJson(statesData, {
          style: style,
          onEachFeature: onEachFeature
      }).addTo(map);
  
      map.attributionControl.addAttribution('Population data &amp;copy; &lt;a href="http://census.gov/"&gt;US Census Bureau&lt;/a&gt;');
  
  
      var legend = L.control({position: 'bottomright'});
  
      legend.onAdd = function (map) {
  
          var div = L.DomUtil.create('div', 'info legend'),
              grades = [0, 10, 20, 50, 100, 200, 500, 1000],
              labels = [],
              from, to;
  
          for (var i = 0; i &lt; grades.length; i++) {
              from = grades[i];
              to = grades[i + 1];
  
              labels.push(
                  '&lt;i style="background:' + getColor(from + 1) + '"&gt;&lt;/i&gt; ' +
                  from + (to ? '&amp;ndash;' + to : '+'));
          }
  
          div.innerHTML = labels.join('&lt;br&gt;');
          return div;
      };
  
      legend.addTo(map);
  
    function drawMap(tile){
      map.eachLayer(function (layer) {
          map.removeLayer(layer);
      });
      map.addLayer(tile);
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>&lt;style&gt;
          html, body {
              height: 100%;
              margin: 0;
          }
          #map {
              width: 600px;
              height: 400px;
          }
  
  
      &lt;/style&gt;
  
      &lt;style&gt;#map { width: 800px; height: 500px;}
  .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: white; box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
  .legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
  
  &lt;/style&gt;
  </code></pre>